Category: WCAG 2.1 Level A

ACCESSIBLE CONTENT: Don’t Use Color As Part of Your Instructional Content

Posted on by Mary Gillen

Color Blindness - Illustration of Glasses

Are you using color as a way of instructing visitors about the next action to take on your Web site?

Think again.

Let’s say you have images of two buttons on your Web page.

Image of a red button and a green button

If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

WCAG 2.0 Guideline 1.4.1 warns Web designers, developers and content creators about depending solely on color when conveying instructions.

There are a number of color blindness conditions. Here are three you should learn about:

Protanopia: People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

Image of how a person with protanopia views red and green colors

Deuteranopia: People with deuteranopia lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum. Deuteranopia is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how people with deuteranopia see the red & green buttons:

Image of how people with deuteranopia view red and green buttons

Tritanopia: People with color blindness involving the inactivation of the short-wavelength sensitive cone system have tritanopia, a very rare blue-yellow color blindness. Tritanopia is a very rare form of color blindness, occurring in less than 0.003% of males and females.

Here’s how people with tritanopia see the red & green buttons:

Image that depicts how a person with tritanopia views red and green buttons on a Web page

Accessible Best Practice: Don’t use color as part of your instructional content. It will confuse and frustrate your site’s color blind visitors and is considered inaccessible according to WCAG 2.0 Guidelines.

WCAG 2.0 Guidelines covered in this post:

Level A Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Level AAA Guideline 3.3.5 Help: Provide detailed help and instructions.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

How to Create Accessible CAPTCHAS

Posted on by Mary Gillen

It’s common for web developers to use CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) functionality for anti-spam verification to make sure HTML form responses are being generated by humans and not computer “bots”.

Example of a visual CAPTCHA

The most commonly used CAPTCHA presents a visual of distorted text for the website visitor to interpret. Another alternative is the audio CAPTCHA, offering human verification to the blind and other visually impaired people. Unfortunately, both types of CAPTCHAS offer accessibility issues:

  1. People with visual disabilities use screen readers that cannot read a CAPTCHA.
  2. You cannot add ALT text to a CAPTCHA image, because then a bot would be able to read it, defeating the purpose of using it.
  3. Audio CAPTCHAs present difficulties for people with hearing disabilities.

SOLUTION: Use Text-based Logic Questions or Math Equations CAPTCHAs

Use a question rather than an image or audio to create CAPTCHA functionality.

A sample CAPTCHA question might be “Which animal is larger—an ant or a elephant?”or “What state is Boston located in?”

Another way to challenge: use math questions (e.g. “What is one plus three?”).

Example of a math question challenge question that can replace a CAPTCHA

PHP Script Solution: All CAPS vs lowercase

For those of you who use PHP, here’s a simple coding trick that enables you to create an accessible CAPTCHA on an HTML form. I have used this for years on client websites, and it works great.

At the bottom of your form, create a text field named Validate. Above the field, add a validation text code of capital letters and numbers (in this case GHW53405) that the user will need to enter in order to submit the form. Also let the user know that the validation code is case-sensitive.

Sample of validation text code form

Once the user enters the validation text code and submits the form, add the following condition at the top of the PHP processing page:

<?php
if (strtolower($_POST[‘Validate’]) != ‘ghw53405′) {
die(‘Sorry…you forgot to enter the special code in the form…hit your back key and try again. Please note that the special code is case-sensitive’);
} else {

rest of script

}

Note that in the PHP condition you need to change the values of the capital letters used in the validation text code to lowercase (see bold above). The PHP function strtolower converts all the text characters of the submitted Validate string to lowercase. If the validation text code has been entered correctly, the rest of the script will process with no problem. If the validation code has been entered incorrectly, the submission will fail and the user will be directed back to the form.

Check Out This Additional Resource: The TextCaptcha service provides access to textual CAPTCHA challenges via a simple JSON or XML API over HTTP. http://textcaptcha.com

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

Accessible Best Practice: Don’t Use Color As Part of Your Instructional Content

Posted on by Mary Gillen

Are you using color as a way of instructing visitors about the next action to take on your Web site?

Think again.

Let’s say you have images of two buttons on your Web page.

Image of a red button and a green button

If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

WCAG 2.0 Guideline 1.4.1 warns Web designers, developers and content creators about depending solely on color when conveying instructions.

There are a number of color blindness conditions. Here are three you should learn about:

Protanopia: People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

Image of how a person with protanopia views red and green colors

Deuteranopia: People with deuteranopia lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum. Deuteranopia is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how people with deuteranopia see the red & green buttons:

Image of how people with deuteranopia view red and green buttons

Tritanopia: People with color blindness involving the inactivation of the short-wavelength sensitive cone system have tritanopia, a very rare blue-yellow color blindness. Tritanopia is a very rare form of color blindness, occurring in less than 0.003% of males and females.

Here’s how people with tritanopia see the red & green buttons:

Image that depicts how a person with tritanopia views red and green buttons on a Web page

Accessible Best Practice: Don’t use color as part of your instructional content. It will confuse and frustrate your site’s color blind visitors and is considered inaccessible according to WCAG 2.0 Guidelines.

WCAG 2.0 Guidelines covered in this post:

Level A Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Level AAA Guideline 3.3.5 Help: Provide detailed help and instructions.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===