Making the Web more accessible: An update on Wagtail's accessibility checker
How Wagtail 5.0 can help make your Wagtail projects more accessible
We all know how crucial it is to make our websites accessible to everyone. It's not only a legal and moral obligation but also a business opportunity that can bring real benefits.
Did you know that there are around 1.3 billion people with significant disabilities in the world? In the United States alone, disabled adults have a combined annual disposable income of half a trillion dollars. This is a huge, often overlooked market that you can tap into just by making your website accessible. But the benefits don't stop there. Making your website accessible can also improve the overall user experience for everyone, reduce legal risks, demonstrate corporate social responsibility, and strengthen your brand.
Unfortunately, despite the importance of web accessibility, a shocking 96.3% of the world's top homepages still have basic accessibility issues with an average number of 50 errors per page (WebAIM Million, 2023). One of the reasons why this is happening is that accessibility bugs can be hard to notice without the relevant experience or testing tools.
Our accessibility checker
That's where Wagtail comes in. We have decided to address this problem and help our authors identify and fix accessibility issues. Our accessibility checker, a built-in feature of the CMS introduced in Wagtail 4.2, scans pages for errors and shows the results directly in the interface. The checker is based on Axe, the world's most popular accessibility testing engine, making it powerful and precise with close to zero false positives. Having this checker set up is fundamental to our commitment to accessibility.
Checker upgrades: more rules and better UI
In Wagtail 5.0, we upgraded our accessibility checker and added more rules to improve website accessibility. Our checker now includes checks for inaccessible button and input button names, as well as links with inaccessible names, empty table headers, and frames without text labels.
We've also added outlines that highlight inaccessible elements on the page, which makes it easier to identify them. Furthermore, our checker now sorts violations based on their location on the page, which provides more efficient navigation.
Our team plans to integrate the checker into the page editor in the future, which will give you the ability to view any changes and make adjustments in real-time.
Configurable checker
In Wagtail 5.0, we also made it possible for developers to customise the accessibility checker. We hope this will allow implementers to make the checks more or less strict based on the needs of their project as well as make room for project-specific accessibility checks.
Here is an example of how to turn on all Axe rules, including those that aren’t directly related to page content:
from wagtail.admin.userbar import AccessibilityItem class CustomAccessibilityItem(AccessibilityItem): # Run all rules with these tags axe_run_only = [ "wcag2a", "wcag2aa", "wcag2aaa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice", ] # Except for the color-contrast-enhanced rule axe_rules = { "color-contrast-enhanced": {"enabled": False}, } @hooks.register('construct_wagtail_userbar') def replace_userbar_accessibility_item(request, items): items[:] = [CustomAccessibilityItem() if isinstance(i, AccessibilityItem) else i for i in items]
Real-world impact of the checks
There are thousands of Wagtail-based websites out there with these exact problems our checks are flagging, and we’re hoping the introduction of the checker will gradually help websites fix those basic issues. As of April 2023, we can use HTTP Archive data to check how many websites’ homepages pass those checks, across about 4,000 sites from their dataset:
We will revisit this on a regular basis and hope this graph will show clear improvements year-over-year. We strongly encourage you to give our upgraded checker a try, check your pages, and experience the excitement of publishing a page with zero accessibility errors found by the checker. Join us in making the web more accessible to everyone!