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 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
Posted by at No comments:
Subscribe to: Posts (Atom)