Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Accessible Drupal Themes


Published on

Introduction to web accessibility and tips for making Drupal themes more usable and accessible. Presented at DrupalCampLA in August 2010.

Published in: Technology
  • Be the first to comment

Designing Accessible Drupal Themes

  1. 1. Designing Accessible Drupal Themes<br />Heather Wozniak, Ph.D.<br />UCLA Office of Information Technology<br /><br />
  2. 2. We’re going to cover…<br />Why accessibility matters<br />Basic principles of web accessibility<br />Common design flaws (and how to fix ‘em)<br />Free checkers and tools<br />How some popular contrib themes stack up<br />Resources for learning more<br />
  3. 3. What we’re not going to cover…<br />The in’s and out’s of Section 508 or WCAG 2.0<br />WAI-ARIA (Accessible Rich Internet Applications)<br />This presentation is designed to give you practical tips you can use to improve the general usability of your themes, and to serve as a jumping-off point for learning more about accessibility<br />
  4. 4. Why make your site accessible?<br />Approximately 20% of the general population has a disability<br />These are potential customers, readers, community members, contributors, clients, employees, you name it<br />It’s not nice to discriminate or exclude<br />In some cases, it’s the law<br />If it’s not law now, it may become law<br />
  5. 5. Disability types<br />Seeing (blindness, color blindness, low vision)<br />Hearing<br />Speech<br />Mobility and motor control<br />Cognition and learning<br />
  6. 6. Disability causes<br />Genetics<br />Illness<br />Accident or injury<br />Aging<br />Neurological or psychological disorder<br />
  7. 7. Keep in mind…<br />Conditions can be temporary or permanent<br />Many people affected by these conditions wouldn’t necessarily identify themselves as disabled<br />As the Web becomes more accessible, and the first Internet generation ages, the audience of disabled users will continue to grow<br />
  8. 8. Bottom line:<br />Your disabled audience is probably larger than you think<br /> . . . and it could grow, if you make your site more accessible<br /> . . . and you could win more contracts if you are able to offer accessibility compliance<br />
  9. 9. Basic principles of web accessibility<br />People with disabilities should be able to get at all the same information and functionality as those without disabilities<br />
  10. 10. W3C Web Accessibility Initiative<br />“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.”<br />
  11. 11. Your users may not be able to:<br />See the screen<br />Use a mouse or keyboard<br />Hear the audio<br />Read small text <br />Distinguish certain color combinations<br />Process fast moving images or text<br />Complete tasks in a limited amount of time<br />
  12. 12. Your users might:<br />Use a screen reader or Braille display<br />Use only a keyboard<br />Use a switch or other assistive device<br />Issue voice commands<br />Zoom or enlarge their text<br />View your sites at a small resolution on a large monitor<br />Turn off audio, video, or images, because they find them distracting<br />
  13. 13. So you should:<br />Design for device independence<br />Use semantic page structure<br />Provide media in multiple modalities (alternative text for non-text content )<br />Choose legible, scalable fonts and color schemes<br />Label all form fields<br />Ensure linked files are accessible<br />
  14. 14. Common Design Flaws<br />You can control these things at the theme level<br />Little or no semantic structure<br />Text in background images<br />No skip navigation<br />No :focus to go with :hover<br />Not enough color contrast<br />No link cue besides color<br />
  15. 15. Demo and Discussion<br />
  16. 16. Common Design Flaws(and how to fix them)<br />Little or no semantic structure<br />Killer for screen readers AND killer for search engines<br />Easy to see in text-only or outline modes<br />Use hierarchical headings <h1>-<h6>, only one <h1> per page<br />Use headings for all lists and major components on the page (hide from sighted users if necessary)<br />Usually set in page templates<br />
  17. 17. Use hidden headings if necessary<br />Drupal 7 will include a class, element-invisible<br />In the meantime, create your own:<br />.element-invisible {<br /> position: absolute;<br /> left: -10000px;<br /> top: auto;<br /> width: 1px;<br /> height: 1px;<br />overflow:hidden;}<br />
  18. 18. Common Design Flaws(and how to fix them)<br />Text in background images<br />No way to provide alt-text or semantic markup<br />Screen readers and search engines are completely unaware of the text<br />Some users may disable images<br />If it’s a banner, your page may be missing the site name or title!<br />Use CSS to style your text or use foreground images<br />
  19. 19. Common Design Flaws(and how to fix them)<br />No skip navigation<br />Screen readers and keyboard-only users have to wade through links to get where they need to go<br />Include a link at the top of the page that jumps to hard-to-reach sections, for instance:<br />Skip to navigation<br />Skip to content<br />Skip to footer<br />If it really cramps your style, make the link appear on focus (don’t use display: none)<br />
  20. 20. Making skip nav appear on focus<br />#skip-link a, #skip-link a:visited {<br /> position: absolute;<br /> left: 0;<br /> top: -500px;<br /> width: 1px;<br /> height: 1px;<br /> overflow: hidden; }<br />#skip-link a:hover, #skip-link a:active, #skip-link a:focus {<br /> position: static;<br /> width: auto;<br /> height: auto; }<br />
  21. 21. Common Design Flaws(and how to fix them)<br />No :focus to go with :hover<br />Keyboard users don’t get visual cues<br />For every :hover in your CSS, add a corresponding :focus<br />a:hover, a:focus {<br /> color: red;<br /> text-decoration: underline;<br /> }<br />
  22. 22. Common Design Flaws(and how to fix them)<br />Not enough color contrast<br />Check individual color combos at WebAIM during design process<br />Check all colors with a report generator like Juicy Studio Accessibility Toolbar<br />Recommended ratio is 4.5:1 for normal text<br />Adjust the colors as necessary<br />
  23. 23. Common Design Flaws(and how to fix them)<br />No link cue besides color<br />Users can’t tell where to click, resulting in confusion and frustration<br />Use an indicator besides color to indicate possible action (underline, bottom border, bold)<br />For menus, tabs, buttons, and nav bars, color and context are often enough<br />
  24. 24. Other common flaws :<br />No alt text on images (empty alt text is ok)<br />Redundant alt text on images<br />Missing or problematic link text<br />Unlabelled form fields (especially in search boxes)<br />Dropdowns that aren’t keyboard accessible<br />File attachments that aren’t accessible (especially PDFs)<br />
  25. 25. Free Checkers and Tools<br />WAVE Toolbar for FF:<br /><br />Color contrast:<br />1.<br />2. Juicy Studio Accessibility Toolbar for FF<br />Colorblindness:<br /><br />Lots more listed at WebAIM<br />
  26. 26. How to self-evaluate your site<br />Use free accessibility checking tools<br />Examine outline and text-only modes<br />Best way to see how screen readers and search engines understand your site<br />Check heading structure<br />Check alt-text on images<br />Check link text<br />Try using your site with keyboard only<br />Zoom text in and out<br />Run design through color simulators<br />
  27. 27. How do some of the contrib themes stack up?<br />Let’s try using some of these tools.<br /> provides sample themes for us to evaluate:<br />Zen<br />Garland<br />DrupalCampLA<br />Audience suggestions?<br />
  28. 28. Where can I learn more?<br />Official standards:<br />Section 508 (amendment to US Federal Government Rehabilitation Act of 1973)<br /><br />WCAG 2.0 (Web Content Accessibility Guidelines from W3C)<br /><br />W3C Web Accessibility Initiative<br /><br />
  29. 29. Where can I learn more?<br />Practical discussions and guides:<br />WebAIM: Web Accessibility in Mind<br /><br />UC Resources for Designing Accessible Websites<br /><br />Accessibility and Drupal<br /><br />