ADA compliance and the accessibility tag

The accessibility tag provides additional functionalities that improve the survey experience for respondents with disabilities. Currently this tag is focused on use with the Modern theme where the enhancements have been tested on simple question and table types.

IntelliSurvey's software currently uses a mark-up language which labels and organizes objects in a survey. This is the first step in the direction of having more accessible survey designs. Now the accessibility tag takes IntelliSurvey's default designs and makes them more accessible to users with motor, visual, hearing, or mental impairments. For example, those who are visually impaired should be able to use a text reader to access and understand the survey content. With this tag, those who are visually impaired will benefit from button outlines with better focus state styling and color contrast for buttons, text areas, and pulldown menus.

Once the accessibility tag is applied to a survey's app config widget, we can see a survey perform helpful tricks while in the Modern theme. Most answerable questions (radio, checkbox, text, pulldown) and simple tables are:

• Accessible via the keyboard's Tab key.
• Answerable via the keyboard's Enter key.
• Styled with more visibly distinct colors and sizes, and more often styled, such as to designate a button's "focus" state.
• Dynamically updated with accessibility attributes on form elements (e.g., "role", "aria-checked", "aria-disabled", etc.).

Syntax

To implement the additional accessibility features, add the accessibility tag to the app config widget. Note, at this time, surveys should use the Modern theme for best results.

app config
accessibility: y

Examples

Below there are two surveys with identical questions. The survey on the left is using the default Flex theme and no other changes have been applied to its global settings. However, the survey on the right is using the Modern theme and has accessibility: y applied to the app config to enhance the survey experience for those with disabilities.

Understanding ARIA

The following excerpts of text are taken from Mozilla's web docs section on accessibility. You can find the full text here.

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible JavaScript widgets, form hints and error messages, live content updates, and more.

The aria-label heading role defines this element as a heading to a page or section, with the aria-level attribute providing for more structure. The heading role indicates to assistive technologies that this element should be treated like a heading. Screen readers would read the text and indicate that it is formatted like a heading. In addition, the level tells assistive technologies which part of the page structure this heading represents. A level 1 heading, indicated with aria-level="1", usually indicates the main heading of a page, a level 2 heading, defined with aria-level="2" the first subsection, a level 3 is a subsection of that, and so on.

Some of the most helpful aria-labels have already been added to IntelliSurvey's templates. IntelliSurvey also recommends implementing HTML attributes which can be used in lieu of the aria-label heading role. If using a true HTML heading tag (e.g., <h1> thru <h6>) causes the text to be too large on screen, consider using a paragraph tag with the attribute role=heading. The text will remain the same size as a regular paragraph but will be able to tell assistive technologies it is playing the role of a heading. See two different code examples below.

## ARIA level one, main page heading
<div role="heading" aria-level="1">This is a main page heading</div>

## HTML attribute with heading role
showtext: INTRO
html: <<ENDHTML
<p role="heading">This is also a main page heading</p>
<p>Participation in this survey is optional and entirely voluntary.</p>
ENDHTML

As of r8.3, more recent developments have

• Improved aria-labels for tables.
• Improved aria-labels for buttons that are clickable as radios and checkboxes.
• Improved aria-labels for checkboxes with maximum selection rules.
• Added aria-labels for question text, row text, and table text.
• Added aria-labels for the continue and back buttons.

IntelliSurvey will continue to improve its software to promote web accessibility.

Thoughtful programming

Understanding the Four Principles of Accessibility

Although the software itself plays its part in creating equal access to survey content, many other components are a direct result of how a survey is programmed on the front-end. There are four principles that guide website design in respect to increasing accessibility. We can apply this to our surveys to become "thoughtful programmers." The text below has been taken from the Web Content Accessibility Guidelines (WCAG).

The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:

1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

   • This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)

2. Operable - User interface components and navigation must be operable.

   • This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

3. Understandable - Information and the operation of user interface must be understandable.

   • This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

   • This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

If any of these are not true, users with disabilities will not be able to use the Web.

Programming options

Survey Programmers (SPs) can make easy changes to improve accessibility for all of their surveys. These are:

• Use HTML attributes (see the Understanding ARIA section above) to clearly describe the content and outline of a page of text (screen readers rely heavily on heading elements to help assess and navigate a page).
• Apply "alt" attributes to describe alternative descriptors for images and videos.
• Ensure any hyperlinked text is a "call to action" (e.g., "Read the privacy policy here") instead of simply hyperlinking the words "click here."
• Break up large blocks of text on screen with contrasting text heading sizes, spacing, and/or bulleted lists.
• Keep the survey question designs as mobile-friendly as possible.