January 03, 2017

Accessibility Within Reach for Drupal 7 Content Managers With WYSIWYG A11yChecker Module

Enlarged drawing of the accessibility checker icon, a person in a circle.

At Digital Services Georgia, we have done a lot of work to make the sites we serve highly accessible. As part of our Accessibility Initiative, we increased the color contrast in our site designs and added code to make them more friendly to screen readers and keyboard-only navigation. However, we acknowledge there has always been an accessibility wildcard in the mix: the content and markup that content managers add in the WYSIWYG Body fields using CKEditor.

In the past, we have provided training for content managers on accessibility best practices, but requiring subject matter experts to also become web accessibility experts is a tall order. Wouldn’t it be great if an accessibility check could be automated, and content managers could keep their main focus on their content?

Enter the Accessibility Checker plugin for CKEditor. The Accessibility Checker, or A11yChecker, adds a button to CKEditor that fires up a wizard-like interface for checking the accessibility of the work of content managers. Content managers can simply add their content in the WYSIWYG field, then click the A11yChecker button to run the wizard and step through necessary changes. It can even fix some errors automatically.

A11yChecker error message example: Header level 1 can only be followed by level 2. (The WYSIWYG currently contains H1 followed by H3.)
Caption
A11yChecker error message example 1.
A11yChecker error message example: Link text should be useful. (The WYSIWYG currently contains a link titled "Click here.")
Caption
A11yChecker error message example 2.

When we first learned about the A11yChecker, we found that an integration module was available for Drupal 8, but no one had built a similar module for Drupal 7 (which is what our platform uses). To use this plugin on our platform, we had to integrate it with our implementation of CKEditor, which is provided by the WYSIWYG module for Drupal. So I wrote a new Drupal 7 module, WYSIWYG A11ychecker, to provide the necessary integration with Wysiwyg module.

One of the strengths of open source software is the culture of community and sharing, allowing many people using the same software to benefit from one group’s work. We have benefited greatly from this community of sharing, so we were happy to contribute this module back to the Drupal community. Assuring the sites we serve are accessible is part of our core responsibility both in technology and in government. Our hope is that having the A11yChecker as an option for Drupal 7 sites will make it easier for content managers across the globe to increase the accessibility of their web content.

Related to: