aware.hwg.org: accessible web authoring resources and education center
Current Location: HTML Writers Guild · AWARE · Tips · Icons

Web Accessibility Icons and Graphics

Why Use An Accessibility Icon?

Some web sites, such as the AWARE Center home page itself, use a graphical icon to demonstrate that the site is concerned about accessibility and strives to be universally accessible.

Why? What's the value?

One somewhat amusing reason for such icon use is that people, in general, just like having stuff on their web pages. The HTML Writers Guild's own logo program is actually the Guild's most popular activity, with the HWG graphic on more than 25,000 web pages! Why? Because people just like icons, that's why, near as I can figure.

However, there are other good reasons for displaying accessibility logos, and one of the best is simple advertising. By displaying a logo, you are advertising not yourself, but the very concept of web accessibility. You are spreading the accessible web authoring meme. Having a clickable link will bring users from your site to, hopefully, a site that provides them with more information about accessibility and the importance of accessible web design. In effect, your page itself is an ad for accessibility in web authoring, and that is a Good Thing.

Also, it indicates to users who "need accessibility" -- in other words, those who have been shut out from other sites due to poor design standards and procedures -- that your site is there for them. (Now, granted, at first glance it may seem a little silly to provide a graphical icon welcoming some users who may be blind, but remember, that's what ALT text is for, to serve as a "text icon" for your graphic.)

What follows are a number of images that can be used on pages to display accessibility-related interest, and instructions on how to use them.

The NCAM Web Access Symbol

Web Access Symbol (for people with disabilities)

The National Center for Accessible Media at the Boston public television station WGBH has created the logo above for use on websites to indicate an interest in accessible web authoring. Alternate sizes and versions of the symbol are available from the WGBH website.

To use this image on your site, simply include it your pages; the ALT text must be "Web Access Symbol (for people with disabilities)" and you should try to conform with the WAI Web Content Accessibility Guidelines. The WGBH site says the following about the use of the logo:

There isn't any way to guarantee that a site which uses the symbol will be 100% accessible, or was even designed following the guidelines. However, in the spirit of the Internet, we're leaving it up to Web surfers to let the webmasters know when a site is or is not accessible, and to offer suggestions for greater accessibility. Those who use the symbol should do so at their own discretion, understanding the goals of the growing group of people dedicated to making the Web useful for ALL.

The Bobby Approved Logo

Bobby Approved!

The Bobby Approved logo can be used on any site which successfully passes the Bobby service provided by CAST. To be eligible, all of the pages on your web site must receive a Bobby Approved rating. You must link the image to http://www.cast.org/bobby/.

To test your pages, download the Bobby evaluator and run it on your site, or go to the online version of Bobby. You can use this form below to check one page, if you like:


W3C's Valid HTML 4.0 Icon

Valid HTML 4.0!

Strictly speaking, the Valid HTML graphic is not an accessibility icon, but a validation icon. However, validation is the first step towards accessibility -- producing a valid page means, at least, that you have ALT text on your images and your HTML is laid out correctly. Thus, I have included the icon from the W3C HTML Validator in this list of accessibility icons.

To use the Valid HTML 4.0 graphic, you must first, of course, have a page that is valid HTML. One very important thing to do is to make sure you have specified the correct DTD for your page! You will want to choose HTML 4.0 if you use no presentational elements at all (and probably use CSS instead); if you are using frames, you want the HTML 4.0 Frameset version. Most of us will probably still be using HTML 4.0 Transitional, however.

To check your page for HTML 4.0 compliance, go to http://validator.w3.org/ or use the form provided below:

The Any Browser Campaign Graphics

Best Viewed With Any Browser

The Any Browser Campaign is a grass-roots effort to promote a web that is not designed for one specific browser. I'm sure we've all seen those pages that say "Best Viewed With ..."; here's an alternative that says "Best Viewed With ANY BROWSER".

To use this logo, you must link to http://www.anybrowser.org/campaign/. A lot of other graphics from the Any Browser Campaign are also available from their website, if you don't like this one in particular.

Back to Tips and Techniques...