Accessible Web Sites Benefit Everyone
An accessible Web site is one that can be used by people with disabilities.
Full accessibility to the Internet has been a well-known issue since the beginning of the Internet’s World Wide Web. Therefore, the World Wide Web Consortium (W3C), the organization that develops and oversees the Internet’s Web standards and guidelines, created the Web Accessibility Initiative (WAI), whose function is to promote Web functionality for people with disabilities.
In 1998, the U.S. government amended Section 508 of the Rehabilitation Act, requiring all Federal agencies to ensure that their information is accessible to people with disabilities.
Many other non-federal organizations are now also interested in making their Web sites accessible to people with disabilities and have voluntarily chosen to follow accessibility laws or guidelines. More and more Web developers/designers and authors choose to create their Web content with accessibility in mind because they want to increase their site’s "traffic" by increasing the number of their audiences. More and more people realize that an accessible Web site increases the usability of their sites.
Universal Accessible Web Design
If you would like to design a Web site that can be used by people with disabilities, then you significantly increase your chances to attract more users than you may have thought of! Your accessible site will become available and usable to a large number of the population.
Accessible Web design benefits not only people with disabilities. Since the Web can be accessed in many different ways, the same Web site can be experienced very differently depending on the user’s:
- Operating system, such as a PC (running Windows), or Macintosh (running OS);
- Browsing device, such as cell phone or Personal Digital Assistant - PDA;
- Type of browser, such as Internet Explorer, Firefox, or Opera;
- Browser setting, such as text size or the use of individual style sheet.
Therefore, accessible elements that are built into Web pages make your Web site more attractive to everyone. Design your site with accessibility in mind and everyone will benefit, including users with disabilities, people using older computers or technologies, but also people using latest technologies.
Universal Web design ensures that your site is flexible enough to be accessed by the widest range of users because it includes features that give your visitors more options and control. Each browser interprets the HTML code differently. Therefore, it is good advice to test your Web pages with different browsers to see the differences in presentation.
An accessible Web site is one that implements organizational and structural elements and does not only emphasize the visual presentation.
Different Types of Disabilities
In order to make a Web site accessible we first need to know how people with different types of disabilities may use your Web site.
1. Visual Impairments
Blind users:
- may use a screen-reader;
- may use a refreshable Braille display;
- navigate using the keyboard;
- do not have direct access to graphical information.
People with low vision:
- may use screen-magnification software;
- may benefit from color and contrast adjustments;
- may benefit from font style and size adjustments.
2. Hearing Impairments
People with hearing impairments:
- require transcripts for audio clips;
- require synchronous captioning for video clips;
- benefit from visual cues for auditory elements.
3. Mobility Impairments
People with mobility impairments:
- may use alternate keyboards and pointing devices;
- may use speech recognition;
- benefit from large well-spaced controls.
4. Cognitive Impairments
People with cognitive impairments:
- benefit from simple and consistent page layout and navigation;
- benefit from graphical and audio-visual elements that complement text content.
5. Seizure Disorders
People with seizure disorders:
- may be sensitive to elements that flicker, flash or scroll automatically, which can trigger seizures in individuals with photo-sensitive epilepsy;
- require blinking page elements and the refreshing of the screen to do so at a frequency of less than twice a second (2 Hz) or greater than 55 times a second (55 Hz).
Basic Web Accessibility Tips
Here are some basic tips on how to implement accessibility features into your Web site. Please keep in mind that these tips are not meant to be comprehensive. For more Web accessibility information, please refer to the below Guidelines, Online Resources, and Recommended Books.
Headers Provide Structure
Use real header tags "h1-h6" for the various segments of the information on your pages to divide your content into meaningful sections. Don’t just make your headers “bold” or apply a certain font size or color. Screen-readers rely on header tags to identify the structure of your page, giving the screen-reader user the option to skim the information and access the various sections easily.
Example:
<h1>VSA Minnesota Home Page</h1>
Cascading Style Sheets Provide Consistency
Make your page layout consistent and easy to maintain by using Cascading Style Sheets (CSS). Think of a long document that you create in Microsoft Word: Instead of applying the same format to your text elements over and over, define your styles one time and then use these settings to format your document. However, it is important that the content of your Web site is still readable if the user’s browsing device does either not support CSS, or has CSS option turned off.
Example of defining a style for a heading:
h1 {color: red}
Result:
Every time, the HTML <h1> tag will be used in the document, this heading will have the color red.
Relative Values Provide Flexibility
Use relative instead of absolute values for your font sizes to make your content scalable and flexible, giving the user control of their preferred text size level. By offering this flexibility the user’s browser will display the information according to the user’s choice since you made the text size relative to the user's default settings. Relative values, such as “em’s” or percentages offer this flexibility. However, absolute values, such as “pixels” restrict the user from changing the font-size.
Example:
font size: 1.5em
Result:
The user will have the choice to either scale the content up, displaying the content larger or scale the content down, displaying the content smaller.
Alternative Text Descriptions Explain Images:
Provide an equivalent meaningful textual description of images, explaining its content or function. This will allow users, who are not able to see the image, to equally access the web page’s information:
Example:
Alternative Text Description (ALT): "Red flower pot with multi-colored bouquet in blues, yellows and reds".
Good Contrast Aids Readability
Provide high contrast between your text and the background to make your information stand out from the background. If text does not contrast sufficiently with your background color, then people with low vision will have difficulty reading the information. Avoid low contrast color combinations, such as blue text on a black background. A common mistake is to have blue – the default color for links - on dark backgrounds.
Descriptive Names For Links
For your links, use text that makes sense when read out of context. For example, avoid links that command the reader to "click here" and create instead a link that is descriptive of the information to which the visitor will be taken, such as “Learn more about our Programs & Services.” Also, avoid using the whole URL, such as "http://mn.vsamn.org/new.html" and give your link instead a relevant name: "What's New - Americans with Disabilities Act (ADA) Celebration".
Audio and Video Multimedia Considerations
For auditory presentation, provide equivalent alternatives, such as captioning or transcripts. For important visual presentation, provide an auditory description.
Validation Tools
When using validation tools keep in mind that they can not assess the entire Web page but only individual elements of it. They are automated tools, checking for compliance with the Section 508 or the W3C Guidelines, thus looking for ALT tags in images etc. But tools can not tell if the text descriptions are meaningful. Many accessibility issues, such as the Web site’s contrast, need to be evaluated manually.
One easy to use tool is the WAVE Accessibility Tool (http://www.wave.webaim.org/index.jsp). The WAVE validates your design by adding icons to your Web page. The icons correspond to the structural and organizational elements - the important features in accessibility.
Guidelines
- Web Accessibility Initiative (WAI)
- The World Wide Web Consortium (W3C), the organization that develops and oversees the Internet’s Web standards and guidelines, created the Web Accessibility Initiative (WAI), whose function is to promote Web functionality for people with disabilities.
- Section 508
- Section 508 is part of the Rehabilitation Act of 1973 and was amended in 1998. Section 508 requires that electronic and information technology developed, procured, maintained, or used by all Federal agencies is made accessible to people with disabilities.
Online Resources
- Accessibility of Information Technology (AIT): Web Accessibility Standards
- The AIT is part of the University of Minnesota’s Computer Accommodations Program (CAP). The University of Minnesota is committed to providing equal access to information technology. AIT provides detailed information and practical solutions to many different techniques in Web accessibility.
- Trace Research & Development Center: Designing More Usable Web Sites
- The Trace is a part of the University of Wisconsin-Madison. The Trace Center has been a pioneer in the field of technology and disability.
- WebAIM
- WebAIM is a non-profit organization within the Center for Persons with Disabilities at Utah State University, dedicated to improving accessibility to online learning materials. WebAIM provides comprehensive Web accessibility training and techniques and gives many examples of inaccessible and accessible Web design.
Recommended Books
"Constructing Accessible Web Sites" by Jim Thatcher and others;
"Eric Meyer on CSS: Mastering the Language of Web Design" by Eric Meyer;
"Maximum Accessibility: Making Your Web Site More Usable for Everyone" by John M. Slatin, and Sharron Rush.
