1. Making Accessible Drupal Sites Rick Ells UW Technology

2. About Drupal Standards Based; xhtml, css, PHP Large user community Many templates to choose from Many modules to choose from

3. Drupal Is Cool Centralized management –Templates and modules –Styles –Scripting Content creation, editing, and maintenance can be done without technical Web knowledge Changes in styles, layout can be done across the site without content maintainers involvement

4. …More Cool Information management –Categories –Taxonomies –Keywords Navigation structures generated for you Easy to add Web2.0 features

5. …Even More Cool Authentication, roles Workflow Customization based on default designs, templates, styles –Intercepts, overrides, and subthemes

6. Being Accessible WCAG 2.0 Guidelines Perceivable Operable Understandable Robust Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/

7. Accessible Design Efficiency Templates, stylesheets, modules can address many aspects of accessible design Content authors and editors do not have to know as much about… –Skip to content –Font sizing –Color choices –Labeling, Alt texts –Semantic markup –Page layout

8. Steps to Accessible Design 1.Install 2.Update 3.Select theme 4.Add modules 5.Build blocks 6.Apply your design

9. 1. Install Installing Drupal http://www.washington.edu/computing/web/publishing/drupal.ht ml http://www.washington.edu/computing/web/publishing/drupal.ht ml SQL Database http://www.washington.edu/computing/web/publishing/mysql.ht ml http://www.washington.edu/computing/web/publishing/mysql.ht ml

10. 2. Update Updates are essential Each time the administrator logs in Drupal will display messages of needed updates Do them promptly

11. 3. Select Theme Tables or tableless? –Tableless layouts best, especially if fluid Controllable with CSS Reading order can be independent of layout position Fluid sizing allows scaling by user as needed –Table layout not so good Imposes reading sequence Presentation only somewhat controllable with CSS –Nested tables bad Navigation nightmare Many theme design philosophies

12. Managing Themes

13. Accessible Themes Box_grey Theme Blue Bars Theme Blue Lake Theme Celju Theme Clean Theme CWS Theme Flexible 2 Theme Genesis Theme Pluralism Theme Pixture Reloaded Theme Tendu Theme Zen Theme The Eleven Most Accessible Drupal 6 Themes http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_6_themes http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_6_themes

14. Theme Problems Non-nested use of h-elements –One h1 per page; main topic –h2; subtopics –h3; subsubtopics, etc. Inconsistencies among modules in how headings are done Deeply nested tables Not specifying default language

15. 4. Add Modules Hundreds of modules are available Offer a wide range of functionality –Editors, games, feeds, tools Most are standards compliant –Problem: Inconsistent implementations among modules Frequently updated

16. Managing Modules

17. 5. Build Blocks Blocks contain the code fragments for the different areas of your layout Blocks are placed in page regions Must be well-formed and strictly compliant to fit in context –Structured, semantic markup very desireable to get CSS to work How you add things like “Skip to Content”

18. Semantic Markup Use elements according to their logical type –Make headings with h-elements, not big bold paragraphs Properly nest h-elements –H1 is the main page topic, h2s are subtopics, h3s are subsubtopics, etc. Choose a content editor that makes semantic markup possible, even if you have to go into html mode sometimes

19. 6. Apply Your Design Use subtheme, intercept, and override methods –Never modify original templates, stylesheets, Customize templates Customize CSS –Layout adjustments –Color scheme –Font size –Contrast

20. Color Scheme Color Selection: Consider the colorblind

21. Color Scheme Contrast: 5:1 or more for text:background contrast

22. Maintaining Accessibility Do –Validate all modifications - strictly compliant –Choose editor that makes semantic HTML –Consider content flow in page structure –Add aids such as “Skip to Content” –Use semantic markup –Use scripting libraries and methods that support accessibility

23. Maintaining Accessibility Don’t –Invent non-semantic elements (divs) when appropriate semantic elements are available –Used fixed sizes –Reduce contrast for artistic effect –Put essential content exclusively in media –Have visual media without captioning

24. Drupal Accessibility Activity Accessibility Group http://groups.drupal.org/accessibility http://groups.drupal.org/accessibility The Eleven Most Accessible Drupal 6 Themes http://openconcept.ca/blog/mgifford/function_assessment_of_valid_dru pal_6_themes http://openconcept.ca/blog/mgifford/function_assessment_of_valid_dru pal_6_themes Accessibility Best Practices in Drupal Theming http://szeged2008.drupalcon.org/program/sessions/accessibility-best- practices-drupal-theming http://szeged2008.drupalcon.org/program/sessions/accessibility-best- practices-drupal-theming

25. Evaluating Your Drupal Site WAVE http://wave.webaim.org/ http://wave.webaim.org/ Functional Accessibility Evaluator http://fae.cita.uiuc.edu/ http://fae.cita.uiuc.edu/ WebAnywhere http://wa.cs.washington.edu http://wa.cs.washington.edu Yellowpipe Lynx Viewer https://addons.mozilla.org/en-US/firefox/addon/1944 https://addons.mozilla.org/en-US/firefox/addon/1944 Wickline Colorlab http://colorlab.wickline.org/colorblind/colorlab/http://colorlab.wickline.org/colorblind/colorlab/ Paciello Group Color Contrast Analyzer http://www.paciellogroup.com/resources/contrast-analyser.html http://www.paciellogroup.com/resources/contrast-analyser.html