Some simple techniques in making your website accessible
by Andrew Pae, Technical Coordinator at the ADAPTS Office
Web accessibility has been the latest buzz around campus lately. The following information is provided so that those interested in web accessibility can receive a brief overview of some of the simple techniques in making a website accessible. These suggestions will not force you to make a complete overhaul of your existing website. In many instances, there may be a few areas in your website that need adjusting in order to be compliant.
Images & animations
Use the "alt" attribute to give a description of the image or animationDON'T
<img src="buzz.gif">
DO
<img src="buzz.gif" alt="buzz logo">
Graphs & charts
Summarize graphs & charts so that the article could stand alone without their presence. In other words, make sure they are merely supplementing the article. In addition, you may wish to use the <alt> attribute within the image to provide a detailed explanation of the graphDON'T
<img src="graph1.jpg">
DO
<img src="graph1.jpg" alt="A pie chart showing the 1999 to
2000 budget breakdown with an emphasis on technology since it
makes up 44% of the budget.">
Image maps
Provide alternative text using the "alt" attribute w/in each image map hot spot (the area the user clicks) so that if a person turned off the ability to have graphics appear on the browser at least the alternative text would be available. NOTE: This feature does not work with certain browsers.DON'T
<img src="imagemap.jpg" usemap="#immap" alt="Main Image Map">
<map name="immap">
<area coords="5,5,145,35" shape="rect" href=syllabus.htm>
<area coords="155,5,295,35" shape="rect" href=test_schedule.htm>
</map>
DO
<img src="imagemap.jpg" usemap="#immap" alt="Main Image Map">
<map name="immap">
<area coords="5,5,145,35" shape="rect" href=syllabus.htm alt="syllabus">
<area coords="155,5,295,35" shape = "rect" href=test_schedule.htm alt="test schedule">
</map>
Tables
Provide headers using the "th" attribute so that the user can understand what the table is all about. By allowing a user with a visual-impairment hear the table headers from their screen reader, their time is not spent delving into the data entries and trying to figure out what this table is trying to present to the user.DON'T
<table>
<tr>
<td> Jayne Parks</td>
<td> 404-894-2310 </td>
</tr>
</table>
| Jayne Parks | 404-894-2310 |
DO
<table>
<tr>
<th> Faculty </th>
<th> Phone Number </th>
</tr>
<tr>
<td> Jayne Parks</td>
<td> 404-894-2310 </td>
</tr>
</table>
| Faculty | Phone Number |
|---|---|
| Jayne Parks | 404-894-2310 |
Hypertext links
Use text that makes sense when a screen reader reads aloud to a visually impaired student. For example, use a phrase like "this weeks homework assignment is found in thejanuary3.htm file, not "for this weeks homework assignment, click here."Bold face
Try to use the "<em>" tag versus the "<b>" tag. The "<em>" tag (emphasis) will allow the screen reader's tone to change and, therefore, add emphasis to what is on the screen. Whereas a statement that has words or phrases in bold, will be read with the same tone by the screen reader.Multimedia (video, applets, plug-ins)
Always provide alternative means. For example, if you're streaming video, which has dialogue or sound, include closed-captioning within the video or provide a text version of the dialogue. This will even help your non-hearing impaired users, since in many instances either because of poor network speed or poor recording, the dialogue between people isn't that clear.In regards to applets and plug-ins, try to find alternative means of presenting the website without having to solely rely on the applet or plug-in to navigate through the site. For instance, if you choose to use an applet that allows the link to light up when the mouse is over it, come up with a text-based link right next to the applet that a user with a visual-impairment can utilize through a screen reader.
In addition, for those who are java savvy, check out IBM's web accessibility page, http://www-3.ibm.com/able/javajfc.html. Here you will find information on the Java Accessibility API, which will give you the tools and resources to present your java applets in such a manner that both the original content and the alternative one is embedded in one applet.
A Last Resort
Some may choose to create an alternative website that is completely text-based. Here are my three reasons to avoid this.It's the easy way out. As a web developer, one should seek such a challenge such as web accessibility. Web accessibility guidelines do not inhibit creativity, they encourage new ways of presenting the material.
It's second rate for the user. No one wants the "alternative" website. This gives an impression to the disability community that they are grouped as "others." We don't need to pit an abled website with a disabled one.
It'll hurt you in the long run. By creating an alternative website, the organization will be responsible for maintaining two websites, which creates a lot of extra work. In addition, there will be a greater tendency to update the non-accessible website more frequently than the accessible one. If this occurs, you are back where you started with an inaccessible website.
So, is my website now accessible?
One simple way to check and see if your website meets the accessibility guidelines is to use the Bobby program. This is a java-based program found at http://www.cast.org/bobby that will search through your entire website and find areas that may fail accessibility guidelines. Though I will warn you, Bobby is not the "end all and be all" for accessibility. Bobby may analyze the coding and readability of the website, but it cannot analyze the content of the page. For instance, remember the advice on hypertext links. Bobby would see "click here" as acceptable wording for a link; however, such a phrase is not descriptive enough for someone with a visual impairment. Nonetheless, Bobby is a good starting point on your road to web accessibility.For more information on web accessibility, please browse through some of these links.
The Accessibility of Georgia Tech's Web Presence
http://www.gatech.edu/accessibility/
AWARE: Accessible Web Authoring Resources & Education
http://www.awarecenter.org/
Bobby Version 3.2
http://www.cast.org/bobby/
CSS2 Tutorial
http://www.dynamicdeezign.com/css/introduction.html
IBM Accessibility Center
http://www-3.ibm.com/able/
IBM: Java Accessibility
http://www-3.ibm.com/able/accessjava.html
Is YOUR Website Accessible?
http://www.janejarrow.com/tv_station/webaccess/
WAI (Website Accessibility Initiative)
http://www.w3.org/WAI/