Editoria11y for Drupal

Editoria11y ("editorial accessibility") is a user-friendly web accessibility tool that addresses three critical needs for content authors:

  1. It runs automatically. As spellcheck does, Editoria11y works so well because it is always running; whenever Drupal content editors are authenticated, Editora11y is active, so there is no need to remember to run it!
  2. It runs in context. Drupal uses views, Layout Builder, Media, and other modules to assemble a complex page. Editora11y can interact with all of these modules in context and check for web accessibility issues automatically.
  3. It focuses exclusively on content issues: Drupal content editors can only affect the content of their webpage and not the website template. The Editoria11y tool only focuses on those things you can change.

Editoria11y is already available to all employees who are Drupal content editors. Once you have authenticated and are on a webpage for which you have access as a content editor, Editoria11y is present and checks for accessibility issues automatically. Note that Editoria11y does not check while you are editing a page. However, when looking at a page you have content editor access to, Editoria11y will alert you to accessibility barriers and suggest items requiring manual verification. The alerts are provided within the context of the webpage for ease of use. Editoria11y runs through accessibility issues in the same manner that a spell checker runs through a document. This functionality means that content editors easily comprehend information on the fly as they edit their web pages.

Using Editoria11y: The Show Toggle Button 

When Drupal content editors are logged in, the "show" toggle button is present at the bottom of the page (remember that Editora11y does not check while you are actively editing a page.) The toggle button has three states based on the page's accessibility status:

  1. No issues (blue with human icon): there are no automatically-detected issues found by Editoria11y.
  2. Manual review needed (gold with a question mark): these are warnings that require you to check items such as video, documents, etc., manually. If your manual check requires it, correct the errors.
  3. Errors detected (red with an exclamation point): these are issues Editoria11y found automatically and are errors that create barriers to content; you should correct these errors right away.
Editoria11y Toggle State: no issues, manual check, and errors found.

Using the Panel

A panel area appears when activating the show button and can flag issues on the page, so editors know where to make fixes. The panel also includes a "show tags" control that reveals heading structure and alt text to make things easier. These lists can be toggled with the "content outline" and "media" buttons near the beginning of the widget.

Clicking "Show tags" on the control panel visualizes text alternatives for images ("alts") and the document outline.

Cal State LA webpage showing the Editoria11y Outline panel at right of page

Issue types and checks

 

When the toggle is clicked, Editoria11y's control panel opens, and elements with issues are given tooltips explaining what actions are needed. If the site admins choose (via the module configuration page), this can happen automatically whenever new issues are detected:

 

Editoria11y Control Panel showing errors for alt-text

 

 

Issues Flagged in the Quick Check

  • Headings
    • Skipped Heading levels
    • Empty Headings
    • Very long headings
    • Suspiciously Short Blockqutes that may actually be headings
  • Text alternatives for images
    • 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"
    • Embedded visualizations that usually require a text alternative 
  • Meaningful links
    • Links with no text
    • Links titled with a filename
    • Links only titled with only generic text: "this link," "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
  • Tables
    • Tables without headers and tables with document headers ("Headers 3") instead of table headers (<th>)
    • Empty table cells
    • Tables used for layout
  • General content quality assurance
    • Lists made from asterisks, numbers, and letters rather than list elements
    • AVOID LOTS 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.

Things Editoria11y Can't Check

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

  • Avoid using images of text. They scale poorly for mobile devices and screen magnifiers.
  • Color contrast needs to be strong enough for low vision or colorblindness users. 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, with a language tag, a screen reader pronounces "Español" as "A Spaniel."

Editorially Demo

Clickable demo of what an editor would see.