Drupal WCAG 2.1 Checker

WCAG 2.1 for Drupal Sites

WCAG 2.1 became a W3C Recommendation in June 2018. It added criteria for mobile, low vision and cognitive accessibility to WCAG 2.0, and it is the standard named in the US Department of Justice rule for state and local government websites, in EN 301 549 V3.2.1 and in most accessibility settlements.

This checker runs the free scan with the WCAG 2.1 AA preset, so the results match the standard your contract, policy or regulator is most likely to name for a Drupal site.

On Drupal sites, WCAG 2.1 issues usually come from themes: fixed-width layouts that do not reflow, light form borders, and hover menus that disappear when the pointer moves. Fix them in the theme or a child theme so every page benefits.

Who Should Run the Drupal WCAG 2.1 Checker

• Drupal site owners whose contracts or policies name WCAG 2.1 AA.
• State and local government bodies, under the ADA Title II rule.
• Businesses responding to an ADA demand letter, which usually cites WCAG 2.1 AA.
• Public sector bodies in the EU, under the Web Accessibility Directive.

WCAG 2.1 Criteria That Often Fail on Drupal

• 1.3.5 Identify Input Purpose

  Form fields that collect personal data, such as name, email and address, need the right autocomplete attribute.

• 1.4.10 Reflow

  Content must reflow at 320 CSS pixels wide, the same as 400% zoom, without scrolling in two directions.

• 1.4.11 Non-text Contrast

  Buttons, form borders, icons and focus indicators need a contrast ratio of at least 3:1.

• 1.4.12 Text Spacing

  Text must stay readable when users increase line, paragraph, letter and word spacing.

• 1.4.13 Content on Hover or Focus

  Tooltips and menus that appear on hover or focus must be dismissible, hoverable and stay visible.

• 4.1.3 Status Messages

  Messages such as “added to cart” or form errors must be announced to screen readers without moving focus.

Where Drupal Sites Usually Fail WCAG 2.1

These problems come up again and again on Drupal sites, and each one fails WCAG 2.1. The Drupal accessibility checker explains how to fix them in Drupal.

• Custom theme markup. Twig overrides that replace core templates can drop landmarks, heading levels, skip links or ARIA attributes that core would have added.
• Views output. Views tables, grids and exposed filters are generated from configuration, so a table can lack header cells and a filter form can lack labels without any code being wrong.
• Layout Builder and Paragraphs. Flexible page assembly makes it easy to put headings out of order, repeat identical link text such as "Read more" and use images with no alt text.
• Webform fields. Complex forms with conditional fields, multi-page steps and custom error messages often hide labels visually, or change fields without telling assistive technology.
• Rich text and media content. Editors using CKEditor can bold text instead of making a heading, paste inline styles that reduce contrast, or embed media without alt text.

Worried about ADA claims as well? The Drupal ADA compliance checker covers the Drupal risks behind most complaints.

What to Test by Hand on Drupal

Automated testing finds many, but not all, WCAG 2.1 failures. Check these yourself after the scan:

1. Zoom to 400% and check nothing is cut off or needs scrolling in two directions (1.4.10).
2. Apply increased text spacing with a bookmarklet and check text is still readable (1.4.12).
3. Open hover menus and tooltips and check you can dismiss them with Escape (1.4.13).
4. Rescan after each fix. Continuous monitoring rescans up to 500 URLs per domain daily and keeps a dated record in the Compliance Vault.

Start 3-day free trial

Related Guides

• WCAG 2.1 AA CheckerThe WCAG 2.1 standard in full, for any website.
• WCAG 1.3.2 Meaningful Sequence Explained in Plain EnglishWCAG 1.3.2 Meaningful Sequence explained simply: why reading order matters, how CSS and layout tables break it, how to fix it and how to test your pages.
• WCAG 3.3.2 Labels or Instructions Explained in Plain EnglishWCAG 3.3.2 Labels or Instructions explained simply: visible labels, format hints, grouped fields and required markers, with code examples and a test routine.
• ADA Website Accessibility – How to Use AccessBell to Help Avoid LawsuitsADA website accessibility explained: who the ADA covers, whether websites count, the WCAG standard, and how AccessBell helps you find and fix issues behind lawsuits.
• WCAG Success Criteria LibraryLook up any criterion the scan flags, in plain language.

Drupal WCAG 2.1 Checker: Frequently Asked Questions