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

1. Designing Accessible Drupal Themes Heather Wozniak, Ph.D. UCLA Office of Information Technology design@heatherwozniak.com

2. We’re going to cover… Why accessibility matters Basic principles of web accessibility Common design flaws (and how to fix ‘em) Free checkers and tools How some popular contrib themes stack up Resources for learning more

3. What we’re not going to cover… The in’s and out’s of Section 508 or WCAG 2.0 WAI-ARIA (Accessible Rich Internet Applications) 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

4. Why make your site accessible? Approximately 20% of the general population has a disability These are potential customers, readers, community members, contributors, clients, employees, you name it It’s not nice to discriminate or exclude In some cases, it’s the law If it’s not law now, it may become law

5. Disability types Seeing (blindness, color blindness, low vision) Hearing Speech Mobility and motor control Cognition and learning

6. Disability causes Genetics Illness Accident or injury Aging Neurological or psychological disorder

7. Keep in mind… Conditions can be temporary or permanent Many people affected by these conditions wouldn’t necessarily identify themselves as disabled As the Web becomes more accessible, and the first Internet generation ages, the audience of disabled users will continue to grow

8. Bottom line: Your disabled audience is probably larger than you think . . . and it could grow, if you make your site more accessible . . . and you could win more contracts if you are able to offer accessibility compliance

9. Basic principles of web accessibility People with disabilities should be able to get at all the same information and functionality as those without disabilities

10. W3C Web Accessibility Initiative “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.”

11. Your users may not be able to: See the screen Use a mouse or keyboard Hear the audio Read small text Distinguish certain color combinations Process fast moving images or text Complete tasks in a limited amount of time

12. Your users might: Use a screen reader or Braille display Use only a keyboard Use a switch or other assistive device Issue voice commands Zoom or enlarge their text View your sites at a small resolution on a large monitor Turn off audio, video, or images, because they find them distracting

13. So you should: Design for device independence Use semantic page structure Provide media in multiple modalities (alternative text for non-text content ) Choose legible, scalable fonts and color schemes Label all form fields Ensure linked files are accessible

14. Common Design Flaws You can control these things at the theme level Little or no semantic structure Text in background images No skip navigation No :focus to go with :hover Not enough color contrast No link cue besides color

15. Demo and Discussion

16. Common Design Flaws(and how to fix them) Little or no semantic structure Killer for screen readers AND killer for search engines Easy to see in text-only or outline modes Use hierarchical headings <h1>-<h6>, only one <h1> per page Use headings for all lists and major components on the page (hide from sighted users if necessary) Usually set in page templates

17. Use hidden headings if necessary Drupal 7 will include a class, element-invisible In the meantime, create your own: .element-invisible { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow:hidden;}

18. Common Design Flaws(and how to fix them) Text in background images No way to provide alt-text or semantic markup Screen readers and search engines are completely unaware of the text Some users may disable images If it’s a banner, your page may be missing the site name or title! Use CSS to style your text or use foreground images

19. Common Design Flaws(and how to fix them) No skip navigation Screen readers and keyboard-only users have to wade through links to get where they need to go Include a link at the top of the page that jumps to hard-to-reach sections, for instance: Skip to navigation Skip to content Skip to footer If it really cramps your style, make the link appear on focus (don’t use display: none)

20. Making skip nav appear on focus #skip-link a, #skip-link a:visited { position: absolute; left: 0; top: -500px; width: 1px; height: 1px; overflow: hidden; } #skip-link a:hover, #skip-link a:active, #skip-link a:focus { position: static; width: auto; height: auto; }

21. Common Design Flaws(and how to fix them) No :focus to go with :hover Keyboard users don’t get visual cues For every :hover in your CSS, add a corresponding :focus a:hover, a:focus { color: red; text-decoration: underline; }

22. Common Design Flaws(and how to fix them) Not enough color contrast Check individual color combos at WebAIM during design process Check all colors with a report generator like Juicy Studio Accessibility Toolbar Recommended ratio is 4.5:1 for normal text Adjust the colors as necessary

23. Common Design Flaws(and how to fix them) No link cue besides color Users can’t tell where to click, resulting in confusion and frustration Use an indicator besides color to indicate possible action (underline, bottom border, bold) For menus, tabs, buttons, and nav bars, color and context are often enough

24. Other common flaws : No alt text on images (empty alt text is ok) Redundant alt text on images Missing or problematic link text Unlabelled form fields (especially in search boxes) Dropdowns that aren’t keyboard accessible File attachments that aren’t accessible (especially PDFs)

25. Free Checkers and Tools WAVE Toolbar for FF: wave.webaim.org Color contrast: 1. webaim.org/resources/contrastchecker 2. Juicy Studio Accessibility Toolbar for FF Colorblindness: http://colorfilter.wickline.org Lots more listed at WebAIM

26. How to self-evaluate your site Use free accessibility checking tools Examine outline and text-only modes Best way to see how screen readers and search engines understand your site Check heading structure Check alt-text on images Check link text Try using your site with keyboard only Zoom text in and out Run design through color simulators

27. How do some of the contrib themes stack up? Let’s try using some of these tools. D-theme.com provides sample themes for us to evaluate: Zen Garland DrupalCampLA Audience suggestions?

28. Where can I learn more? Official standards: Section 508 (amendment to US Federal Government Rehabilitation Act of 1973) www.section508.gov WCAG 2.0 (Web Content Accessibility Guidelines from W3C) www.w3.org/TR/WCAG20 W3C Web Accessibility Initiative www.w3.org/WAI/

29. Where can I learn more? Practical discussions and guides: WebAIM: Web Accessibility in Mind webaim.org UC Resources for Designing Accessible Websites www.ucop.edu/irc/itaccessibility/resources Accessibility and Drupal drupal.org/node/394094