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/