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.
Citation preview
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
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