Tips & Tricks for an Accessible Website
According to a 2004 study by the Danish Center for Accessibility, more than 20% of all Internet users suffer from one or more disabilities. These disabilities can range from: Hearing Disabilities, Motor Disabilities, Dyslexia, ADD, Epilepsy, and Visual Disabilities. Disabled users often encounter numerous usability issues, including:
- Those with hearing disabilities may only be fluent in sign language and may encounter more and more sites that incorporate audio segments, which they cannot utilize without an alternate version.
- People with motor disabilities may suffer from involuntary movement, stiff joints, paralysis, or missing limbs. To access the Internet, many use special keyboards, pointing sticks, or voice-recognition software.
- Internet users who are Dyslexic may not be able to read text and/or may confuse letters such as b and d and frequently need additional sensory input to make sense of material.
- ADD (Attention Deficit Disorder) users may be distracted by moving objects, may not be able to follow screens that change rapidly, and/or may not be able to look at both text and image(s) at the same time.
- Epileptics need the ability to control the flicker rate of graphics by having the option of turning animated ones off. Seizures can be caused by flashes in the 4 to 59 flashes/ per second (Hertz) range, quick changes from dark to light, (similar to strobe lights) and unusually high sound frequencies.
- Visually disabled users who use screen readers and Braille writers have trouble with unidentified images, links, tables, and frames. Those who use screen magnifiers often have issues with absolute fonts and pages with poor contrast.
Although all types of disabilities should be taken into account when designing a website or online application, this article will focus primarily on how to update your site for those with some level of visual impairment. As previously mentioned, visually disabled users may access the Internet by the use of screen reader software. This software actually reads the site code, allowing the user to interact with the website in a similar manner as a fully sighted person. When specific information is missing from the code, the visually impaired user is unable to use the site.
Recently, the National Federation for the Blind filed a class-action lawsuit against Target.com citing the website violated the Americans with Disabilities Act (ADA) by not providing an audio component to their retail site which would make the site accessible to those individuals with visual impairment. (The ADA is a law passed in 1990 that requires retailers and other public places to make accommodations for people with disabilities.) The Target Corporation believes that the ADA only applies to physical spaces. How to make your site more accessible for the visually impaired There are many fixes you can add to your website to make it more accessible for visually impaired users. The following are just a few of the ways to make your site more accessible.
- Use the Alternative attribute when coding. Alternative Attributes define a website element in textual form. These attributes are ‘read’ by the screen reader software giving that user a better understanding of how the webpage looks. This attribute is often mistakenly referred to as an ALT tag; however, it is not an HTML tag, but merely an element of a tag. In Internet Explorer, the ALT attribute text is also shown on the screen as an image mouse-over or when the image cannot be displayed.
- In general, the text alternative and the non-text element should relate the same information. The following is an example of how a red shirt image could be coded on a webpage: Notice how the alternative text serves the same purpose as the image.
- Also, when using ALT attributes to describe the same image on multiple pages, (e.g., a forward arrow used for navigation or a search button) be sure to use the same alternative text for each like image.
- Coding ALT attributes are good for the user as well as good for business, as many search engines also read the alternative text and utilize it within search engine rankings.
- Employ contrasting site colors in both the site background and the text. Black text on a white background is the ideal, but many sites use color to reinforce the company branding. When choosing site colors, keep in mind that dark text on a light background will be the easiest to read for everybody, not just the visually impaired.
- The site navigation should be clear to the user. While attractive, using graphics and flash for navigation can be an instant barrier for many users, especially if the ALT attribute is not used to describe the image. Also, the location and the size of the navigation should be obvious and consistent to the site users, so they can immediately find the information they are seeking on any page of the website.
- Finally, allowing the user to control the experience on the site is very important for accessibility. This control can be given to the user in many ways.
- Internet users can make use of their own style sheet in order to make the site accessible; others may adjust the size of the browser text to a size that is more legible. If using a custom style sheet on the website, be sure to use relative font sizes like pixels or ems versus absolute lengths such as points or picas so the user has more control of the visual representation of the site.
- Also, when using Flash animation or music, always provide the user with on/off capability and do not rely on the Flash or music to be the only way to interact with the website.
- And finally, be sure that the site does not rely solely on a mouse to access certain content. All features of the site should be keyboard accessible.
Currently, the W3C (World Wide Web Consortium) is in process of drafting standards for web accessibility, to be published in 2007. The WAI (Web Accessibility Initiative) is the part of the W3C whose commitment is to lead the web to its full potential by promoting a high degree of usability for people with disabilities The WAI is in process of authoring a document that contains the standards and definitions for an accessible website. The current working draft for this document is located at http://www.w3.org/WAI/WCAG20/quickref/ and can be used as a guideline in helping create an accessible website.
Another way to check a site is to determine if it is ‘Bobby Approved.’ This free service is provided by Watchfire, a software and service company that helps ensure the security and compliance of websites. The Bobby tool allows you to test web pages and help expose and repair barriers to priority 1 accessibility (the lowest priority level) and encourages compliance with existing accessibility guidelines. http://bobby.watchfire.com/bobby/html/en/index.jsp
While it is not does not check for “good” layout or design, Bobby does test for compliance with government standards, including the U.S. Government’s Section 508. It offers prioritized suggestions based on the Web Content Accessibility Guidelines provided by the World Wide Web Consortium’s (W3C) Web Access Initiative. Bobby allows developers to test web pages and generate summary reports highlighting critical accessibility issues before posting content to live servers.
Learn more about accessibility
- Society of Technical Communicators AccessAbility Special Interest Group http://www.stcsig.org/sn/internet.shtml
- W3C Web Accessibility Initiative http://www.w3.org/WAI/
- IBM’s Human Ability and Accessibility Center http://www-03.ibm.com/able/index.html
- U.S. Department of Health & Human Services Usability Site http://www.usability.gov/
- Section 508 http://www.section508.gov
- Adobe/Macromedia Accessibility Center http://www.adobe.com/accessibility/
- English Translation of the Danish Center Study http://justaddwater.dk/2006/01/20/one-of-four-web-users-are-disabled-users/
Amy Toft
Usability Analyst