Sa11y Accessibility Tool

You will notice a new icon within the Drupal editing environment in the upcoming weeks.

Sa11y Tool icon

Clicking on the Accessible Tool icon will reveal information about the page as it relates to Accessible Content.

Sa11y Tool: Show Page Outline

Indicators on the page outline what's working well and what can be improved. Clicking 'Show Outline' reveals the page structure informs screen readers and search engines how the page is structured.

Sa11y Tool: Show Page Outline

Headings need to follow in subsequent order. Content within 'Heading 3' cannot follow 'Heading 1', for example.  'Heading 2' needs to follow 'Heading 1'. 'Heading 2' can follow 'Heading 3', however, if the 'Heading 2' is a new topic that has equal importance to the previous 'Heading 2' in the page structure heirarchy.

Sa11y Tool: Readability Score

The Accessibility Tool also has a readability score. This indicates how complex the content structure is on the page. Web content is difficult to read on screen because of the refresh rate of the screen itself. For this reason, users tend to scan content looking for important information. It's best to keep content concise, using short paragraphs and bullet points.

Sa11y Tool: Accessibility Error Example

An example of an 'Accessibility error' found on page using the Sa11y Accessibility Tool. In this case, the tool is indicating that the linked text "Aid" is not sufficiently contextual to let the user know what the link is referring to.