Thursday, June 25, 2009

Making Accessible Drupal Sites

AccessibleWeb@U — June 25, 2009

  • 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

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
  • SQL Database

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

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 —

Color Scheme


  • 5:1 contrast ratio between text and background is recommended
  • Paciello Group Color Contrast Analyzer can be used to quickly evaluate color combinations —
  • Minimum Color Contrast Ratio —

Maintaining Accessibility


  • 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


  • 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 —
  • The Eleven Most Accessible Drupal 6 Themes —
  • Accessibility Best Practices in Drupal Theming —

Evaluating Your Drupal Site

  • WAVE —
  • Functional Accessibility Evaluator —
  • WebAnywhere —
  • Yellowpipe Lynx Viewer —
  • Wickline Colorlab —
  • Paciello Group Color Contrast Analyzer —


  • Editors available for Drupal
    • A variety of editors are available as modules that are easy to add to Drupal.
    • FCKedit —
    • YUI Ric Text Editor ‐