We can spend all the time in the world creating a perfectly accessible site by the time it launches, but the moment new content is created, there is a chance that accessibility will not be maintained. All that effort for naught.
Remember those Paint-by-the-Numbers days? You found a shape with a number in it, grabbed the numbered paint and painted inside the lines. You really don’t need any other artistic experience to complete this task. By the time you’ve finished filling in all the shapes with the respective color, you’d have a picture and probably feel pretty proud of yourself.
Now, what if creating accessible content were as easy as paint-by-the-numbers? It can be, thanks to another great tool available in our arsenal: CK Editor Accessibility Checker Tool. This is available as a Drupal Module as well.
So, if we want to avoid that “Kevin McCallister moment from Home Alone and prevent our newly-released accessibility fixes from falling into jeopardy, we have to provide our content editors with “accessibility- by-the-numbers”. Just as we have clear direction on what, where, and how to paint, we can do the same for creating accessible content by enabling the CK Editor Accessibility Checker.
Not only will content editors have quick access to what needs to fixed, but also how to fix it. Long gone are the days of parsing a list of failures in jargon and trying to figure out what to do next. Such fixes can be done automatically by the tool, or through the step-by-step manual fix guide!
The CK Editor Accessibility Checker tool tests the following site elements for accessibility compliance:
Here is an example of an image accessibility requirement, how to run an image test in the CK Editor Accessibility Checker, and the remediation steps the tool provides.
The Accessibility Requirement: Images must provide alternative text
Alternative text needs to convey the same information as the image. This text will be used when the browser has disabled images, when the image is not found on the server, or by non-sighted visitors who use screen readers.
How to Test
Selecting the Accessibility Tester icon in the CKEditor toolbar,
keep rotating through the pop-up until you come across the Images. If you do not see image warnings, then the image itself is accessible.
Enter in a brief description into the Alternative Text field provided via the Interface, and select “Quick Fix” to apply those changes.
Right-Click over the Image
Select Image Properties
Enter the Alt-Text in the field
Then enter the description in the alternative text field
With this CK Editor Accessibility Tool within the WYSIWYG, wouldn’t you agree that’s as close as “paint-by-the-numbers” we can get for helping our content editors understand how to produce accessible content?
Give the demo a try and consider adding it to your Content Management System’s WYSIWYG Editor!