Editoria11y: Check website accessibility with ease


In July, OIT added the Editoria11y module to the Drupal platform to check website accessibility. It focuses exclusively on content issues, things authors and contributors can easily understand and fix. This module is meant to provide supplemental accessibility feedback in real-time as the web pages are built, so accessibility issues can be addressed before the content is published.

Advantages

Editoria11y has numerous advantages including, but not limited to:

  • Automatically scans the content as contributors build and edit web pages, allowing them to easily find and fix accessibility issues
  • Inserts alerts and tooltips to assist contributors without confusing code
  • Performs a variety of accessibility tests for
    • Text alternatives (e.g., images with no alt text, redundant text)
    • Meaningful links (e.g., links with no text or meaningless links like “click here”)
    • Document outline and structure (e.g., skipped heading levels, short blockquotes, tables without document headers)
    • General quality assurance (e.g., use of all caps text, links to documents, reminders for closed captions or transcripts)

Explore the 7 Core Skills on the AccessibleU website for more information about the accessibility issues that may be flagged by Editoria11y tests.

Limitations

Editoria11y is not a substitute for more comprehensive tools like Pope Tech or manual accessibility testing because it doesn’t check:

  • Images of text
  • Color contrast
  • Sensory characteristics that disappear when layout or color perception changes
  • Identify languages other than English unless a site doesn’t use Google Translate

How to use it

Contributors must login to their sites and turn on the module’s overlay toggle in the lower right corner of the page. The IT website includes detailed knowledge based articles on how to find content issues, along with accompanying screenshots for using Editoria11y, such as:

  • The number of alerts on the page, including tooltips that explain the problem and what actions are needed to resolve it.
  • What the alert icons represent: blue (no issues), red (definite issues), yellow (only some manual checks needed).
  • How to step through the issues on the page, restore previously dismissed alerts, visualize text alternatives for images on the page, and correct the heading structure.

Helpful tip: To edit the page while also viewing the alert icons and tooltips, open two tabs or windows in your browser: one for viewing the page and one for editing it. When you finish editing, save your work then refresh the other window to confirm your updates.

Installation and Configuration

The module is available by default in the University of Minnesota’s Drupal instance. Users can make configuration changes as needed, based on their permission level.

Resources

If you have any questions or need additional information, please contact the University Relations Web team at urweb@umn.edu.
 

Topics: Web