accessibility icon

Paint-By-The-Numbers Content Accessibility

Catharine McNally, Associate Product Manager
#Accessibility | Posted

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!

 

Iconic Home Alone Bathroom Mirror scene when Kevin from “Home Alone” screams “Ahhh!"

 

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.

Loop animation of painter painting in Mona Lisa with paint-by-numbersSo, 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:

  1. Images

  2. Headings

  3. Tables

  4. Links

  5. 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.pngicon in the CKEditor toolbar,

 

WYSIWYG Toolbar with an Accessibility Logo as a button

 

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.

 

Demonstration of Accessibility Checker with an Error Popup indicating an image needs alt text

 

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

  1. Right-Click over the Image

  2. Select Image Properties

  3. Enter the Alt-Text in the field

  4. 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! And to learn more about improving your website accessibility, download our Accessibility Playbook here.

Catharine McNally

Associate Product Manager