Friday, March 28, 2014

Accessibility and Inclusivity

On Tuesday, March 25, Dan, Terrill, and I presented at the TechConnect conference here on campus at the University of Washington. We walked through the following material:

Accessible Technology at the UW

Visit the Accessible Technology at the UW site and learn all about what is happening at the UW in making technology work for everyone.

The Basic Methods for Accessible Websites

  1. Validated HTML
  2. Semantic element types (headings, paragraphs, lists, tables, etc.)
  3. Headings and sub-headings used hierarchically
  4. ALT texts on images, where meaningful
  5. Page titles
  6. Meaningful link texts
  7. Form labels
  8. Table headers and captions
  9. Captioning on videos

Useful Tools


Download-ables and Plug-in-ables

Accessibility Problem Examples

Problems With Focus Indicator

No Focus Indicator

Reverse Focus Indicator (for mouse)

Mystery Focus Indicator

  • ESPN —

Enhanced Focus Indicator


Tab Order

  • Olympic College: Unexpected, goes to central pane first —
  • Yahoo; Left nav first, skips top nav:  — (due to cursor in search box by default, something to discuss, is this a good technique? On most pages, probably not, but on portal/search pages, it's probably appropriate, esp. with proper form label in place) —
  • Oklahoma State University: Lots and lots and lots of menu items to tab through —

Contrast and color

  • Yahoo: High contrast by default (except purple nav bar) —
    Oklahoma State University —
  • Martinsburg Police Department: Too much contrast? Does it hurt? —
  • CSS Teagarden: Where is nav, where is content? —
  • CSS 204: Foreground vs background problems —<</li>
  • CSS 186: Fade to invisible —


Default Text Size