Friday, March 28, 2014

Accessibility and Inclusivity

On Tuesday, March 25, Dan, Terrill, and I presented at the TechConnect conference here on campus at the University of Washington. We walked through the following material:

Accessible Technology at the UW

Visit the Accessible Technology at the UW site and learn all about what is happening at the UW in making technology work for everyone.

The Basic Methods for Accessible Websites

  1. Validated HTML
  2. Semantic element types (headings, paragraphs, lists, tables, etc.)
  3. Headings and sub-headings used hierarchically
  4. ALT texts on images, where meaningful
  5. Page titles
  6. Meaningful link texts
  7. Form labels
  8. Table headers and captions
  9. Captioning on videos

Useful Tools

Websites

Download-ables and Plug-in-ables

Accessibility Problem Examples

Problems With Focus Indicator

No Focus Indicator

Reverse Focus Indicator (for mouse)

Mystery Focus Indicator

  • ESPN — http://espn.go.com/

Enhanced Focus Indicator

Skipnav

Tab Order

  • Olympic College: Unexpected, goes to central pane first — http://www.olympic.edu/index.htm
  • Yahoo; Left nav first, skips top nav:  — (due to cursor in search box by default, something to discuss, is this a good technique? On most pages, probably not, but on portal/search pages, it's probably appropriate, esp. with proper form label in place) — https://www.yahoo.com/
  • Oklahoma State University: Lots and lots and lots of menu items to tab through — http://go.okstate.edu/

Contrast and color

  • Yahoo: High contrast by default (except purple nav bar) — https://www.yahoo.com/
    Oklahoma State University — http://go.okstate.edu/
  • Martinsburg Police Department: Too much contrast? Does it hurt? — http://www.martinsburgpd.org/
  • CSS Teagarden: Where is nav, where is content? — http://csszengarden.com/213/
  • CSS 204: Foreground vs background problems — http://www.csszengarden.com/204/<</li>
  • CSS 186: Fade to invisible — http://www.csszengarden.com/186/

Menus

Default Text Size

Headings

Monday, October 14, 2013

Building an Accessible CMS Site

Notes from the September 25, 2013 AccessibleWeb@U meeting

  • How a CMS Works
    • Content management system (CMS) engine, such as Drupal or WordPress
    • A database, often MySQL
    • A theme to structure and present content
    • Plug-ins to add functionality
  • Accessibility Principles
    • Perceivable
    • Operable
    • Understandable
    • Robust
    • From Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/
  • Goals
    • Create an inclusive University
    • Building a site that works with assistive technologies
    • NVDA Screen Reader - http://www.nvaccess.org/
    • FireVox - http://firevox.clcworld.net/
    • VoiceOver - http://www.apple.com/accessibility/osx/voiceover/
    • Building a site that is intelligible to people using assistive technologies
  • Methods for building accessible CMS sites
    • Adhere to standards
    • Use semantic elements
    • Follow WCAG 2.0
    • Apply Accessible Rich Internet Applications (ARIA) attributes
    • Use ECMA Standard Scripting
    • Use Progressive enhancement methods in scripting
  • Page Design Access Blockers - Addressed by theme designer
    • Contrast and luminosity
    • Color issues
    • Font legibility
    • Reading order
    • Scalability (user-scalable=yes)
  • Content Access Blockers - Addressed by the people who enter content into the pages
    • No page <title/>
    • No heading elements <h1/>…<h6/>
    • No link element text or title=“” attributes
    • No form element label elements
    • No caption elements and <table/> summary attributes
    • No scope and id attributes to relate column and row headers to data
    • No useful alt text for images, or are missing the alt attributes altogether
    • No captions for videos
  • CMSs, Out of the Box, Start With Good Accessibility
    • WordPress http://make.wordpress.org/themes/guidelines/guidelines-accessibility/
    • Drupal https://drupal.org/about/accessibility
    • Understand what they have done
    • Don’t mess it up
  • Themes
    • Pre-built set of code that defines page layout, colors, functionality, fonts and font sizes, and navigation
    • Many are built on frameworks such as Bootstrap, which provide libraries of code
  • Examples of Accessible Themes
    • Blaskan – http://wordpress.org/themes/blaskan
    • Badeyes Skeleton – http://www.badeyes.com/services/
    • Ambrosia – http://wordpress.org/extend/themes/ambrosia
    • Scrapbook – http://wordpress.org/extend/themes/scrapbook
    • Twenty-Twelve Child Theme – http://daniemon.com/blog/accessible-wp-theme-twenty-twelve/
    • Examine them closely, perfection has not yet been achieved
  • Frameworks
    • Themes are generally built on existing frameworks, which may or may not have been created with accessibility in mind
    • Example frameworks:
      • Bootstrap - http://getbootstrap.com/
      • Skeleton Boilerplate - http://www.getskeleton.com/
      • Whiteboard - http://whiteboardframework.com/
    • Most frameworks are created without much consideration of accessibility
      • Non-semantic coding
      • Forms without labels
  • Give Content Maintainers an Environment That Lets The Do The Right Thing
    • Carleton CMS Training video on accessibility considerations when entering content in the Carleton WordPress site - http://www.youtube.com/watch?v=H5N57Kwjx9s
  • Resources
    • Accessibility With WordPress - http://www.slideshare.net/joedolson/accessibility-with-wordpress
    • Accessibility, WordPress Codex - http://codex.wordpress.org/Accessibility
    • 25 Ways to Make Your WordPress Site More Accessible -  http://wpmu.org/25-ways-to-make-your-wordpress-website-more-accessible/
    • WP Accessibility Plug-in http://wordpress.org/plugins/wp-accessibility/