Basic Web Accessibility
One of the great things about the World Wide Web is that it has the potential to make information and applications easily available to anyone, anytime, anywhere. Unfortunately, many web sites are designed in ways that are not accessible to all people. Here are a few common web accessibility problems, and how to check for them:
Accessibility Without a Mouse
Who is affected? People who are physically unable to use a mouse, or who are using non-mouse technologies such as speech recognition or touch screens.
How to check: Try to navigating through the web page without using a mouse. Use the tab key instead. Can you access all features? Can you tell where you are on the page?
Missing alternate text on images
Who is affected? People who are unable to see images, including people who are blind and people who have images turned off in their web browser.
How to check:
Using Firefox with Firebug installed, right click on any image and select "Inspect Element". This will show you the source code for the image. If the image was created with an HTML <img> element, you will see something like this:
If an image is purely decorative, the code should have alt="". Bottom line: All images should have alternate text in order to be accessible.
Bad or Missing HTML Headings
Who is affected? Screen reader users, among others. The HTML headings on a web page (<h1> through <h6>) should form an outline of the page content. The main heading should be marked up with <h1>, and second-level subheadings should all be marked up with <h2>. If there are sub-sub-headings, these should be marked up with <h3>, and so on.
How to check: Visually look over the web page, and identify what appear to be the various headings on the page. Consider what the outline of this page would look like. Then, using Firebug, point to what you think is a main heading, right click on it, and select "Inspect Element" Is the element you clicked on marked up as an HTML heading? If so, is it the appropriate level of heading?
Poor Color Contrast
Who is affected? People with visual impairments, color blindness, and others. If the foreground color (usually text) does not have enough contrast from the background color, it can be very difficult for some users to read.
How to assess: Examine the site, paying careful attention to the color choices for foreground and background. If the foreground is light, is the background dark? Conversely, if the foreground is dark, is the background light?
Videos without Captions
Who is affected? People who are unable to hear the audio.
How to assess: If there is video on the page, select the Play button the view it. If there is spoken audio in the video, are captions visible? If not, is there a button on the video player that allows you to turn captions on?
Invalid Code
Who is affected? Everyone. Using valid code (HTML, CSS, or Javascript) is an essential first step for making web pages that work for everyone, regardless of which browser or device they're using.
How to assess: Test the page in the W3C HTML Validator and W3C CSS Validator.
Accessibility Tools
Most of the accessibility problems described above can also be checked with web accessibility toolbars or web accessibility checkers. There's a list of a few of these tools on the Resources for Learning More About Web Design page.