Accessibility and Usability
Web content is fundamentally different from print and other traditional media formats due to the variation in how users might access web information. Here is a partial list of variables that come into play:
- Different devices
- Different operating systems
- Different browsers, including non-visual screen reading software
- Different monitor resolutions
- Differences in user-defined settings and preferences within any of the above
Given these conditions, the goal of the web designer is to make content accessible to as many people as possible, regardless of device, settings, etc.
Web accessibility issues are increasingly being addressed by law. Section 508 of the Workforce Rehabilitation Act requires federal agencies to have accessible Web sites. In addition, provisions of the Americans with Disabilities Act may be applicable to Web sites.
- Accessibility/Usability Tips
- Creating Text-Only Versions Dynamically
- Text or Graphics?
- Text, Links, and Colors
Much more information on accessibility and usability can be found in the Accessibility/Usability Resources.
- Produce well-organized content and a logical navigation structure.
- Produce clean, well-structured HTML. Don't rely solely on code produced by a WYSIWYG editor.
- Validate your HTML — check your code with a validator such as the World Wide Web Consortium's HTML Validation Service. Validated code generally requires little modification for accessibility.
- Validate for accessibility — check your code with a tool such as the Cynthia Says Accessibility Validation
- Use a well-organized, validated template as the foundation for your entire site. Designers are encouraged to use the UA Web Templates.
- Test your pages in different ways — at different screen resolutions, on different browsers, at different window sizes, and on various browser accessibility settings.
Specific recommendations supported by the World Wide Web Consortium's Web Accessibility Initiative include:
- Provide text equivalents for all non-text elements. Using "alt" text for all graphics and image map hotspots, and "longdesc" for longer descriptions, is probably the single most important (and easy) accessibility measure.
- Use clear, consistent navigation and links. Use descriptive text for hyperlinks as opposed to "click here" or similar.
- Use a consistent page structure, using cascading style sheets (CSS) for layout and style where possible. However, ensure that pages are legible with CSS disabled.
- Not all users can distinguish between colors, so don't use color to convey exclusive meaning. For example, avoid designing a form where "required fields are indicated by red type," and avoid presenting non-underlined links, identifiable by color only, within a body of text.
- Avoid causing the screen to flicker. Avoid moving, blinking, and scrolling text.
The University of Alabama uses the Usablenet Assistive web accessibility platform to improve web accessibility, compliance, and support for people with disabilities using assistive technologies (for example, blind people using screen-reading devices).
Usablenet Assistive software is licensed for use by all sites in the UA.edu domain, and it is strongly recommended that all official and unofficial UA web sites take advantage of this tool for users who desire simplified, text-only pages.
To learn more, please visit Usablenet Assistive and UA.
Designers are encouraged to favor text over graphics in applications where graphics afford no real benefit to the user for the following reasons:
- Faster page loads.
- Better performance with search engines.
- Accessible to a greater number of users.
- Allows users to customize colors and size for better readability.
- Lower server disk space requirements.
- Users can cut and paste.
- Easier to edit and maintain.
When you do use images, remember to present a meaningful alt attribute for each image.
Designers are encouraged to maximize the constrast between text and background on pages to promote readability, particularly for low vision users.
Do not underline words that are not hyperlinks, as they are often mistaken for links. Use bold or italics to draw attention to key words or phrases.