Paint-By-The-Numbers Content Accessibility
Paint-By-The-Numbers Content Accessibility
Catharine McNally | Accessibility Specialist
July 5, 2017
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.
Oh no!
PAINT-BY-THE-NUMBERS ACCESSIBILITY
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:
- Images
- Headings
- Tables
- Links
- Lists
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.
IMAGES
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.
Remediation Steps
Quick Fix
Enter in a brief description into the Alternative Text field provided via the Interface, and select “Quick Fix” to apply those changes.
Manual Fix
- 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!