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.
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
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:
SOLUTION: Change the instruction so it does not make use of color.
PASS:
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:
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:
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:
<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:
<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: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines.
Section 508: 59 tests covering 15 guidelines.
Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos
===
