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.
2.
3.
4.
5.
6.
Install
Update
Select theme
Add modules
Build blocks
Apply your design
1. Install
• Installing Drupal
http://www.washington.edu/computing/web/publishing/drupal.ht
ml
• SQL Database
http://www.washington.edu/computing/web/publishing/mysql.ht
ml
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
Managing Themes
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
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
Color Scheme
• Contrast: 5:1 or more for
text:background contrast
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
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
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_dru
pal_6_themes
• Accessibility Best Practices in Drupal Theming
http://szeged2008.drupalcon.org/program/sessions/accessibility-bestpractices-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