Accessibility Checker

In Drupal Canvas (a visual page-building tool for Drupal), accessibility checking is primarily managed through integrated tools like Editoria11y to ensure content is inclusive and WCAG-compliant.

Key Features of the Accessibility Checker

Automatic scanning: Tools like Editoria11y automatically flag common mistakes as you build or edit pages, meaning editors don't have to remember to click a separate "check" button.
Real-time visual alerts: Issues are highlighted directly on the page with colored icons:
- Red: Indicates a definite accessibility error that must be addressed.
- Yellow: Highlights potential issues that require manual review (e.g., verifying if a document link is accessible).
Contextual guidance: Clicking an alert provides an explanation of the problem and actionable tips on how to fix it.
In-browser workflow: The checker runs on the front-end, allowing you to see exactly how issues appear to a user before the page is published.

Common Issues It Detects

The integrated checker scans for over 50 common accessibility mistakes, including:

Images: Missing alt text, long alt text or filenames used as alt text.
Links: "Click here" or "Read more" links that lack descriptive context or links opening in new windows without warning.
Structure: Skipped heading levels (e.g., H2 to H4), empty headings and tables lacking proper headers.
Media: Reminders to add closed captions for video embeds or transcripts for audio.

The content tests include:

Text alternatives

Alternative text (alt text) describes an image for users with visual impairments. While not visible on the screen, it is picked up and read aloud by screen readers.

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

Meaningful links

Link text must be descriptive and functional out of context. Keyboard users often navigate by tabbing from link to link, while screen reader users frequently browse via a generated "link list." In both cases, clear labels prevent the need to manually search the surrounding text for meaning.

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

Document outline and structure

Headings create a roadmap for your content. While they help all readers find topics of interest, they are a primary navigation tool for screen reader users. Most assistive technology users start by skimming headings to understand a page's layout; providing a clear hierarchy allows them to jump straight to the information they need without listening to the entire page.

Skipped heading levels
Empty headings
Very long headings
Suspiciously short blockquotes that may be fake headings
All-bold paragraphs with no punctuation that may need heading tags
Suspicious patterns of paragraph prefixes that may need list tags (e.g. *, •, ☑️, 👉, or incrementing numbers/letters)
Tables without headers
Tables with document headers ("Header 3") instead of table headers (<th>)

General quality assurance

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

Global Report

You can find the Accessibility Report for your website in the admin bar at the top of the page when logged in. Go to "Reports" -> "Editoria11y Report" to find the report.

Orange Alert

Accessibility Checker

Key Features of the Accessibility Checker

Common Issues It Detects

Text alternatives

Meaningful links

Document outline and structure

General quality assurance

Global Report

Example below:

Orange Alert

Accessibility Checker

Key Features of the Accessibility Checker

Common Issues It Detects

Full list of items checked

Text alternatives

Meaningful links

Document outline and structure

General quality assurance

Global Report

Example below: