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/