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.

To enable accessibility features, add accessibility: y to the the app config widget. Note, not all themes are enhanced equally. Test thoroughly.

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'

show text: 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. Spruce 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 Spruce theme

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.