Skip to main content

Search

ADA compliance and the accessibility tag

  • Updated

The accessibility tag improves survey usability for respondents with disabilities. It enhances keyboard navigation, visual contrast, and assistive technology support when used with the Modern theme.

To enable accessibility features, add accessibility: y to the the app config widget.

app config
accessibility: y

For a "full survey" example of how accessibility: y enhances the respondent experience, see below.

Details

Adding the accessibility: y tag to your survey will 

  • Enable Tab key navigation for questions and tables.
  • Allow submitting responses with the Enter key.
  • Improve button focus styling and contrast.
  • Add ARIA attributes (e.g., role, aria-checked, aria-disabled).

ARIA and accessibility

Accessible Rich Internet Applications (ARIA) improve web accessibility by adding roles and attributes that assistive technologies can interpret.

ARIA in IntelliSurvey

IntelliSurvey includes improved aria-labels for:

  • Simple tables
  • Question text, row text, and table text
  • Checkbox and radio buttons
  • Maximum selection rules for checkbox questions
  • Navigation buttons.

Best practices for accessible surveys

Survey programmers can enhance survey accessibility by:

  • Using HTML attributes (e.g., <h1> or role="heading") for screen reader navigation.
  • Adding alternate text for images and videos.
  • Writing descriptive hyperlinks (e.g., "Read the privacy policy" instead of "Click here").
  • Structuring content with headings, spacing, and bullet points.
  • Designing surveys to be mobile-friendly.

Additional examples

Using ARIA attributes or HTML tags to define headings

Though some of the most helpful aria-labels have been added to IntelliSurvey's templates, we also recommend implementing HTML attributes instead of 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 <p> (paragraph) tag or <div> tag with the attribute role="heading". The text will remain the same size as a regular paragraph, but assistive technologies should recognize it is playing the role of a heading.

ARIA level one heading with 'heading role'

<div role="heading" aria-level="1">Main Page Heading</div>

HTML attribute with 'heading role'

showtext: INTRO 
html: <<ENDHTML 
<p role="heading">Main Page Heading</p> 
<p>Participation in this survey is optional and entirely voluntary.</p> 
ENDHTML

Full survey example

Below you will find a comparison of how a short survey would look in our default Flex theme vs. Modern theme. The latter includes the accessibility: y tag. A variety of accessibility-supported question types have been included for demonstration purposes.

Survey programmed with Flex theme
Survey programmed with 'accessibility: y' in Modern theme

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.