|
Accessibility Tip:
Accessibility Checklist
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Building accessible Web pages is easier than you think - and probably more important than you ever realized! Over the past decade, Web accessibility has become the goal of governments, educational institutions, and businesses. Online businesses that ignore accessibility risk losing customers, revenue, and invite lawsuits.
Our Accessibility Checklist will help you design/evaluate your pages. If you need to refresh your memory about accessibility and assistive technologies, review a few previous Webmaster Tips first:
Let Jaws Taste Your Site
Designing Accessible Web Pages
NetMechanic's Accessibility Resource Center
Accessible Images
Many - but not all - visitors with disabilities have some sort of visual problem, so they use assistive technologies called screen readers and screen magnifiers. A screen reader is basically a text browser that reads the text content of the screen out loud.
That means Images pose a special problem for screen readers.
- ALT text descriptions - Add descriptive alternative text descriptions to all images. The phrase "Photo of kittens for sale" is better and more descriptive than "kittens."
- Avoid text images - A text image is one that contains text, but has been saved as an image file. For example, a site's logo may contain some pictures and the name and/or tagline of the company. That's an acceptable use, but avoid placing more important text information inside an image file - like a list of your sale items or specials.
- Long descriptions - The LONGDESC attribute actually refers the visitor to another Web page that contains information about the image. Use it when the 250 character limit for an ALT description doesn't fully describe the image. Learn more about LONGDESC in our Supply Long Descriptions article.
- Graphs and charts - Make sure the important information these contain is summarized elsewhere in text format. Place it in a table, ALT text description, or use the LONGDESC attribute.
|
Accessible Navigation Options
Accessible navigation is good for your human visitors and search engines spiders. If a screen reader can't interpret you navigation menu, neither can a spider.
- Alternate text navigation - Be careful with menu-driven navigation if the interactive features are created using image maps, JavaScript, or Java applets. All three may block screen readers, text browsers, and spiders. Always include plain text links on your page that duplicate the main menu items.
- "Skip to" options - Add a small link at the top of each page that allows visitors to skip directly to the navigation menu or the page content. That way, visitors can navigate through the page content more quickly and effectively.
- Careful with script or applet-driven navigation - Never use this as your only navigation system. Always provide alternate text navigation or a link to a text-only site map on every page.
|
Get more in-depth information about accessible navigation from these articles:
Designing Accessible Navigation - Part 1
Designing Accessible Navigation - Part 2
Page Layout With Tables
A browser renders (or reads) a Web page beginning with the HTML code at the top and continuing straight down to the bottom. A table layout may look great on screen but the content may be hard to understand if it's heard instead of seen.
- Consider linearization problems - Linearization is the table rendering process used by screen readers and text browsers to convert table cells into a series of paragraphs that will be read one after the other in the order they're defined in the HTML code. Make sure your table sounds as good as it looks!
- Table summaries and captions - These attributes summarize the information contained inside a table. The caption content displays on the Web page as text. Screen readers recognize the summary content and read it aloud.
- Table headers - Table header information associates the column header with the actual data inside the table. They make long, complex tables much easier to understand.
|
Get more in-depth information about table accessibility from these articles:
Designing Accessible Tables - Part 1
Designing Accessible Tables - Part 2
Cascading Style Sheets
In general, Cascading Style Sheets (CSS) increase the accessibility of a Web page because they separate style from structure.
- CSS-independent pages - Web pages should still be readable when styles are turned off in the browser. When you use absolute positioning to design a page, you can define page elements in any order you want. However, a text browser reads page content in the order it appears in the code, so the result might be very confusing to someone without a CSS-enabled browser.
- Aural style sheets - Using aural style sheet properties defined by the W3C, you can set the speed that content will be read, select either a male or female voice, and more. Most recent versions of screen readers and aural browsers support aural style sheet properties. Other browsers simply ignore them.
|
Color And Design Choices
Color and design are important factors when visitors rate sites for credibility. They also contribute to a site's overall accessibility and usability.
- Font size and family - Consider your older visitors and others with low vision problems and select easy to read fonts. Web designers differ on who should control font size, but everyone agrees that the text should be legible: avoid anything smaller than 10 pixels.
- Color combinations - Make sure there's enough contrast between the page text and background and avoid red/green color combinations.
- Keyboard friendly design - Some visitors have problems using a mouse, so they navigate using the keyboard instead. Add keyboard shortcuts using the ACCESSKEY attribute to make keyboard navigation easier.
- Avoid blinking animation - Blinking page elements are annoying to most people, but they can cause seizures in some visitors.
|
Valid HTML Code
Assistive technologies are stricter than commercial browsers. Minor errors that Explorer and Netscape overlook can be more serious in screen reader or Web page reader programs.
- Use header tags - Style your page using CSS and use structural HTML tags like header tags and lists to define the content. Screen readers read these tags and allow visitors to quickly navigate between page sections to find the information they want.
- Add STRONG and EM tags - Replace bold and italics formatting tags with STRONG and EM tags. Screen readers give the text contained in them extra emphasis when the content is read aloud.
- Validate HTML code - Because assistive technologies are basically text browsers, they rely on structural HTML to accurately present the page content. Simple coding errors may hide page content.
- Remove browser-specific code - Most browser-specific tags (like the BLINK or MARQUEE tags) are deprecated. Assistive technologies don't understand them and they cause problems for other commercial browsers too.
|
Accessible Form Design
Forms are the most important component of an ecommerce Web site: without them, the shopping cart doesn't function and visitors can't buy your products! Accessible forms open up your market to a large, loyal audience of visitors with disabilities. The W3C has a white paper on the business benefits of accessible Web design.
- Label form elements - The LABEL element associates form controls with the form element that describes it. Visitors who can't see the form will still know exactly what information to enter when they hear the LABEL content.
- ACCESSKEY attribute - Visitors can use the ACCESSKEY attribute to quickly navigate between form fields or sections using the keyboard.
- Highlight form fields - Use JavaScript to create dynamic form fields. Visitors can tell at a glance what fields remain and which field is the active one. Assistive technologies that don't understand JavaScript will simply ignore the formatting.
|
For more information about accessible forms, review our Desiging Accessible Forms article.
Add Accessibility To Multimedia
Some search engines are beginning to index Flash content. The accessibility features of Flash MX have made this possible. Flash MX allows designers to include descriptive text that can be read aloud by assistive technologies.
Always duplicate multimedia content to make sure that all visitors can access it:
- Add a transcript link to audio files.
- Add text description or transcript link to video and flash files.
|
Test For Accessibility
It's pretty easy to design an accessible site from scratch, but there are millions of sites already in existence. What do they do now?
Small sites that have just a few pages are easy to optimize, but as sites grow, so does their complexity. The idea of retrofitting hundreds or thousands of pages by hand is daunting. Most site owners won't even consider it because of the time, effort, and cost involved.
Fortunately, larger sites do have an option: Keynote's WebIntegrity service. It's an enterprise application that offers a full-service suite of validation and accessibility tools. Site owners can use WebIntegrity to quickly scan thousands of pages across multiple sites on a daily, weekly, or monthly basis.
- Interactive repair - Automatically check and repair HTML code errors that cause accessibility problems.
- Section 508 checklist - Automatically evaluate your site according to Section 508 guidelines and understand how accessible your site really is.
- Verify usability in assistive technologies - You'll know whether your site is accessible to visitors using Braille readers, screen readers, and more.
- View content in different color combinations - How does your page look in black in white? Easily check to see if there's enough contrast and identify potential problems with color blindness.
- Check style and layout - See how your pages look without style sheets, how data tables display and more.
|
WebIntegrity reduces the complexity of testing and validation. You're free to concentrate on your rapidly-expanding business without worrying about liability issues from Section 508 and other accessibility guidelines.
|
