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:
- No issues: there are no automatically-detected issues found by Editoria11y.
- Errors detected: these are issues Editoria11y can determine automatically, and are errors that create barriers to content.
- 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.)
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. Under the "issues" panel, choosing the "first" button will begin outlining the content with accessibility issues.
The panel also includes a "heading" tab for checking heading structure and an "alt text" tab for quickly viewing image alt text. These panels can be toggled buttons near the beginning of the widget.
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.
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
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
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