Editoria11y Accessibility Checker

Editoria11y (“editorial accessibility ally”) is a quality assurance tool built for an author’s workflow:

1. It provides instant feedback. Authors do not need to remember to press a button or visit a dashboard to check their work.
2. It checks in context on pages, not just within the post editor, allowing it to test content edited in widgets or theme features.
3. It focuses exclusively on content issues: assisting authors at improving the things that are their responsibility.

This plugin is the WordPress adaptation of the open-source Editoria11y library. Tests run in the browser and findings are stored in your own database; nothing is sent to any third party. It is meant to supplement, not replace, testing your code and visual design with developer-focused tools and testing practices.

The authoring experience

Check out a demo of the checker itself.

• When logged-in authors and editors are viewing pages, Editoria11y inserts tooltips marking any issues present on the current page. Issues are also highlighted while editing in the Block Editor / Gutenberg.
• Tooltips explain each problem and what actions are needed to resolve it. Some issues are “manual checks,” which have buttons to ignore the check or mark the content as OK.
• Clicking the main toggle shows and hides the tooltips.
• The main toggle also allows authors to jump to the next issue, restore previously dismissed alerts, visualize text alternatives for images on the page (“alts”), view the document’s heading outline, and view site-wide detection lists.

The admin experience

• Filterable reports let you explore recent issues, which pages have the most issues, which issues are most common, and which issues have been dismissed. These populate and update when published content is viewed by logged-in authors.
• Various settings are available to constrain checks to specific parts of the page and tweak the sensitivity of several tests.

The tests

• Text alternatives for visual content
  • Images with no alt text
  • Images with a filename as alt text
  • Images with very long alt text
  • Images with fake alt text to get around field validation (e.g. “TBD”)
  • Alt text that contains redundant text like “image of” or “photo of”
  • Images in links with alt text that appears to be describing the image instead of the link destination
  • Embedded visualizations that usually require a text alternative
• Meaningful links
  • Links with no text
  • Links titled with a filename
  • Links only titled with generic text: “click here,” “learn more,” “download,” etc.
  • Links that open in a new window without warning
• Document outline and structure
  • Skipped heading levels
  • Empty headings
  • Very long headings
  • Suspiciously short blockquotes that may actually be headings
  • All-bold paragraphs with no punctuation that may actually be headings
  • Suspicious formatting that should probably be converted to a list (sequences of sentences that start with asterisks, emoji or incrementing numbers/letters)
  • Tables without headers
  • Empty table header cells
  • Tables with document headers (“Header 3”) instead of table headers
• General quality assurance
  • LARGE QUANTITIES OF CAPS LOCK TEXT
  • Links to PDFs and other documents, reminding the user to test the download for accessibility or provide an alternate, accessible format
  • Video embeds, reminding the user to add closed captions
  • Audio embeds, reminding the user to provide a transcript
  • Social media embeds, reminding the user to provide alt attributes
• Custom results provided by your JS

Credit

Editoria11y’s WordPress plugin is maintained by Princeton University’s Web Development Services team:

• John Jameson: Editoria11y JS and CMS integrations
• Jason Partyka: Devops
• Brian Osborne: Code review
• Michael Muzzie: Wapuu photos

Editoria11y began as a fork of the Toronto Metropolitan University’s Sa11y Accessibility Checker, and our teams regularly pass new code and ideas back and forth.