About

Keep it simple.

Editoria11y (editorial ally) is a user-friendly accessibility “spellcheck” that addresses three critical needs for content authors:

  1. It runs automatically. Modern spellcheck works so well because it is always running; put a check behind a button and few users remember to run it!
  2. It focuses exclusively on straightforward issues a content author can easily understand and easily fix. Yes; comprehensive testing should be a key part of site creation, but if a tool is going to run automatically on every page, it will do more harm than good if it is alerting on issues editors cannot fix.
  3. It runs in context. Modern content management systems often assemble pages from many separately-edited blocks, widgets and elements. Only a fully-assembled “page” can be checked for things like the header outline order.

The authoring experience:

three toggles, a checkmark, a red outlined 4, and a 1 on a solid yellow circle
The checker draws a toggle in the lower-right corner of the page (can be overridden) with an issue count. Shown here are toggles from a page with no issues, a page with 4 issues including at least one serious issue, and a page with one “manual check needed.”

Screenshot of panel showing 3 issues detected
Clicking the toggle opens the checker’s main panel, which, provides an issue count (if any), as well as tools to visualize the page outline and image alts. The main panel can be set to open automatically when new issues are detected.
Sample alert on an invisible, empty heading explaining why “blank” headings are confusing for screen reader users, and providing tips to fix.

Try a clickable demo of what a logged-in author would experience.

All included tests:

  • Headings
    • 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
  • 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”
    • 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 elements
    • Embedded visualizations that usually require a text alternative
  • Meaningful links
    • Links with no text
    • Links titled with a filename
    • Links made of only generic words: “click here,” “learn more,” “download,” etc.
    • Links that open in a new window without an external link icon
    • Images in links with alt text that appears to be describing the image instead of the link destination
    • Links to PDFs and other documents, reminding the user to test the download for accessibility or provide an alternate, accessible format
  • General content quality assurance
    • Lists made from asterisks, numbers and letters rather than list elements
    • LOTS OF CAPS LOCK TEXT
    • Tables without headers
    • Tables with empty header cells
    • Tables with document headers (“Header 3”) instead of table headers
    • Suspiciously short blockquotes that may not be block quotes.

Installation & configuration

If possible, use a turnkey integration:

To build your own implementation, create a local copy from the Github Repo (or reference a CDN version) of “editoria11y.min.js,” and then create a new “Ed11y” instance:

  <script src="/YOUR_FOLDER/editoria11y.min.js"></script>
  <script>
    const ed11y = new Ed11y({
      // options,
    });           
  </script>

A complete implementation will only be called for logged-in editors (you don’t want your site visitors seeing your checker!) and will have set various custom options.

View configuration tips.

Recent Updates

  • Towards v2
    Two years ago we introduced the Editoria11y accessibility checker as a turnkey site plugin for Drupal that would offer authors automatic instant feedback, with helpful tips for improving their content. We thought this would meet an unmet need. Existing options all required training and diligent use to be useful, and experience had showed us that […]
  • ​Introducing Editoria11y
     Creating highly accessible Web content is complicated, and tends to start with a lot of training. Familiar practices must be discouraged: New practices must be encouraged: Certainly some of our trainings are rolled out because we are teaching new concepts, but at some point the question needs to be asked: how much of the need […]

Credit

The Editoria11y JS library is maintained by John Jameson, and is provided to the community thanks to the Digital Accessibility initiatives at Princeton University’s Office of Web Development Services

Editoria11y began as a fork of the Sa11y library, which is led by Adam Chaboryk at Toronto Metropolitan University. The libraries share most tests, and our teams work together on new features!

Sa11y itself began as a fork of Tota11y by Khan Academy.