Designing and Testing for Web Accessibility

  1. Use headings when defining the structure of your document.  Check your document structure with the Headings Map plugin. To make your page even more accessible, add ARIA Landmarks.
  2. When selecting a color palette for your site, ensure that your color combinations are accessible. When selecting a color palette, use the Accessible Color Palette Toolto test all color combinations for proper levels of color contrast.
    1. If you already have a Web page designed, use the JuicyStudio Accessibility Toolbar to check for color contrast issues.  Use the Luminosity Contrast Test in this tool.  This test will produce some false positives, so confirm an error actually exists before trying to fix the problem.  For spot checking color contrast issues, use the WCAG Contrast Checker in conjunction with ColorZilla.
  3. Use the W3C Validator to check for basic code errors. Assistive technologies need to have valid code too. NOTE: If you use ARIA attributes your page might not fully validate. This is OK since ARIA attributes are adding additional accessibility and assistive technologies know how to handle them.
  4. Make sure all images have alternative text, and all media has an accompanying transcript or synchronized captions, as appropriate.
  5. Check individual pages for accessibility errors with the WAVE Toolbar.
  6. View a text-only version of the page using the WAVE Toolbar’s Text-only view.  Make sure the reading order makes sense.  The advantage of this tool over simply turning off CSS is that it will correctly linearize tables to show the correct reading order.
  7. Unplug your mouse and try to navigate the entire page, including menus, sub-menus, and all links.
    1. Before testing, Mac users must first set System Preferences:Keyboard:Full Keyboard Access:All controls.
  8. To check for all errors at once, use SortSite, available in the VCL or as an individual download. To get a personal copy contact it-access@ncsu.edu.

Resources