First of all, what exactly is “accessibility” in terms of website design? Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When a site is correctly designed and coded, all users have equal access to the site’s information and functionality. Designing sites for accessibility takes a little more planning and effort. But is it really important? According to Alan Brightman, senior policy director of special communities at Yahoo, there are approximately 60 million special needs users in the U.S. 60 million people out there need to use your site, so it is definitely in your best interest to be sure is accessible.
Let’s take a look at a few simple steps you can take to make your site more accessible.
Use Web Standards
You can never go wrong coding to web standards. Validating your markup is a good start to helping text-to-audio readers and other tools perform properly on your site.
Use the alt attribute – Everywhere
Most designers know that the alt attribute is required for all images on your site. For example:
1 | <img class="myBlueBorder" src="images/maui.jpg" alt="The view from our office window" width="300" height="211" /> |
Be sure that your alt tag is highly descriptive of the visual content, and don’t “skip” images that you may feel are unimportant. The reader needs to know why the image is there.
Use Summary attributes and Caption Tags on Tables
The summary attribute of the table tag works like the alt attribute of an image tag – it describes the table’s content. The caption tag is also important, as is using table headers. Here’s an example of an accessible table:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <table border="0" summary="Expense Report"><caption> Expense Report </caption> <tbody> <tr> <td></td> <!--empty cell in left hand corner--> <th scope="col">Hotel</th> <th scope="col">Transportation</th> <th scope="col">Meals</th> </tr> <tr> <th scope="row">San Francisco</th> <td>$250</td> <td>$399</td> <td>$123</td> </tr> <tr> <th scope="row">New York</th> <td>$300</td> <td>$424</td> <td>$290</td> </tr> <tr> <th scope="row">Chicago</th> <td>$130</td> <td>$190</td> <td>$75</td> </tr> </tbody></table> |
By using the summary attribute, the caption tag and table headers a text-to-speech reader can give the user a better idea of the tabular data you are trying to display.
Obviously, accessibility issues are one reason why it’s not a good idea to use tables when designing your layout. Tables are made to display tabular data, and CSS is best suited for layout.
Use Keyboard Navigation Techniques
Not everyone can use a mouse, and audio command tools simulate keyboard input. For this reason consider making your site navigable with a keyboard alone. There are several ways to accomplish this task, including using JavaScript, the accesskey attribute, and in some cases specifying the tab order. If users can get around your site without a mouse, you’ve come a long way toward designing an accessible website.
Use an Accessibility Evaluation Tool
There are many great tools on the web you can use to check the accessibility of your site. A Â bunch are listed here but our current favorite is the one provided by the good folks over at webAIM.org . This tool shows parts of your page that might be difficult for disabled users to view, and does so in a way that is clear and concise.
No matter which tool you decide to use, checking your page for accessibility will allow all your hard work to be seen by a wider and appreciative audience.

