Web Accessibility for Casual Web Designers


Design guidelines



The most common problems with web accessibility for low vision individuals can be broadly classified a overly complex layout, difficult navigation, content only accessible as images, difficulties in visibility, and syntactically incorrect source code. Suggestions for avoiding all of these are offered below. Most important, however, is to adopted a KISS approach to creating and maintaining web pages: simplify all aspects of the design not directly related to content. Lest you think that a visually cluttered layout, full of flashy effects and complex navigation mechanisms is essential, consider the gazillions of dollars that Google has made with the simplest of web designs.

Guidelines are given below regarding layout, links, images, visibility issues, javascript and multimedia, and validation.

Layout

Keep the layout simple. Keep multiple columns to a minimum. Use CSS for layout rather than frames or tables. The use of frames is particularly problematic for many assistive technologies. Choose or create simple CSS style sheets. Many web available style sheets are too complex for good accessibility. These pages were created using the University of Utah web templates. When creating a web design from scratch, consider Adobe Dreamweaver, which comes with a set of style sheets that are an appropriate starting point for building accessible web pages. One useful way to evaluate layout as it will be seen by many assistive techologies is to install the Firefox WAVE toolbar, view the web page under design in Text-only mode, and imagine accessing the information in the page with only one line visible at a time.

Organize web pages using HTML heading tags. The level of the heading should reflect an outline-like organization of the document. In particular, start at the top level (<h1>) and don't skip a level as you move down the hierarchy. In particular, do not chose heading level based on desired appearance. If you want to change the size or font of a tag, do it in the CSS style sheet.

Links

Link names (the visible linked-to text, not the specified URL) should be informative. Do not use link names that can only be understood in context or repeated use of the same link names pointing to different places. (Bad) examples include multiple uses of “more”, “click here”, or “listen” in the same document.

Images

All images that are relevant to the content of the page should have an alt attribute that describes the function of the image. The alt text should be relatively short (on the order of 50 characters of less). The focus on function is important, don't just describe the image. An image that is purely decorative should have an empty alt attribute (alt=""). A useful way to think about alt text is to imagine what you would say about an image if you were describing a web page over the telephone. WebAIM provides more information about creating alt text for images.

Avoid image maps if possible, since they significantly complicate low vision navigation. If you must use them, use client-side maps and associate an alt or longdesc attribute explaining the nature of the image map and alternate ways of accessing the relevant content.

Visibility

It must be easy to read the web page! Readability of text depends on the size of the text and the difference in the brightness of the text relative to its background. Do not depend on contrasting colors to set off text from background.

Do not imbed critical text in images, which is a common practice in many web pages. One exception to this is the logos that appear at the top of many web pages, including this one. If you must use such an image-based logo with embedded text, make sure that the associated alt attribute can suffice for the logo image itself.

Do not use images as decorative background over which text will be displayed, since it will seriously interfere with readability.

Javascript, multimedia, etc.

While some assistive technologies understand some Javascript, all content on an accessible web page must be available without Javascript. In particular, you cannot depend on a low vision user being able to utilize drop down menus. If you use any sort of nested menus, make sure that top level menu items lead to navigation pages from which all the remaining elements can be directly accessed.

Avoid all Adobe Flash used to support navigation or other critical content. If embedded videos or interactive demonstrations are important to the web page, make sure they are described in conventional text outside of the Flash object.

Validation

Assistive technologies are much less forgiving of syntactically invalid HTML and CSS style sheets than are conventional web browsers. It is essential that all web pages be validated for correctness. Validators also exist to check for potential accessibility issues.

A separate section of this document covers validation.

The work of the Visual Perception and Spatial cognition research group is made possible by the generous support of the National Science Foundation, the National Institutes of Health, and the University of Utah