a11y conference talk: building an accessible wordpress theme

Download A11y Conference Talk: Building an Accessible WordPress Theme

Post on 23-Aug-2014




3 download

Embed Size (px)


Presentation at The Accessibility Conference 2014 by Sandy Feldman and Tom Auger, covering high-level audits and best practices to bring a theme in line with WCAG / AODA guidelines.


  • Building an Accessible WordPress Theme Sandy Feldman and Tom Auger
  • Sandy Feldman About building an accessible WordPress site
  • 2006
  • IE6 - frequently nominated for worst software ever written prizes
  • Making a site work with assistive technology makes the site better
  • 2007 content management system broke accessibility
  • 2014
  • Why WordPress?
  • Building an accessible WordPress site Choosing a theme Tweaking the php to make it better Keeping it accessible as its updated
  • Getting started. Whats a Theme?
  • Use the new filter and tag interface wordpress.org/themes/tag-filter/
  • underscores.me
  • |4 syllables, no information
  • Low skip link
  • Moved up
  • Take out the redundant
  • Keeping the content accessible
  • Toggle the toolbar
  • Use headings to structure content
  • use paste as text
  • supply alternative text for images
  • click here and read more
  • the "title" attribute
  • validator.w3.org
  • Use an accessible theme Its possible to tinker with the php to make the site better Keep the site semantic when you add content, either by writing semantic HTML or by using the WordPress wysiwyg Make sure link text makes sense out of context Write alt text for images
  • Tom Auger Twitter: @TomAuger Zeitguys inc
  • WordPress has an a11y Team make.wordpress.org/accessibility/
  • A11y Team Theme Audit make.wordpress.org/themes/guidelines /guidelines-accessibility/ Images Media, sliders, animations Headings Link text Keyboard navigation Contrast Skip Links Forms
  • Use the Theme Audit When Evaluating a theme Adapting a theme for clients Creating a base theme Contributing to the theme repository
  • Theme Images Audit No for decorative images Appropriate alt text for all theme Evaluation using simple decision tree dev.w3.org/html5/alt-techniques/#tree
  • Theme Media Use Audit No autoplay of videos, audio or animations This includes sliders Consider WCAG Guideline 2.2 (A): Provide users enough time to read and use content. Timing Adjustable (2.2.1) Pause, Stop, Hide (2.2.2) www.w3.org/TR/WCAG20/#time-limits
  • Theme Structure Audit H1 for page Title Headings for subsections Post titles in archives Widget titles
  • Theme Link Text Audit No bare URLs Avoid non-contextual read more
  • Accessible Read More Excerpt Read more about
  • Accessible the_content( 'Read more about ' . get_the_title() . '' ); codex.wordpress.org /Customizing_the_Read_More
  • Keyboard Navigation Audit Visual focus use CSS :focus Intuitive tab order No tabindex > 0 No accesskey defined
  • Theme Skip Links Audit Allow users to skip to content, navigation First keyboard focused item May be hidden initially but Must be visible to screen readers Must be visible on focus
  • Theme Contrast Audit Body text must meet WCAG AA contrast ratio (4.5 : 1) snook.ca/technical/colour_contrast /colour.html
  • Theme Forms Audit for each form control All content must be associated with a control (aria-describedby) Messages and errors must be accessible to screen readers
  • Form Plugins (with some degree of accessibility) Contact Form 7 (3.8.x) Visual Form Builder (Pro) Gravity Forms
  • Plugins? Joe Dolsons a11y plugin Zeitguys Accessibility Bar plugin (mid 2014) long-description-for-image-attachments
  • Thank You! Bonus: https://github.com/Zeitguys/a11y
  • Bonus Items for Slideshare
  • Theme Customization Best Practice Parent + Child Theme Choose (an accessible) Parent theme Create a Child theme Make modifications in Child theme
  • Create a Child Theme Install a suitable Parent theme Create a new directory in wp- content/themes Add style.css to this directory Activate the Child theme Dont delete the Parent theme!
  • Basic childtheme/style.css /* Theme Name: My Child Theme Description: A short description of what your theme is all about. Author: Tom Auger Template: twentyfourteen */ @import url("../twentyfourteen/style.css"); codex.wordpress.org/Child_Themes
  • Addressing Content Challenges WCAG / AODA compliance easily broken by poor content formatting Design integrity compromised Admin User Experience
  • TinyMCE Customizations Block formats Remove / add buttons from ribbon Custom CSS styles Create custom block button www.tinymce.com/wiki.php/Configuration
  • Editor Block Formats
  • Simplify for the Admin User No H1 Remove formats that break design Remove temptation to use blocks as style
  • tiny_mce_before_init add_filter( 'tiny_mce_before_init', set_mce_block_formats' ); // function set_mce_block_formats( $settings ){ $settings['block_formats'] = Paragaph=p; Heading=h2; Subheading=h3; Minor Heading=h4; return $settings; } codex.wordpress.org/Plugin_API /Filter_Reference/tiny_mce_before_init
  • Guiding Admin Content
  • Post Meta Plugins such as ACF (Advanced Custom Fields) add_meta_box() codex.wordpress.org/Function_Reference /add_meta_box
  • Hiding Screen Reader Text Avoid display:none; visibility:hidden; width:0; height:0; text-indent:-9999px; (RTL fail) clip: rect(1px, 1px, 1px, 1px); (Webkit scrollbar)
  • Everyones Got an Opinion WebAIM: webaim.org/techniques/css/invisiblecontent A11yProject: a11yproject.com/posts /how-to-hide-content Snook: snook.ca/archives/html_and_css /hiding-content-for-accessibility AdaptiveThemes: adaptivethemes.com/using- css-clip-as-an-accessible-method-of-hiding- content
  • How WordPress Does It wp-admin/css/common.css .screen-reader-text { position: absolute; margin: -1px; padding: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  • How TwentyFourteen Does It twentyfourteen/style.css .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; }
  • Visual focus of Hidden Items .screen-reader-text:focus { clip: auto; display: block; font-size: 14px; font-weight: bold; height: auto; line-height: normal; position: absolute; left: 5px; top: 5px; text-decoration: none; text-transform: none; width: auto; z-index: 100000; }