Introduction
This tutorial will lead you on an exploration of accessibility checkpoints. Using common sense and just a touch of technical expertise you can assess Web materials for accessibility and see where to make changes yourself or know how to ask for changes from Web producers and developers. Accessibility is easiest when it's designed into Web materials from the start. While retrofitting is possible it can sometimes make more sense to start over with an accessible template system.
This material is intended for beginners, but even if you are an expert you'll find something to walk away with.
We'll be using the WAVE Tool during this tutorial. While a different accessibility toolbar does exist for Mozilla/Firefox for Mac and Win, most accessibility software is available for Windows only.
The WAVE Validation and Toolbar Download
You can validate your website at the WebAim's WAVE page. You can also download the Web Accessibility Toolbar (WAT) for your browser which loads bookmarklets for: Grayscale Page, Toggle Images/Alts, Disable Style Sheets, and more.
Web Accessibility Toolbar (for Internet Explorer only)
Use of Color
Check your page with your display set to grayscale.
Web Accessibility Toolbar (WAT) > Colour> Greyscale
Is there adequate color contrast? Is information or emphasis conveyed using color still available? For instance, are certain choices made obvious only by the font color, such as the original price is in blue and all the sale prices are in red? Are there high contrast areas that cause an optical flicker, like striped backgrounds? (To reset, use refresh.)
Bad: http://www5.mgma.com/ecom/default.aspx?tabid=63
Good: http://www.olivetech.com/html/contact_getinfo.htm
View your page at Vischeck, the color assessment/color blindness checker: http://www.vischeck.com
Use of Images
Check your page with images off and alt text on. Is appropriate alternate text available? Does it convey the same function or purpose as the image? Can the page still be used with images turned off?
Toggle Image/Alt to check for alt tags. Alt tags are descriptions of graphics for users who don't use graphics. Turn images back on by selecting Web Accessibility Toolbar (WAT) > Images > Toggle Image/Alt.
Web Accessibility Toolbar (WAT) > Images> Toggle Image/Alt
Bad: http://www.kimon.net/badaccsess.html
Good: http://www.csun.edu
Flexible Page Design
Resize the browser window to check for presentation on different screens.
Web Accessibility Toolbar (WAT) > Resize>
Bad: http://www.origenxbox360.com/
Good: http://www.w3.org/
Enlarge the fonts to see how the page behaves.
Web Accessibility Toolbar (WAT) > IE Options> Text Size> Largest
Bad: http://www.cnn.com/
Good: http://www.csun.edu/test/hp_4col_new.html
Structure vs. Design
Navigate the site using the keyboard only. Are all links and form elements accessible and usable from the keyboard? Do you cycle through these elements in a logical order? Does the page clearly indicate where links lead to?
View the page in linear order, the way that screen readers will read it.
Web Accessibility Toolbar (WAT) > Structure > Linearize.
Bad: http://www.gm.com/
Good: http://www.csun.edu/test/hp_4col_a.html
Disable style sheets to reveal the underlying structure of the site.
Web Accessibility Toolbar (WAT) > CSS> Disable CSS
Bad: http://www.ebay.com/
Good: http://www.csun.edu/test/hp_4col.html
Extra credit: http://www.csszengarden.com/
Easy, Consistent Navigation
Check your navigation. Are the links easy to find? Is the navigation consistent; in the same place or grouping? Are there clear locations for primary navigation (main site sections), secondary navigation (inside content sections) and if necessary tertiary navigation (same page anchors, tables of contents, etc)?
Tab through to get to some page content. Click or press Enter on a link and once the page loads, tab through again to get to the item you wanted. How many navigation links must you tab through to get to information you selected? Go to: http://www.target.com and use the tab key to navigate.
Add a "skip navigation" feature if you have a lot of navigation that is repeated on every page.
Use of Scripts and Forms
Test keyboard access to form fields or input boxes. Use a separate submit or go button for ease of use with drop down menus. Make sure that the label for each field precedes the actual input item.
Turn Javascript off and make sure your visitor can still get to the content on your pages. In Internet Explorer Tools> Internet Options> Security Tab> Custom Level - scroll down to Active Scripting, check Disable, and reload the page.
With Javascript off, check the following page: http://www.expedia.com
Consider a phone number or email link as an alternate way for users with disabilities to sign up or provide information if you have a complex or multipart form.
Use of Multimedia
Turn off your sound and view. Can you understand and navigate the content without sound?
Movies: Turn sound back on and turn off monitor and listen. Can you understand the movie with only the sound?
Provide synchronized closed captions for hearing impaired and text alternate or audio description for visual impaired for all movies.
To see video material prepared properly with Closed Captioning view "Introduction to Screen Readers" at:
http://www.doit.wisc.edu/accessibility/video/intro.asp
Flash material must be created with the latest accessibility features.
See: http://www.adobe.com/accessibility
At a minimum, the Flash content must not freeze a screen reader and equivalent text must be provided. Flash sites or Flash navigation must be accessible or should not be added to the CSUN Web environment.
Use of Frames
Don't use Frames or provide a no frames alternate. If frames are used, make sure each frame is clearly labeled with its purpose.
Don't use meta tags that cause a page to refresh or reload with a new URL.
Use of Tables
Are you using tables for layout or to organize data? For data tables, did you provide summary, header and row information to orient visitor in tables?
If table is for layout only, indicate "layout table" in table summary. Make sure that the way you have broken up the content in layout tables reads sensibly when linearized - see Stucture vs. Design
Use of Graphs and Charts
Have you included graphs or charts on your site? Provide summary information in alt text and include a long description link to the data represented in the graph or chart.