Home > Resources > Web Development > Web Tips > Accessibility

Web Accessibility Resources

How to create and check Web pages for accessibility

At Colorado State University

On the Web

Tools

WebAIM WAVE

  • WAVE online accessibility check
  • WAVE Firefox toolbar add-on
  • Enter a URL for summary of errors and alerts
  • Click red flag for details of errors (red) and alerts (yellow)
  • Click red/yellow icon to locate element in page
  • Click blue icon for explanation
  • Click outline button to check nesting of headings
  • Click No Styles to view the page without CSS
  • Click Contrast to find low-contrast elements

Other Accessibility Validators

Web Developer Browser Extension

  • Firefox Web Developer add-on
  • Chrome Web Developer extension
  • Disable CSS, JavaScript, images, cookies, popups, plugins, etc.
  • Forms: Display Form Details, View form information, outline form fields without labels
  • Images: Disable images, Outline images without alt
  • Validation: HTML, CSS, links, Section 508, WAI
  • To add WAVE, click Tools, Edit Tools, Add� Type WAVE, and add this URL: http://wave.webaim.org/report#/
  • To add Mobile checking, use http://validator.w3.org/mobile/check?docAddr=

Other Browser Accessibility Features

  • View Page Source
  • Page Zoom
  • Text Size (IE) and Zoom Text Only (Firefox)
  • Alternate Stylesheets
  • Settings (enable/disable features)
  • Hide navigation toolbar ("browserless self-test": no Back, Forward or Address)

Screen Readers

Accessibility Assessment (Inventory, Audit)

Content and accessibility assessment spreadsheet example

Purpose

  • Produce an inventory of important sites, applications, pages, templates
  • Provide evidence that accessibility is being assessed and improved
  • Identify, summarize and prioritize accessibility problems
  • Track progress over time
  • Combine with assessment of content (usability, design, mobile, ...) � optional
  • Share your processes and ideas with other web developers

Suggestions

  • Keep it simple
  • Format and content should be useful for you

Spreadsheet Rows

  • Web site/application home pages and other important or high-traffic pages
  • e.g. colleges, departments, forms (login/contact/request), content templates

Spreadsheet Columns

  • Site/page name, URL (optional: owner/maintainer, target users, usage)
  • Validator: WAVE: # of errors, warnings/alerts (optional: HTML, CSS, mobile)
  • Tests: keyboard, screen reader (optional: disable features, mobile devices)
  • To Do: describe key problems to fix

Some Common Accessibility Coding Issues

  • Graphics have alt attributes (images, image inputs, image map areas, applets)
  • Tables have summary, caption and th elements and scope attributes, and are simple (no nesting)
  • Forms have label, fieldset and legend elements, instructions, clear error messages, client + server validation, easy to correct, usable via keyboard only
  • Language of page/section is identified (e.g. <html lang="en">)
  • Abbreviations are explained using abbr elements
  • Frames and links/elements requiring explanation have title attributes
  • Navigation is simple and consistent
  • Navigation links come after the main content, or provide a skip link
  • Color is not the sole way to convey information
  • Contrast is high (background vs. text colors)
  • Disabling JavaScript, CSS or images does not make the page unusable
  • JavaScript events are predictable (on focus, jump menus)
  • Plugin/Application software link (e.g. Adobe Reader for PDFs)