Nsaa – Hand-woven Basket; Click for meaning Web Accessibility
Additional Notes

Below are additional notes and links relating to Web page design for accessibility and for products and services to assist users. Assistive technology is becoming more available and great progress has been made. Limitations of budget, and facilities usually create problems for implementation but researching the situations and making objective evaluation of what must be done will make much of this more possible.


ALT Text and LONGDESC Text

"Several non-textual elements (IMG, AREA, APPLET, and INPUT) require authors to specify alternate text to serve as content when the element cannot be rendered normally."

Think of the text and the image as alternative representations for content.

When creating ALT text for an image, first determine what the image is meant to do on the page (how does it enhance the content). It might be to show an example or an event that is described in the text. It may show a division between text blocks or do other things. Once you have determined the reason for the image, it will be easy to determine what text to put into the ALT tagged field.

View examples of failures to add the appropriate ALT text (called howlers).

You should also add ALT attributes for areas on image maps.

Also, consider using the <longdesc> tag to add more complex descriptions for images and related files.

Color display as Seen By a Color Blind User

For a good, concise explanation of using color, see: Effective color contrast for people with partial sight, and its companion article on Making Text Legible.

The two illustrations show the difference between what the page designer did and what a person with a disability sees on the screen. In the example, the image on the left has RED, GREEN, and YELLOW but the colors used have virtually the same VALUE (they are about the same brightness). The image on the right shows that someone who is color blind, may not see the intended effect. Keep this in mind when using color tints for backgrounds.
What the designer intended to show
What the color-blind user sees
What the designer intended to show
What the color-blind user sees
Contrast of page elements should be high enough to be read or printed without difficulty by any user:

View these descriptive pages showing visual problems:

Go to Top of Page

Tips for HTML Coding

When creating Web pages, use the application's "accessibility" settings to assist you in writing the code. For example, in Dreamweaver, do the following:

  • Pull down the EDIT menu

Dreamweaver accessibility preferences window

This shows the settings in use. You may find more about settings and also about making pages more accessible using the Dreamweaver Help (F1 key) database and asking for "Accessibility" from the Index (see left illustration below):

Dreamweaver Accessibility Help screenDreamweaver Accessibility Help screen sample hit


You can view instructions and links to additional websites that will allow you to make your pages accessible-compliant as you create them. The example on the right (above) shows how you can have Dreamweaver supply an Accessibility report for your design.

Go to Top of Page

Quick Tips To Make Accessible Websites

Some of these are from the WAI Quick Tips page (with additions)

  • Content of web pages is the most important element. Form should always support content and do so without predominating.
  • Use all page elements sparingly. Avoid adding images, fancy type faces, animations, color, and "flashy" effects just because you can.
  • Images & animations: Use the <alt> attribute to describe the function of each visual. For longer descriptions use <longdesc>
  • Image maps. Use the client-side map and text for hotspots. Add <alt> attributes for individual areas.
  • Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
  • Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  • Graphs & charts. Summarize or use the <longdesc> attribute.
  • Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
  • Frames. Use the <noframes> element and meaningful titles.
  • Tables. Make line-by-line reading sensible. Summarize.
  • Check your work. Validate and also manually check your page (i.e., tab through links, use page without mouse, etc.). Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG.

See also the Ten Commandments of HTML. From the How to Create an Accessible Website (University of Toronto).

Quick links to:

  • Fonts and type sizes: see: Font size. See also: Text.
  • Color and Contrast play an important part in making content visible too all. Color should be used sparingly, and mainly to express content concepts, rather than form (visual) aspects. In other words, visual design should be subordinate to content, and should enhance content.
  • Layout and structure
  • Images
  • Multimedia
  • Navigation
  • Scripts and forms
  • Linearisation
  • Accessibility and usability. Designers should take manual steps to ensure that their site is both accessible and usable.
  • Tables used for layout – layout tables can be used as long as the correct structural markup is used with them.
  • Tables used for data – providing structural markup for data tables means people using speech and braille output will know what the row and column headings are.
  • Structural markup of content – coding headings, paragraphs and lists correctly allows people who use speech and braille output software to know what a piece of text is for.
  • Cascading style sheets – style sheets can be used to give format headings and text in pages.
  • Frames – naming frames and providing HTML links within frames allows everybody to navigate pages even if they do not have frames supported.
  • Document types – including doctypes allows search engines to list your pages.
  • Metadata – good metadata helps people with various needs access your pages from search engines.

From: The Web Access Centre.

Go to Top of Page

Sample Pages

Accessible Art Related Sites

  • Arts Access Inc. This site is an example of a Bobby Approved site. It is also a Winner of the1999 Raleigh Medal of Arts and a Universal Access Award.
  • Dayton Art Institute. This site is labeled, including extended descriptions of the exhibit objects.

Success Story Online

  • JK Rowling Flash Website: Case Study (Web Access Centre). "The relaunch of JKRowling.com saw LightMaker push the boundaries of accessible Flash. This case study provides an overview of key issues tacked to make the site as accessible as possible."

Website Examples

  • See it Right Accessible Websites Directory. Examples of accessible websites. The See it Right logo is awarded to websites that have undergone a web accessibility audit by RNIB (Royal National Institute of the Blind (Great Britain)).

Websites Moving in the Right Direction

Accessibility Weaknesses


Symbols Showing Compliance

Valid XHTML 1.0!To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you should use to add this icon to your Web page:

<p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>

Web Access Symbol (for people with disabilities)Web Access Symbol (Web Access Project )

Description: A globe, marked with a grid, tilts at an angle. A keyhole is cut into its surface.

The symbol should always be used with the following alt-text tag:
Web Access Symbol (for people with disabilities)

The Web access symbol is also available via anonymous ftp at ftp.wgbh.org.

The CPB/WGBH National Center for Accessible Media (NCAM) is pleased to announce that the Web Access Symbol, shown above, is available for use! Chosen from among 17 symbols, this image may be used by webmasters to denote that their site contains accessibility features to accommodate the needs of disabled users. The symbol should always be accompanied by its description and alt-text tag. This image was created by Stormship Studios of Boston, Massachusetts.

Go to Top of Page

Additional Resources

  • An Accessible Method of Hiding HTML Content
    Principles of designing effective color contrast for people with partial sight or congenital color deficiencies. " Though somewhat rare, there are occasions when the accessibility needs of screen reader users appear to be at odds with the needs of visual users. This kind of conflict occurs when Web developers put form elements inside of a data table matrix, when they want to use images as headings instead of text, and in other situations. Adding extra text helps screen reader users, but can complicate the visual layout, thus reducing understandability. One solution is to use CSS to hide the text from sighted users in a way that is still accessible to screen readers."
  • Red Asterisk: This is a good site to visitWeb Pages That Suck. Despite the raunchy title, this website is a great place to see bad pages and design blunders that exist on the Internet. The author (Vincent Flanders) also provides tips and ideas on how to avoid making pages that block the user from the important data on a page. The author states that:
  • "The purpose of this web site is to help people design effective and aesthetically pleasing web pages. My methodology is somewhat different. I believe that if someone is exposed to bad web page design they'll be less likely to use these techniques in the pages they create."

  • Red Asterisk: This is a good site to visitAccessibility Resource Center Adobe applications (including former Macromedia products) and their use for improving accessibility. Includes:

Go to Top of Page



David J. Bertuca, Arts & Humanities Librarian
This page designed as a presentation to LIS 518 class.

Last Modified: 18 October 2006 djb

URL: http://www.DavidBertuca.net/ada/web-access2.html

Go to: UB Libraries

Welcome to UB! Click here for Main UB Page