Editoria11y for Drupal

Editoria11y (meaning "editorial accessibility") is a page-level accessibility checker for Drupal.  It highlights immediate and impactful accessibility fixes to make in web content. It can also help content creators build accessible pages as they're creating in real time.

How it works

Editoria11y scans whenever the page loads or saves, and checks if there are issues to address. It runs in the background, like how a spellchecker finds misspellings as a user types or saves.

Using the Toggle

When logged in, the "show" toggle button presents at the bottom of the page being worked on. There are three states the toggle button can be in, based on the page's accessibility status:

  1. No issues: there are no automatically-detected issues found by Editoria11y.
  2. Errors detected: these are issues Editoria11y can determine automatically, and are errors that create barriers to content.
  3. Manual review needed: these are warnings due to the checker needing an editor's review, or if media needs to be checked for accessibility (like video, documents, etc.)
3 circular inline buttons show the state of a page passing Editoria11y's checks

Using the Panel

A panel area appears when activating the toggle button, and can highlight flagging issues on the page so editors know where to make fixes. Under the "issues" panel, choosing the "first" button will begin outlining the content with accessibility issues.

An Editoria11y panel is open and ready to highlight content

The panel also includes a "outline" tab for checking heading structure and an "alt text" tab for quickly viewing image alt text. These panels can be toggled with the buttons near the beginning of the widget.

An entire list of page headings in Editoria11y, with a visible "h2" marker on one of them
Editoria11y reveals the alt text of images on the page and lists them in the panel

Issue types and checks

Editoria11y looks for issues related to document structure, images, links, tables, and media embeds. Specific checks are detailed in the following sections, and relevant accessibility guides for those issues are included.

Note: test info is attributed to the Editoria11y project.

Editoria11y warns about a graphic having lengthy alt text

Text alternatives checks

  • Images with no alt text
  • 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”
  • 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

Relevant brand guides

A warning about meaningful link text pops up from Editoria11y

Meaningful links checks

  • 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

Relevant brand guides

A manual check in Editoria11y asks about content needing list formatting

Document outline and structure checks

  • 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 (asterisks and incrementing numbers/letters prefixes)
  • Tables without headers and tables with document headers ("Header 3") instead of table headers (<th>)

Relevant brand guides

Editoria11y reminds and asks if the embedded Vimeo content is accessible

General quality assurance checks

  • 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 elements

More Info and Questions

For general info on the module, its tests, or any upcoming features, visit the Editoria11y module page.

For questions or issues about Western's use of Editoria11y, please email webhelp@wwu.edu.