Thursday, July 23, 2009

Accessibility Talkabout

AccessibleWeb@U Meeting, July 23, 2009, Allen Auditorium

This meeting was a Talkabout; an agenda created on the spot (and modified dynamically) and discussions that go where they needed to go.

  • Reviewed new DOIT video about accessible design
    • Draft version is at http://uwtvftp.cac.washington.edu/3267DOIT?login=UWTVFTPUser:getmyfile
    • We felt it was a good overall statement of what accessible design is about
    • The final movie will be available through DOIT and UWTV soon
  • New UW templates are coming
    • The Web Council met this morning to hear progress on the new Web look for UW sites. HTML and CSS should be available by sometime in September.
  • Puzzle of site design development process: Why are accessibility considerations coming so late in the process?
    • Professional design process now often involves doing mockups with Photoshop, getting approval, then handing the Photoshop file to a coder
      • A variety of PSD to HTML conversion software and methods are available. See... http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
    • The method can work if both the designer and the coder are knowledgeable in accessibility and usability considerations in Web design
    • On the other hand, the process can produce fiat accompli designs that are hard to make usable or accessible
      • Narrow scope thinking in each step can miss opportunities for better design or deliver non-negotiable features to the next stage in the process
      • Design thinking insensitive to Web technology can result in features that can only be created with coding kludges (non-semantic markup, place-holder objects, complex div structures, etc.) which defeat accessibility and usability goals
      • Design conventions (habits) tend to be used to justify less usable/accessible design; it is safer to do what other people are doing (such as fixed width, fixed font-size, low contrast design) rather than use a goal-oriented criteria-based design process
      • Best design process has the following:
        • Clearly stated usability and accessibility goals, such as contrast, semantic markup, intelligible flow of content, and simple structure
        • Good, on-going communication between customer, designer, coder, and tester
        • People in the team with good knowledge of usability/accessibility who are empowered to direct attention to any problems and work with team toward good solutions
  • "Flexible Web Design: Creating Liquid and Elastic Layouts with CSS" by Zoe Gillenwater
    • Dylan is currently working his way through the book and recommends it
    • Flexible designs work better on a wider range of devices and allow the user more control of how they interact with the site, such as by scaling to an appropriate font size for their needs
  • Scripting issues and developments
    • Designing for mobile devices
      • Good structural flow helps; zooming in and out and scrolling around is time consuming
      • Buttons and other clickable areas should have sufficent size
      • Scripting needs to consider limited scripting feature set of many phones
        • Google is now offering the iPhone User Interface (http://code.google.com/p/iui/) to faciliate creating sites with Google features for iPhones
    • Progressive enhancement (PE) scripting has major accessibility benefits
      • PE methods usually involve scripting that operates on html content, such as displaying content in an unordered list as a menu. If the scripting cannot be read, the content is still available in the HTML, which everything can read
      • Yahoo User Interface library (developer.yahoo.com/yui) offers PE versions of many of its scripts for menus, collapsible lists, and other functionality
      • JQuery (jquery.com) has PE methods (for an example, see http://www.kelvinluck.com/2009/02/progressive-enhancement-with-jquery-example/
  • Future AccessibleWeb@U Meetings
    • August - No meeting currently planned
    • September - Libraries AccHack
    • October - Accessible scripting principles and examples
    • Social Networking with Accessiblity people

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