AccessibleWeb@U — June 25, 2009

Note: Someone left a red water bottle with an Earthwise sticker on it in the Auditorium at the end of our meeting. Dan Comden (danc@u.washington.edu) has the water bottle if it is yours.

• Special thanks to Christine Tawatao and University Libraries for making the Allen Auditorium available for our meetings. The Auditorium is reserved for AccessibleWeb@U the fourth Thursday of each month, 11:30am to 1:00pm.
• Projects
  • Dylan looking into use of ARIA in pulldown menus. Hopes to be able to report by Fall
  • Dan interested in testing scripting packages, such as menus, with JAWS

Making Accessible Drupal Sites

Rick Ells UW Technology

About Drupal

• Standards Based; xhtml, css, PHP
• Large user community
• Many templates to choose from
• Many modules to choose from

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

More Cool

• Information management
  • Categories
  • Taxonomies
  • Keywords
• Navigation structures generated for you
• Easy to add Web2.0 features

Even More Cool

• Authentication, roles
• Workflow
• Customization based on default designs, templates, styles
  • Intercepts, overrides, and subthemes

Being Accessible

WCAG 2.0 Guidelines

• Perceivable
• Operable
• Understandable
• Robust

Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/

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

Steps to Accessible Design

1. Install
2. Update
3. Select theme
4. Add modules
5. Build blocks
6. Apply your design

1. Install

• Installing Drupal http://www.washington.edu/computing/web/publishing/drupal.html
• SQL Database http://www.washington.edu/computing/web/publishing/mysql.html

2. Update

• Updates are essential
• Each time the administrator logs in Drupal will display messages of needed updates
• Do them promptly

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, which is why so many themes are available

Managing Themes

Accessible Themes

Box_grey Theme, Blue Bars Theme, Blue Lake Theme, Celju Theme, Clean Theme, CWS Theme

The Eleven Most Accessible Drupal 6 Themes http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_6_themes

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

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

Managing Modules

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"

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

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

Color Scheme

Color Selection

• Consider the colorblind; about 9% of men and 1% of women are colorblind in some way
• Wickline Colorlab makes it easy to see hour your color set will appear to people with different kinds of colorblindness — http://colorlab.wickline.org/colorblind/colorlab/

Color Scheme

Contrast

• 5:1 contrast ratio between text and background is recommended
• Paciello Group Color Contrast Analyzer can be used to quickly evaluate color combinations — http://www.paciellogroup.com/resources/contrast-analyser.html
• Minimum Color Contrast Ratio — http://www.joedolson.com/articles/2008/12/minimum-color-contrast-ratio-changed-in-wcag-2/

Maintaining Accessibility

Do

• Validate all modifications — be sure everything is 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

Don't

• Invent non-semantic elements (divs) when appropriate semantic elements are available
• Use fixed sizes
• Reduce contrast for artistic effect
• Put essential content exclusively in media
• Have visual media without captioning

Drupal Accessibility Activity

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

Evaluating Your Drupal Site

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

Discussion

• Editors available for Drupal
  • A variety of editors are available as modules that are easy to add to Drupal.
  • FCKedit — http://drupal.org/project/fckeditor
  • YUI Ric Text Editor ‐ http://drupal.org/project/yui_editor