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. 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. Errors detected: these are issues Editoria11y can determine automatically, and are errors that create barriers to content.
Editoria11y toggles for no issues (blue Vitruvian person), 3 manual issues (gold question mark), and 26 errors (red warning sign)

Using the Panel

A panel area appears when activating the show button, and can highlight flagging issues on the page so editors know where to make fixes. The panel also includes a "show tags" control, where heading structure outlines and alt text are shown for reviewing ease. These lists can be toggled with the "content outline" and "media" buttons near the beginning of the widget.

A webpage's editoria11y side panel reveals its heading structure, using h1 and h2 tags
The side panel switches to alt text view, showing each graphic and its current alt text value.

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 brand guides for those issues are included.

Note: test info is attributed to the Editoria11y project.

Editoria11y flags an image with a filename in its alt text, indicated by a red border and status message

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

An empty link flags as an error, which needs to be removed or have meaningful link text

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 heading 3 jumps to a heading 5, so an alternate heading structure is suggested

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

a YouTube embed is flagged, telling the user to check for video accessibility features

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

Relevant brand guides

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.