The document discusses the importance of designing accessible Drupal themes, emphasizing that approximately 20% of the population has disabilities that can hinder their web use. It outlines basic principles of web accessibility, common design flaws, and provides practical solutions to enhance user experience for all, regardless of abilities. The presentation also recommends tools for evaluating accessibility compliance and suggests additional resources for further learning on the topic.

1. Designing Accessible Drupal ThemesHeather Wozniak, Ph.D.UCLA Office of Information Technologydesign@heatherwozniak.com

2. We’re going to cover…Why accessibility mattersBasic principles of web accessibilityCommon design flaws (and how to fix ‘em)Free checkers and toolsHow some popular contrib themes stack upResources for learning more

3. What we’re not going to cover…The in’s and out’s of Section 508 or WCAG 2.0WAI-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 disabilityThese are potential customers, readers, community members, contributors, clients, employees, you name itIt’s not nice to discriminate or excludeIn some cases, it’s the lawIf it’s not law now, it may become law

5. Disability typesSeeing (blindness, color blindness, low vision)HearingSpeechMobility and motor controlCognition and learning

6. Disability causesGeneticsIllnessAccident or injuryAgingNeurological or psychological disorder

7. Keep in mind…Conditions can be temporary or permanentMany people affected by these conditions wouldn’t necessarily identify themselves as disabledAs 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 accessibilityPeople 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 screenUse a mouse or keyboardHear the audioRead small text Distinguish certain color combinationsProcess fast moving images or textComplete tasks in a limited amount of time

12. Your users might:Use a screen reader or Braille displayUse only a keyboardUse a switch or other assistive deviceIssue voice commandsZoom or enlarge their textView your sites at a small resolution on a large monitorTurn off audio, video, or images, because they find them distracting

13. So you should:Design for device independenceUse semantic page structureProvide media in multiple modalities (alternative text for non-text content )Choose legible, scalable fonts and color schemesLabel all form fieldsEnsure linked files are accessible

14. Common Design FlawsYou can control these things at the theme levelLittle or no semantic structureText in background imagesNo skip navigationNo :focus to go with :hoverNot enough color contrastNo link cue besides color

15. Demo and Discussion

16. Common Design Flaws(and how to fix them)Little or no semantic structureKiller for screen readers AND killer for search enginesEasy to see in text-only or outline modesUse hierarchical headings <h1>-<h6>, only one <h1> per pageUse 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 necessaryDrupal 7 will include a class, element-invisibleIn 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 imagesNo way to provide alt-text or semantic markupScreen readers and search engines are completely unaware of the textSome users may disable imagesIf 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 navigationScreen readers and keyboard-only users have to wade through links to get where they need to goInclude a link at the top of the page that jumps to hard-to-reach sections, for instance:Skip to navigationSkip to contentSkip to footerIf 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 :hoverKeyboard users don’t get visual cuesFor every :hover in your CSS, add a corresponding :focusa:hover, a:focus { color: red; text-decoration: underline; }

22. Common Design Flaws(and how to fix them)Not enough color contrastCheck individual color combos at WebAIM during design processCheck all colors with a report generator like Juicy Studio Accessibility ToolbarRecommended ratio is 4.5:1 for normal textAdjust the colors as necessary

23. Common Design Flaws(and how to fix them)No link cue besides colorUsers can’t tell where to click, resulting in confusion and frustrationUse 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 imagesMissing or problematic link textUnlabelled form fields (especially in search boxes)Dropdowns that aren’t keyboard accessibleFile attachments that aren’t accessible (especially PDFs)

25. Free Checkers and ToolsWAVE Toolbar for FF:wave.webaim.orgColor contrast:1. webaim.org/resources/contrastchecker2. Juicy Studio Accessibility Toolbar for FFColorblindness:http://colorfilter.wickline.orgLots more listed at WebAIM

26. How to self-evaluate your siteUse free accessibility checking toolsExamine outline and text-only modesBest way to see how screen readers and search engines understand your siteCheck heading structureCheck alt-text on imagesCheck link textTry using your site with keyboard onlyZoom text in and outRun 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:ZenGarlandDrupalCampLAAudience suggestions?

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

29. Where can I learn more?Practical discussions and guides:WebAIM: Web Accessibility in Mindwebaim.orgUC Resources for Designing Accessible Websiteswww.ucop.edu/irc/itaccessibility/resourcesAccessibility and Drupaldrupal.org/node/394094