Printer-friendly version

(notes from a session at DrupalCon 2010)

Katherine Lynch, Drexel University

• fundamentals of Web accessibility
  • W3C definition: "means that people with disabilities can use the Web"
  • WAI (W3C's Web Acccessibility Initiative)
  • WCAG (Web Content Accessibility Guidelines)
  • ARIA (Accessible Rich Internet Applications)
  • AT (assistive technologies)
  • a11y (abbreviation for accessibility common on Twitter)
  • accessibility was part of the initial concept of the Web
  • 25% users have some disability that affects use of Web sites; in contrast, IE6 is now less than 10% of the market, so if you want to reach the two largest demographics, focus on Firefox and accessibility; constrained browsers are much smaller market segments
  • "usability" improvements such as drag & drop are useless to people who rely on screen readers
  • who is accessibility for?  everyone! automatically means cleaner code, smarter design, better SEO
  • but WCAG 2.0 document is notoriously hard to work from
  • most important principles spell POUR: Perceivable, Operable, Understandable, Robust
• themes
  • begin with the end in mind
  • icons are great for a wide range of users, provided they have alt text
  • do the squint test - should be able to identify regions and what they mean without glasses, etc.
  • don't use structural markup!  Markup is for semantics, not layout.
  • use the Zen theme or its principles
  • color: need at least 3:1 contrast ratio, don't rely on color-only cues, make sure links are identifiable
  • always use alt text; if an image is only decorative, use alt=""
  • "skip links" for complex navigation - can skip to any HTML element marked up with an id
  • use headings! (H1-H6) form labels and legends, table headers and summaries. The defaults built into Drupal and Zen are very smart, but you can make them smarter.
• modules
  • when building forms, use #element-invisible and #element-hidden properties for accessiblity features
  • assume the reader will not use the Back button even when instructed to do so.
  • make admin interfaces accessible as well as front end
  • avoid "keyboard traps" where you can get in by keyboard but can't get out. tab, arrow keys, esc have standard meanings, so don't redefine!
  • don't use auto-submit drop-down menus -- not accessible
  • don't give the user controls, give them control!
• rich content (media)
  
  • don't autoplay music, allow turn on/off, offer text transcript
  • video needs text or audio equivalent or a note saying there is none, descriptive audio track, captions
  • use the Media module in D7
  • ARIA is the framework for the future! allows roles to be assigned to HTML elements, also settings for screen readers. already in place in Drupal 7 login form, Ubercart checkout, some jQuery support
  • test with screen reader demos, actual users if available, unplug your mouse and turn off Flash, Javascript, images, CSS
  • tools: vischeck, fangs plugin for Firefox, Firefox accessibility extension, valdators
• user videos
  • very appreciative of what's been done, but still plenty room for improvement
• the future of Web accessibility
  • groups.drupal.org/accessibility
  • we have the tools, let's share them with everyone!