Skip Navigation Accessibility Introduction What is Accessibility? Why is Accessibility Important? W3 Consortium Guidelines Section 508 Standards ADA and Disabilities Guidelines Accessibility Audit References and Resources Accessible Sites Usability Introduction InfoQuest!

The following are examples of website pages that meet (or almost meet) web accessibility guidelines, either W3C Web Content Accessibility Guidelines or U.S. Section 508 Standards.

I double-checked the accessibility of these sites by viewing them in a number of web browsers, including IE5.5, NS6.1, NS4.78 with image, stylesheets and scripts turned off, and Lynx. Unfortunately, most of the pages I tested for inclusion in this document did not meet Bobby's standards for using their logo, although they claimed it. The top three errors I found were:

1. Inappropriate use of the alt attribute in providing a text equivalent for every non-text element.
   • no alt attribute for some images (presumably added after the page was checked with Bobby)
   • not using empty alt attributes for images conveying no meaning, such as use of the word spacer as an alt attribute for a transparent image.
   • using an alt attribute that doesn't represent the equivalent of the image itself. For example, one page I reviewed had several images showing different tartan plaids, and the alt attribute for each image was Tartan Sample. They didn't give the name of the plaid, describe its design, or its colors.
2. Use of a separate accessible or text page rather than making the original page accessible. (Section 508(k) and WCAG 11.4 (Priority 1) say that developers should make a separate page only as a last resort, when it isn't possible to make the original page compliant.) Many of the pages I reviewed could have been made compliant without much effort.
3. Improper placement of labels for forms controls, such as having a Search box before the label "Search", leaving users wondering what is supposed to go in the box.

WCAG Priority One and Section 508 Compliant Web Pages

The following are the best of the many pages I reveiwed, in no particular order. Overall, they meet accessibility guidelines, but I've mentioned where I found places for improvement.

NASA Research Park and the Environment
The NASA Research Park site uses JavaScript and CSS, primarily for rollovers in left navigation bar. It also has a center navigation bar that includes an alt attribute to explain the background image within the box, as well as the image links. Despite this complexity, the page is accessible.
http://researchpark.arc.nasa.gov/Environment/environment.html

Texas A&M University Laboratory for Applied Biotelemetry and Biotechnology
This site claims accessibility status only for their "non-framed& site, which is plain text with no graphics, and they state explicitly that the nested version of their framed site makes the alternate version necessary. Despite this, the framed version of the site is quite readable without images turned on. Viewed in Lynx, you do need to go to the Sitemap page that explains the layout of the site and guides you through the site in a frameless manner.
http://www.tamug.tamu.edu/labb/

Enabled Online.com: Connecting People with Disabilities
This online magazine about people with disabilities offers both graphic and text formats. The graphic version of the site uses server-side image maps and JavaScript. What is interesting is that the Graphic version, at least of the homepage, would be accessible if they just switched to client-size image maps and used alternative text descriptions for the links in the cover photo and logo. Even in the graphic version there are three sets of links to the inner part of the site: a left navigation bar, a bottom navigation bar, and the navigation links on the cover image map that all go the same place. The difference lies in the interior pages, where each section also has a graphic image map with the current issue's articles, that aren't reflected in the other two sets of navigation links. This magazine could do away with the alternate version by changing to a client-side image map and/or putting the current issue's stories in place of one of the two sets of text navigation links on each page.
http://www.enabledonline.com/

It's The Thought: Personal and Business Gift Ideas
This site uses both CSS and JavaScript rollovers. Overall, it's an accessible site, but has a few problems. In the subscribe page for the newsletter, the label is after the entry box, violating Section 508(n) and WCAG 10.2, 12.4, and 10.4 (Priority 2).
http://www.itsthethought.com/

Die internationale Höhnerfanseite "Wo mir sin is Kölle"
This is a fan site for a Dutch musical group that was suggested as a good example of a creative accessible page by a poster on the WebAim accessibility discussion list. As far as I can tell, it is accessible, although since I don't read German it is difficult to know for sure.
http://www.hoehnermusikfan.net

College of Veterinary Medicine & Biomedical Sciences, Colorado State University
This is another site that was recommended in the WebAim discussion on creative accessible site. Because of the use of JavaScripted popup submenus, the site uses a text-only alternative for the home page. Overall, however, the rest of the site appears to be accessible. Those who don't use JavaScript are missing are the shortcuts to the interior sections on the home page.
http://www.cvmbs.colostate.edu

State of California Portal
The State of California portal uses a standard template that operates within the WCAG. The home page is almost accessible. The Search form fails WCAG 10.2 that says that form labels need to be correctly positioned. In this case the label for the Search box appears after the box, so that a person has no idea what needs to be filled in.
http://my.ca.gov/state/portal/myca_homepage.jsp

Keep Austin Beautiful
This site won first place in the "Stock Car" category of the Austin Accessibility Internet Rally. From a quick look, the site appears accessible.
http://www.keepaustinbeautiful.org/

Genasys: Generating Assistive Technology Systematically
Viewed with all enhancement, this page has a lot of decorative touches, inc and yet remains quite accessible. It is an excellent example of how a site can use drop down menus and fancy graphic effects and still meet accessibility guidelines.
http://www.genasys.usm.maine.edu/

Graduate Link
This is an employment site in the UK. It appears to be generally accessible, although it lacks skip navigation links that would make it much easier to get directly to the job information on the job description pages.
http://www.graduatelink.com/jobs/

Accessibility Introduction What is Accessibility? Why is Accessibility Important? W3 Consortium Guidelines Section 508 Standards ADA and Disabilities Guidelines Accessibility Audit References and Resources Accessible Sites Usability Introduction InfoQuest!

Copyright 2000-2002 InfoQuest! Information Services
Last updated: March 12, 2002
Please send any comments to tbchad@tbchad.com or 1-503-228-4023.
Terry Brainerd Chadwick
InfoQuest! Information Services
2324 NW Johnson St., Ste.4
Portland, OR 97210-5221
URL: http://www.tbchad.com/Usability/accessible_sites.html