Web accessibility is a spectrum. You will not find a one-click magic button to make all your online surveys fully accessible to everyone, but there are basic guidelines you can follow to make them more accessible. This blog introduces some best practices for Survey123 authors, so if you author online surveys, this is for you!
Survey123 and web accessibility standards
Esri regularly evaluates Survey123 for conformance with web accessibility standards. Specifically, WCAG 2.0 AA, WCAG 2.1 AA, and the Revised Section 508 standards. The results of this evaluation are published through what is known as an Accessibility Conformance Report (ACR). The Survey123 ACR explains the extent to which the software adheres to standard web accessibility guidelines. Find all ACRs published by Esri here.
Survey123 is built with web accessibility in mind. Many survey elements have built-in features that will help your online survey conform with web accessibility standards. For example, standard keyboard navigation can be used to jump from question to question. Survey123 forms are designed to work with the most common screen readers. The built-in collection of themes follows web accessibility guidelines for visually impaired.
In every new release of the software we improve our support for web accessibility. This is a constant in our development efforts and we prioritize our work based on your feedback. If you feel there is an area of Survey123 that is lacking the web accessibility support you wish for, email us at EsriAccessibility@esri.com so we can learn more.
Survey123 web accessibility best practices
We try our best to make Survey123 elements in online surveys as web accessible as possible, but you should not assume that this makes every survey you publish accessible.
First, there are some form elements that by design, are not going to pass certain accessibility tests. For example, the map, signature and ranking question types require interaction with a mouse or touchpad. Respondents with mobility issues, like someone who cannot use a mouse due to a repetitive stress injury, will have difficulty using these questions.
Second, be careful with many aspects of survey design: Choosing the right color contrast between your question labels and background, organizing and labeling your questions appropriately, adding alternative text to images in your form, etc.
Here are some basic rules to help you author web accessible surveys.
Choose your survey question types wisely
All question types in Survey123 support screen readers and standard keyboard navigation except: Dropdown choice lists and Ranking. If you use automated accessibility test tooling against surveys using any of these question types, the survey will not pass the test.
The signature and map question types as well as repeat groups may pass accessibility tests, but they will cause difficulties to keyboard-only users because these elements require a high level of mouse interaction to operate them.
Set alternative text for images in your survey
For branding purposes, or to augment the experience of the respondent, you may want to include images within your survey. Always set alternative text to these images. Alternative text, or alt text, provides a stand-in for images when respondents rely on a screen reader. When alt text is included on images, the description will be read by the screen reader.
Adding alt text takes a little bit of an art. You do not want the description to be too succinct or too detailed. When writing alt text imagine how you would briefly describe the image to someone over the phone. Always remember what alt text is for. I will say it again: Non-sighted respondents rely on this alt text to be read to them with a screen reader.
Alt text can be entered when you upload an image through the Survey123 web designer. If you author your form using XLSForm, the label of your question will be automatically used for question images referenced in the media::image XLSForm column. If adding images to the Thank You screen or other parts of your form through embedded HTML, you will want to us the alt HTML tag. For example: <img alt=”your alt text” src=”your image URL”/>
Use simple and high contrast themes
The themes that come with Survey123 are designed to have the right amount of color contrast and brightness. Keep your theme simple using solid colors for the background (as opposed to background images).
Feel free to choose your own color for the background and other form elements, but keep in mind that your question labels and other form elements must stand out well on top of the background. Do not make this a guess: use color contrast checkers to know when your color contrast is right. For example, the contrast checker included in the WebAIM website.
Select legible fonts
This applies to note question types, question hints, the Thank You screen content and your survey description, where the rich text editor in the Survey123 web designer lets you choose the font size, type and color. If using Survey123 Connect, this applies also to any question label, error message, title or note where you use HTML to modify the look and feel of your text.
- Font type: You can’t go wrong if you use the default fonts used by Survey123. If you decide to get creative, the most accessible fonts are sans serif fonts such as Tahoma, Calibri, Helvetica, Arial, Verdana and Times New Roman. Always avoid artistic fonts with embellishments or flowery cursive strokes. While these fonts can make an aesthetic statement, they are much more difficult to read.
- Font size: Web accessibility standards do not specify a minimum font size for web text. However, you should try to avoid x-small and small. You will likely force respondents to start playing with zoom options in their web browser and that is not fun. If you can choose between reducing the amount of text or reducing the text size, always choose to reduce the amount of text.
- Color: The key considerations with colors is contrast. Always use a contrast checker to ensure your labels have the right amount of color contrast on top of their background. For group headers, use at least a contrast ratio of 3:1. For your question labels, hints and notes, no less than 4.5:1.
Use concise and clear question labels, hints and descriptions
Text in your survey should not be unnecessarily lengthy. Here are some reasons why you should be concise and clear:
- Nobody wants their time wasted.
- Wordy surveys cause fatigue and fatigue leads to lower quality responses.
- The negative effects of lengthy text get multiplied with screen readers, screen magnifiers, and other visual reading assistants.
Consider caveats with multiple-language surveys
When confronted with a multi-language survey, respondents will not be able to select their own language when using a screen reader. Additionally, alt text in custom images cannot be translated. This will lower the accessibility score of your survey.
Test your survey design
There are plenty of automated web accessibility tests out there you could use. However, unless you are an expert on web accessibility with good knowledge of web technology, it is best to stay away from them. The output of an automated test is not always easy to interpret.
Instead, I suggest you:
- Start by giving your survey a go setting aside your mouse and touchpad. That is, complete your survey simply using standard keyboard navigation.
- Install a screen reader add-in or extension in your browser and use it to complete your survey. This will help you identify missing alt text in images and may also help you rethink how you word your question and choice labels.
- Use tools like Colorblindly, Color Oracle, or Sim Daltonism to reveal how colors on-screen will look to people with various types of colorblindness. Does your survey have the right amount of color contrast throughout?
- Remove your glasses and go for it… common sense and experience will help you quickly identify your faults.
After doing all the above you will have a good feeling as to where your online survey sits in terms of web accessibility. As I indicated at the beginning, web accessibility is a spectrum. Sometimes, you will need to make compromises between accessibility and functionality but overall, designing your surveys with accessibility in mind will always result in a better experience for all.
Use the most up-to-date version of Survey123
Every Survey123 release brings new web accessibility improvements. For best results, publish your survey using the latest version of the software. This applies to both Survey123 web designer and Connect authors. This tip comes last, but it is not the least!
More resources
Esri provides a good deal of resources around accessibility in its products. Start by checking our Esri Accessibility Resources page. The many articles, blogs and tools presented will help you gain a much more complete understanding of accessibility. The most widely accepted standard for web accessibility is WCAG.
Finally, do not hesitate emailing us at EsriAccessibility@esri.com with questions and suggestions. Together, we can progressively make GIS software, maps, surveys, and everything we do more accessible to all. Everyone wins when we do.
Article Discussion: