Blog

How to Create Accessible CAPTCHAS

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

===

17 Website Adjustments You Can Make Today for Better Accessibility

Hand writing the word AccessibilityUntil now, website accessibility hasn’t been a big concern for most business owners and marketers.

Owners of brick and mortar stores, restaurants and office buildings are required by law to accommodate the needs of customers with disabilities via wheelchair ramps, braille product signage, accessible restrooms, and more.

As a website owner, you will soon be required to have a website that is accessible as well.

Legislative changes are on the way.

By 2018, The U.S. Department of Justice (DOJ) will roll out official compliance guidelines concerning online accessibility for the disabled as part of the Americans with Disabilities Act (ADA).

DOJ will soon be expecting all websites to accommodate people with disabilities.

Whether DOJ will implement web accessibility standards is not a matter of “if”, but “when.”

However, waiting until it’s the law may make your company legally vulnerable in the meantime if you aren’t in compliance, as organizations such as Peapod, Target, Reebok, and the NBA have already found out.

In order to assure that websites and web applications are accessible to and usable by everyone, Web designers and developers must follow the Web Content Accessibility Guidelines (WCAG 2.1) published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.

WCAG 2.1 Guidelines originated in 2008, and cover a wide range of recommendations for making web content more accessible. It covers an expanded range of disabilities: blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, and photo sensitivity.

What to Do

Business Owners of Websites: You need to have your current website tested for accessibility so you can discover the baseline of issues that need to be fixed so your website content will be accessible to all.

Website Developers/Designers: You need to learn and integrate the WCAG 2.1 Guidelines A, AA & AAA into every website you build from now on. You may also be called on to fix the websites you have already completed.

Here are 17 adjustments you can make to your website now to make it more accessible:

Images

1. IMG ALT text must not be the same as the image file name.

The ALT text should summarize the purpose of an image. The source filename of the image should not be included because generally it is just not useful to the visually-impaired user.

Black Labrador Retriever puppy named Gracie

FAIL: <img src=”gracie.jpg” alt=”gracie.jpg” />

SOLUTION: Change the ALT text to a description of the image.

PASS: <img src=”gracie.jpg” alt=”Black Labrador Retriever puppy named Gracie” />

===

2. IMG ALT text with acronyms can cause problems when read by screenreaders.

FAIL: <img src=”mit-it-logo.jpg” alt=”ITS at MIT” />
(read by a screen reader as “It’s at Mit”).

SOLUTION: Include spaces in between acronym letters in the IMG ALT attribute

PASS: <img src=”mit-it-logo.jpg” alt=”I T S at M I T” />
(read by a screen reader as “ITS at MIT”).

Links

3. Website links that are not underlined can cause problems for some users.

FAIL: Removing the underline from links makes it difficult for color-blind users to see them.

SOLUTION: Remove the text-decoration:none property from your link styles, or introduce the link underline style on both mouse hover and keyboard focus actions.

PASS:

CSS: Here is the basic declaration to add to your CSS stylesheet to activate all link underlines throughout your website:

a {text-decoration:underline;}

CSS: Here is the basic declaration to add to your CSS stylesheet to underline the link when a user hovers over a link with a mouse or activates keyboard focus when “tabbing” to the link:

a:hover, a:focus {text-decoration:underline;}

===

4. Links that use general text like can cause problems for folks using screen readers.

FAIL: <a href=”instructions.html”>Click here</a>

When a screen reader comes across a link that reads as “click here” or “learn more,” the visually-impaired person listening to the content may not have sufficient information to determine if the link is worth following or not.

SOLUTION: Use an “action” phrase that alerts the user what to expect if he/she follows the link.

<a href=”instructions.html”>How to use the new accessible web tool</a>.

===

5. Provide a Skip Navigation link that allows keyboard and screen reader users to skip over groups of links.

FAIL: The inability to skip repetitive links can be a problem for those with mobility disabilities who use the keyboard to navigate instead of a mouse.

SOLUTION: Add a simple hyperlink at the very beginning of your HTML page:

<a class=”skiptomain” href=”#main-content”>Skip to main content</a>

To prevent sighted users from seeing the Skip to main content link at the top of the page, add this declaration to your CSS file:

.skiptomain {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}
a.skiptomain:active,
a.skiptomain:focus,
a.skiptomain:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}

This will position the Skip to main content link 1000px off the screen for sighted users, without hiding it from screen readers. When you hit the tab key the first time, the link will receive focus and be visible at the top left corner of the page.

Color

6. Don’t Use Color As Part of Your Instructional Content

Image of a red button and a green button

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

One color blindness condition is called 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:

protanopia-color-example

SOLUTION: Change the instruction so it does not make use of color.

PASS:

Press the button on the left for more information

Learn about the different types of color blindness affecting some users.

===

7. Ensure that foreground and background colors have enough contrast.

Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.

FAIL:

color-contrast

SOLUTION: Use the WebAIM Color Contrast Checker to ensure the colors you are using are accessible.

PASS:
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text

CSS

8. Justified text causes “rivers” that make text difficult for dyslexics to read

FAIL:

River Effect in Justified Text

IMAGE SOURCE

SOLUTION: Align all text to the left

===

9. Use relative rather than absolute units in CSS property values.

Absolute units are CM, MM, IN, PC and PT. When used with fonts PX is also considered an absolute unit, because it isn’t relative the user’s preferred font size. Low-vision users, and a lot of people over 50, increase the browser default font size to make text easier to read. Absolute units ignore this user choice.

