Accesibility Suggestions

Survey Settings - Within the Application

Depending on how strict your accessibility requirements are, you might wish to configure one or more of the following survey settings / properties:

• For each Question Skin in your layout, open the “Question Form Inputs” properties. Under the General tab, towards the bottom, you should see the following options:
• “Question Title in Legend”
• “Question Text in Legend”
• “Question Instruction in Legend”

If you want to ensure that screen readers pick up on the question title, question text and question instruction, make sure the related option is checked off here. This moves the title, text and instruction into a <span> inside the <legend> tag. Depending on the layout you’re using, this could change the look and feel of the text so you might need to adjust the CSS afterwards.

• When you turn ACC mode on, the navigation buttons should automatically change from “>>” and “<<” to something more accessible friendly i.e. “Forward” and “Back”. It also arranges the buttons in a non-table based fashion. However, it is possible you have overridden this, so for each Theme in your layout, check the “Navigation Control” properties. The rendering mode should be either “Accessible” or “Inherit”.
• The same applies to the progress bar; make sure you are using “Accessible” or “Inherit”.
• In Survey Settings > Layout > Accessibility Options, set “Generate Error prefix for error messages”.
• Make sure your error messages are clear and concise. You can change the error messages throughout the entire survey by going to Survey Management > Survey Messages. Or you can write custom validation code in each question to provide more information. For example, a grid could be missing just one answer out of say 10 rows. Instead of the default “One or more questions require further input”, you can check whether the default “Missing Required” error was raised, and if so, change the message using your own text that makes more sense for the relevant question. You can even use the error template and the MISSING field to tell the respondent exactly which question/answer caused the error.

if(MissingRequiredError())
{
SetErrorMessage(LangIDs.en, ErrorTemplate("Please review your responses on this page. You did not select an answer for ^MISSING_AND^."));
}

• You can assign certain tags to elements in the survey design. For example, if you need to ensure that header tags are used on each page, it may be best to ensure that the “Question Title” components in your skins use the “H1” tag. You can specify this in the component’s properties.
• Keep it simple! Short text whenever possible and one question per page is a good approach.

Other Suggestions – Custom Content

If you have built custom objects into your survey, for example images, video players, changes to the layout, javascript, etc. here are some other things to keep in mind:

• If the image serves a purpose (for example an image in the scale label that explains to the user, this is for “not likely”) do not use the CSS Background property. Use an HTML <img> tag and make sure you have specified an “alt” attribute.
• All other HTML <img> tags need an “alt” attribute to describe the image.
• Make sure your survey layout uses colors that contrast well, and use larger than normal fonts. For example, edit your HTML Styles such as “questiontext” and “questioninstruction”.
• Depending on your requirements, you may need to ensure that elements with focus (via using the tab button for example) are addressed such that the focus is visible. For this you may need to add some code as the example below to your theme’s CSS tab.

a:focus, input:focus, textarea:focus { outline: 2px solid #CCCCCC !important; }

• If you are using any <table> tags in your theme/page/skin layouts, give them a role attribute of “presentation”.
• Do not underline text in the question text unless it is a link to something.
• The browser’s tab shows the <title>. The title is typically the survey name, or whatever you have specified on the survey management page. Screen readers typically announce the <title> as it appears on the browser tab every time a page loads, so this can be redundant as the user is moving through the survey. Make it more meaningful by implementing the Javascript code below into your themes. This instead pipes the question title into the page’s <title> tag.

<script type="text/javascript">
document.title = "^f(CurrentForm()).label()^";
</script>

Important
As you design your survey, keep in mind that some Authoringfeatures are not supported in Accessible Mode. When the survey is launched you will be warned of any such issues found so you can make the necessary changes.