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
- Install
- Update
- Select theme
- Add modules
- Build blocks
- 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
No comments:
Post a Comment