What is Web Accessibility?
People who use the web have a growing variety of characteristics. As creators of web content, we can not assume that all our users are accessing our content using the same web browser or operating system, nor can we assume they are using a traditional monitor, keyboard, or mouse. Consider these user characteristics:
Unable to see
Has low vision
Has a physical disability
Unable to hear
Using a mobile device
Tips to Make Your Webpages Accessible
Use Alternative Text (ALT tag) Descriptions for Images and Graphics
The ALT tag is invaluable in describing the image or graphic to a text-based user.
Don’t Rely on Color for Emphasis
Visitors who are blind, low-vision or color-blind will not be able to differentiate between the content you are trying to emphasize or highlight. Visitors with low vision may also find it difficult or impossible to read content if the color doesn’t have sufficient contrast with the background.
Avoid “Click Here” Links with Vague Names
Make your link text descriptive but brief and meaningful. For example, use a phrase like “Read the report on climate change,” linking “report on climate change” rather than using “click here.” WebAIM offers helpful advice about hypertext links.
Avoid Multiple Links in a Line
Text browsers read one line at a time and may have trouble distinguishing between consecutive links on one line.
Don’t Use Images or PDFs to Communicate Information
For maximum effectiveness and ease of use, website content should be presented as text; PDFs should be used only when the document is intended to be downloaded and printed (for example, a form that requires signatures). Images must include ALT tags to describe the content to a text-based user.
Label Forms Properly
Create a consistent, predictable format for accessible web forms. The American Foundation for the Blind offers advice on designing accessible forms.
Supply Captions and a Transcript
Offer captions and either a full transcript or a text description for all video files, and a transcript for audio files.
Use Tables Only When Necessary
Include tables when you genuinely need to present tabular data. Use header cells for the top row and left column. Be sure that textual information is displayed in a linear form across a whole line, typically on one line only. Word wrapping in tables creates problems for browsers and screen readers.
Overly busy pages are difficult for anyone to read, but they can be especially confusing to someone using a screen reader.
Keep Formatting Simple
Use headings, short paragraphs and bulleted lists. Aim for brief, clear paragraphs that are organized hierarchically.
Checking a Website for Accessibility
Validate your HTML. If HTML is used incorrectly, assistive technology can have problems interpreting the page content, which can result in access problems for users. Use an HTML validator to check your code.
Test with a keyboard. Set your mouse aside and use the tab key to navigate through your web pages. You should be able to access all interactive features (e.g., menus, links, form fields, buttons, controls) and operate them by pressing Enter, space, arrow keys or other intuitive keystrokes. If you are unable to access some of your site’s features, your site is likely to have accessibility problems.
Use an accessibility checker.WebAIM’s WAVE accessibility tool is a free, easy-to-use resource for evaluating the accessibility of web pages. Simply enter the web address of your page and submit the form. WAVE will present your page with indicators of accessibility features and potential problems. Full instructions are available on the site.
Check the Color Contrast. The Paciello Color Contrast Analyser provides a pass/fail assessment against WCAG 2.0 color-contrast success criteria. It can also provides a simulation of certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision.
Another color contrast analyzer is the web-based contrast checker from WebAIM. This tool requires that you know the 6-digit hexadecimal codes that correspond to the colors on your web page.
Use Accessibility Bookmarklets in Browser. Paul Adam Bookmarklets for accessibility testing highlight roles, states and properties of accessibility elements on the page. They are accessible to screen reader users and work on any browser including mobile phones.
Test with users. You can test your site by simply recruiting and observing users as they interact with your site. To test for accessibility, recruit users who have a variety of skill levels and characteristics, such as those listed below under the heading What Is Accessibility?
Accessibility Guidelines from WebAIM
A nonprofit organization based at Utah State University, WebAIM provides comprehensive web accessibility guidelines to empower organizations to make their own content accessible to people with disabilities.
Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the internet.
NVDA (PC) / Apple Voiceover (Mac)
NVDA (NonVisual Desktop Access) is a free screen reader, which enables people with a visual impairment to use computers. It reads the text on the screen in a computerized voice. Macintosh users can use Apple’s built-in Voiceover tool to achieve the same results.