Automatic Accessibility Checker

When you edit content, the Editoria11y accessibility checker runs automatically and highlights items that might be accessibility issues.

On each page, a small toggle will light up in the bottom right corner. It will have a number if potential issues are found.

Click on the toggle to open a panel with more details about the issues. It will also highlight the items on the page that need review.

Click the toggle again to close the panel and remove all the highlights.

Issues Identified

Editoria11y's automatic tests focus on issues it is confident need addressing. It explains the issues and how to correct them. Issues identified include:

  • Headings
    • Skipped heading levels
    • Empty headings
    • Very long headings
  • Text alternatives
    • Images without an alt element
    • Images with an empty alt element (flagged for manual review)
    • Images with a filename as alt text
    • Images with very long alt text
    • Alt text that contains redundant text like "image of" or "photo of"
    • Images in links with alt text that appears to describe the image instead of the link destination
    • Embedded visualizations that usually require a text alternative (e.g. Tableau, charts)
  • Meaningful links
    • Links with no text
    • Links titled with a file name
    • Links only titled with only generic text (e.g., "click here," "learn more," "download")
    • Links that open in a new window without an external link icon
  • Lists made with asterisks, numbers instead of letters rather than list elements (e.g., bullets, asterisks)
  • Tables without headers and tables with document headers ("Header 3") instead of table headers (<th>)
  • Suspiciously short block quotes that may not be block quotes
  • Embedded videos that need closed captions
  • Embedded audio that needs a transcript
  • PDFs and other documents that need an alternative accessible format

Things Editoria11y Can't Check

Some things just need old-fashioned proofreading. Common content issues that need manual review:

  • Avoid using images of text. They scale poorly for mobile devices and screen magnifiers.
  • Color contrast needs to be strong enough for users with low vision or colorblindness. Avoid using color alone to give meaning, especially in charts and graphs.
  • Do not use sensory characteristics that disappear when layout or color perception changes. For example, the sentence "the items in the right-hand column are required" won't make sense to a user hearing it read. It also loses meaning when the page becomes a single column on a mobile device.
  • If your site does not use Google Translate, identify languages other than English. Screen readers need to know the language to work properly. For example, without a language tag, a screen reader pronounces "Español" as "A Spaniel."