View on GitHub

editoria11y

A user-friendly automatic content accessibility checker.

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

  1. It runs automatically. Modern spellcheck works so well because it is always running; put spellcheck 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, it will drive an author bonkers if it is constantly alerting on code they do not understand and cannot fix.
  3. It runs in context. Modern content management systems often assemble pages from many sources. Only the assembled page can be checked for things like the header outline order.

The authoring experience

If you are reading this ReadMe on the GitHub site, the following items will have triggered an alert:

• A fake list using bullet symbols instead of list elements.

• link with only the text “click here.”

Try clicking the toggle in the lower righthand corner of the page. Tooltips will appear near these items with explanations of the issue and suggestions for improving the content.

Then try a full demo illustrating most of the tests and results.

Issues flagged in the quick check

Items noted in the full check

Clicking the full check button flips open an expanded panel where the user can see the document outline (headers) and all image alt text.

It also flags some additional items:

Installation and configuration

If possible, start with a turnkey implementation:

To install manually:

Should look something like this:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" media="screen" href="https://itmaybejj.github.io/editoria11y/css/editoria11y.css">
<script src="https://itmaybejj.github.io/editoria11y/js/editoria11y-prefs.js"></script>
<script src="https://itmaybejj.github.io/editoria11y/js/editoria11y-localization.js"></script>
<script src="https://itmaybejj.github.io/editoria11y/js/editoria11y.js"></script>

And remember to only call the script for logged-in editors!

Editoria11y’s default configuration should work fine on both sites. Do explore the preferences file, though; there are several tweaks to make it play nice with most themes. The most important ones:

Dealing with alerts on hidden or size-constrained content

Many interactive components (tabs, sliders, accordions) hide content. The Editoria11y info panel includes a link to jump directly to an alert. If a user can’t see an alert on the page, they can click this link, and it will highlight the container for any hidden alerts – e.g., the box around the slideshow.m

There are also two helper variables for site administrators:

Contact

Editoria11y 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

Acknowledgements

Editoria11y’s JavaScript began as a fork of the Sa11y library, which was created by Digital Media Projects, Computing and Communication Services (CCS) at Ryerson University in Toronto, Canada:

Sa11y itself began as a fork of Tota11y by Khan Academy, and uses FontAwesome icons and jQuery.