Keep it simple.
Editoria11y (editorial ally) is a user-friendly accessibility “spellcheck” that addresses three critical needs for content authors:
- It shows results inline. Content authors do not need to be trained or remember to click a button, visit a dashboard or wait for a crawl. Tips and alerts automatically appear when relevant.
- It focuses exclusively on straightforward issues a content author can easily understand and easily fix. Comprehensive testing with other tools and techniques is a critical part of making a site accessible, but many of the results are not the content author’s responsibility.
- It highlights in context. Modern content management systems assemble pages from many separately-edited blocks, widgets and elements. Only a fully-assembled “page” can be checked for things like the heading outline order.
Editoria11y does not modify your content. It is not an overlay; it is an author-facing tool that helps authors make content accessible from the start.
Try a clickable demo of what a logged-in author would experience.
The authoring experience:
Alert toggles are placed on on content with definite or potential images. They can be clicked or hovered to show details and tips:
The main control panel has buttons to jump through the list of alerts, show and hide the inline tips, and restore dismissed alerts,as well as visualizers for the document heading outline and image text alternatives:
Carefully chosen tests
Marked with (m) are “manual checks,” which are placed on content that may be OK as-is, depending on context. Authors are able to hide or dismiss manual checks. Definite problems, such as links with no text, can only be hidden by the site administrators.
- Page structure that is meaningful for screen readers and search engines
- Headings with no text at all
- Tables without header cell
- Tables with empty header cells
- Document headers (“Header 3”) inside table cells
- Skipped heading levels (m)
- Very long headings that might not be actual headings (m)
- Text alternatives for images and media
- Images without an alt element
- Images marked as decorative using an empty alt element (m)
- Images with a filename as alt text (m)
- Images with very long alt text (m)
- Alt text containing redundant text (m)
- Video embeds, reminding the user to add closed captions (m)
- Audio embeds, reminding the user to provide a transcript (m)
- Social media embeds, reminding the user to provide alt elements (m)
- Embedded visualizations that usually require a text alternative (m)
- Links that meaningfully describe where they go
- Links with no text
- Links with a filename as their label (m)
- Links made of only generic words: “click here,” “learn more,” “download,” etc. (m)
- Links that open in a new window without warning (m)
- Images in links with alt text that appears to be describing the image instead of the link destination (m)
- Links to PDFs and documents, reminding the user to test the document for accessibility or provide an alternate format (m)
- Visual-only formatting
- Lists made from asterisks, numbers and letters rather than list elements (m)
- LARGE QUANTITIES OF CAPS LOCK TEXT (m)
- Possible heading: suspiciously short blockquotes (m)
- Possible heading: short, all-bold paragraphs (m)
Editoria11y does not flag design issues (color contrast) or development issues (invalid ARIA). It is meant to work alongside, not replace, tools designed for designers and developers.
Install & configure
If possible, use a turnkey integration:
The Drupal and WordPress integrations add additional server-side features, such as synchronized issue dismissals, site-wide issue dashboards, role-based permissions, and admin-facing configuration pages.
Once you have installed the checker, be sure to explore your site. There are quite a few configuration options available, chiefly to prevent throwing alerts on page elements or content that appear on every page and/or cannot be fixed by content authors.
To build a custom implementation, create a local copy of the checker 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({
// your configuration options
});
</script>
The default settings work for most content management systems, but you may need to set some custom configuration to constrain the checks to editable content, adjust the colors to match your theme, and control which users are presented with issue dismissal tools.
Note that it is possible to run the checker headlessly to build a custom interface, and to send results to an API.
Recent Updates
- Accessibility checker for CKEditor5The CKeditor4 accessibility checker was never ported to v5, so I’ve been working for the last year to rewrite Editoria11y to fill that niche — and as a bonus, the work resulted in code that can also check inline TinyMCE instances as well as Gutenberg.
- 2024 A11yTalksA bit of history, and discussion of the upcoming live-checking capabilities.
- Drupal GovCon 2023Session 1 Content Creators Want Automatic Accessibility Checks An in-depth look at how inline checkers like Sa11y and Editoria11y work differently from developer-focused manual tools and crawler-based dashboards. Session 2Editoria11y v2: Building a Drupal-integrated Accessibility Checker A developer’s tour of the JavaScript, Web Components, JSON API and Drupal features that make up the Editoria11y checker.
Credits
Editoria11y is maintained by Princeton University’s Web Development Services team.
- Primary maintainer: John Jameson
- Devops: Brian Osborne & Jason Partyka
- Sponsors:
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.