FAIL:
p {font-size: 16px;}

SOLUTION:
Relative units like EM and percentages re-size according to the screen size and/or user’s preferred font size, and work on a large range of devices.

PASS:
p {font-size: 1.000em;}

Convert pixels to EMs with online converter at PXtoEM.com

===

10. Use semantic markup like STRONG instead of using the CSS font-weight property.

FAIL:
<span style=”font-weight: bold;”>This is text</span>

SOLUTION: Use the STRONG element instead of the SPAN element for bold text.

PASS:
<strong>This is text</strong>

===

11. Use italics sparingly.

FAIL: People who are dyslexic have a difficult time reading italicized characters.

SOLUTION: Use the STRONG element for emphasis instead .

PASS:
<strong>This is text</strong>

===

Data Tables

12. Identify row and column headers in data tables using TH elements.
Data tables allow screen reader users to understand column and row relationships.

FAIL: Without TH, screen readers apply heuristics to decide whether a table is a layout table or data table. These heuristics vary greatly between screen readers, and are affected by browser being used, window size, and font size (so the outcome is very unpredictable without TH).

SOLUTION: If a data table has headers marked up using TD, then change these to TH. If a data table has no headers, add TH elements describing each row and/or column. What does scope attribute do? This attribute specifies the set of data cells for which the current header cell provides header information.

PASS:

employee-table

<table class=” alignleft”>
<tbody>
<tr>
<th scope=”col”>Employee Name</th>
<th scope=”col”>Employee Code</th>
<th scope=”col”>Project Code</th>
<th scope=”col”>Employee Designation</th>
</tr>
<tr>
<td>Mary Smith</td>
<td>31454</td>
<td>453781</td>
<td>Web Developer</td>
</tr>
<tr>
<td>Bob Jones</td>
<td>76901</td>
<td>454489</td>
<td>Copywriter</td>
</tr>
</tbody>
</table>

===

Lists

13. Mark up lists and list items properly.

FAIL: Avoid using images as bullets in lists in the HTML file.

SOLUTION: Remove the image bullets from HTML and use CSS to generate bullets

PASS:

list-style-image:url(‘images/bullet.png’);

===

Forms

14. Avoid using select menus that allow the user to choose multiple items.

FAIL: Not all browsers provide intuitive keyboard navigation for multiple select menus.

SOLUTION: Long select menus with more than 11 options should be coded with option groups and labels.

PASS:

<label for=”favfood”>Choose your favorite food?</label>
<select name=”favfood”><optgroup label=”Fruit”>
<option value=”1″>Apples</option>
<option value=”2″>Oranges</option>
<option value=”3″>Pears</option>
<option value=”4″>Bananas</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Bread”>
<option value=”5″>Sourdough</option>
<option value=”6″>Wheat</option>
<option value=”7″>Rye</option>
<option value=”8″>White</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Entree”>
<option value=”9″>Beef</option>
<option value=”10″>Chicken</option>
<option value=”11″>Fish</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Cheese”>
<option value=”12″>American</option>
<option value=”13″>Swiss</option></optgroup>
</select>

===

15. Don’t use a select list if it contains less than 5 options

SOLUTION: Select lists with less than 5 options should be coded as radio buttons.

PASS:

Radio button choices for a purchase

<fieldset>
<legend>Choose a purchase method:</legend>
<input id=”creditcard” name=”purchase” type=”radio” value=”creditcard” />
<label for=”creditcard”>Credit Card</label>
<input id=”check” name=”purchase” type=”radio” value=”check” />
<label for=”check”>Check</label>
<input id=”cash” name=”purchase” type=”radio” value=”cash” />
<label for=”cash”>Cash</label>
</fieldset>

===

Content Design

16. Long paragraphs of text are difficult for some users with disabilities to read and comprehend

SOLUTION: Keep your sentence length down to an average of 15 to 20 words. Don’t start a new sentence at the end of a line, as that makes it more difficult to follow.

===

Keyboard-only Access

17. Test to be sure all your Web content is accessible using only the keyboard.

FAIL: Users with visual disabilities and limited movement cannot use a mouse to navigate a Web page, as this requires hand and eye coordination.

SOLUTION: Be sure your website is coded so that users can navigate all content on a page via keyboard “tabbing”.

===

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

===

DOJ: How Accessible Technical Standards Delay is Affecting U.S. Businesses

In his excellent article DOJ Refreshes Its Efforts to Promulgate Title II Website Accessibility Regulations and Other Accessible Technology Updates – What Does It All Suggest for Businesses?, Joshua A. Stein reports that the real estate industry is fighting back against lawsuits stemming from DOJ’s delay in finalizing website accessibility regulations:

“In the face of mounting frustration stemming from DOJ’s ongoing delays in promulgating website accessibility regulations while plaintiff’s counsel are allowed to continue to aggressively pursue claims some in the real estate industry recently decided to take action. Citing ‘the growing confusion around web site accessibility,’ on April 29, 2016, the National Association of Realtors wrote a letter to DOJ’s Civil Rights Division imploring DOJ to take actions to regulate the issue of website accessibility for Title III entities as soon as possible. The letter highlighted the unfortunate dynamic that currently exists as DOJ and plaintiffs’ counsel seek to enforce broad overarching civil rights provisions in the absence of any uniform federal regulations.”

Read the rest of the article.

===

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

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

===