ArcGIS Survey123

Web accessibility best practices for Survey123 authors

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.

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:

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:

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.

About the author

Ismael Chivite joined Esri in 2002. A geographer by training, he loves helping people leverage GIS to improve the way they work. As a Senior Product Manager, Ismael is always looking for ideas to create new and improve existing Esri products. Outside working hours: Legos, rock climbing, Romanesque architecture and jamon iberico. On occasion, he enjoys jamon during working hours too.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Dev Summit 2024: Observability and reliability in ArcGIS Enterprise on Kubernetes

Read this article