Improving Accessibility with Craft CMS

By Matt,

June 2021

Web Dev
The state of accessibility (a11y) on the web is depressing. However there are tangible signs of improvement...
In good news, the recent WebAim Million report, reviewing the top 1,000,000 homepages, showed a reduction in detectable a11y errors from an average of 60.9 errors a year ago to 51.4.

That still seems like a large number, particularly as these are “detectable” errors, meaning these can be scanned by a robot (in this case the WAVE accessibility testing tool) to check the sites. Therefore it wouldn’t catch more complex issues.

Here are a few other highlights from the report that make for fairly depressing reading:

  • The number of elements on the average home page was 887, a slight increase from 864 in 2020. At 51.4 errors per page, users with disabilities would expect to encounter detectable errors on 1 in every 17 home page elements.

  • 97.4% of home pages had detectable WCAG 2 failures. This was a small improvement from 98.1% in 2020.

  • Home pages most commonly had low contrast text, missing alternative text, missing form input labels, empty links, missing document language, and empty buttons.

  • 86.4% of home pages had low contrast text averaging 31 instances per home page.

  • 26% of images had missing alternative text. Over one third of all images analyzed had detectable accessibility issues.

  • Nearly half of all form inputs were not properly labeled.

  • The proper use of headings in home pages is increasing over time.

And so on.
Source: WebAIM.org

Responsibility

We as developers are all culpable of this. I think broadly most good developers care about making things accessible as they can. I also think designers are learning more about the constraints (we make testing for colour contrast part of the decision making around branding decisions for example).

Improving accessibility can be straightforward, but some aspects are more challenging. It is sometimes difficult to understand the nuances and different use cases. It is hard to appreciate that best practices change as technology and understanding changes. However this isn’t an excuse, we need to put as much effort into understanding and building for users with different experience as we do/did for the transition to mobile, for performance, for SEO, or for incorporating JS frameworks. This effort needs to start with good resources for how to improve your a11y game.

Craft CMS

Our CMS of choice, Craft has recently begun on its commitment to making version 4 of the CMS WCAG AA compliant. They have hired a Lead Accessibility Engineer, Matsuko Friedland to lead their efforts to improve. As part of this process Matsuko is blogging about best practices in relation to what they are working on. The posts are informative, easy to follow and provide excellent advice for Craft CMS and for the wider web in general.


Craft’s commitment to accessibility was a big part of how it won the race to be the CMS for the new W3C website (currently under construction). As a developer it is great to have a company helping to make understanding accessibility easier. From an agency perspective, it is good to know that the a11y of the CMS is one less thing we need to worry about.

Some other good a11y resources

Inclusive Components (Haydon Pickering) - Super detailed tutorials on how to build a bunch of common components in an accessible way.

A11y Project - A community driven resource to make understanding digital a11y easier

The Paciello Group Development Blog - news and dev information from a top A11y agency

Gov UK Accessibility Blog - The Government Digital Services are always a good reference


Have any good resources for accessibility? Tweet us!