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.

1. Building an Accessible
WordPress Theme
Sandy Feldman
and Tom Auger

2. Sandy Feldman
About building an
accessible WordPress site

3. 2006

4. IE6 - frequently nominated for
“worst software ever written” prizes

5. Making a site work with
assistive technology
makes the site better

6. 2007
content management system
broke accessibility

7. 2014

8. Why WordPress?

9. Building an accessible
WordPress site
• Choosing a theme
• Tweaking the php to make it better
• Keeping it accessible as it’s updated

10. Getting started.
What’s a Theme?

11. Use the new filter and tag interface
wordpress.org/themes/tag-filter/

12. underscores.me

13. |4 syllables, no information

14. Low skip link

15. Moved up

16. Take out the redundant <h1>

17. Keeping the
content accessible

18. Toggle the toolbar

19. Use headings to
structure content

20. use “paste as text”

21. supply alternative
text for images

22. “click here”
and
“read more”

23. the "title" attribute

24. validator.w3.org

25. • Use an accessible theme
• It’s 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

26. Tom Auger
Twitter: @TomAuger
Zeitguys inc

27. WordPress has an a11y Team
make.wordpress.org/accessibility/

28. A11y Team Theme Audit
make.wordpress.org/themes/guidelines
/guidelines-accessibility/
•Images
•Media, sliders, animations
•Headings
•Link text
•Keyboard navigation
•Contrast
•Skip Links
•Forms

29. Use the Theme Audit When…
• Evaluating a theme
• Adapting a theme for clients
• Creating a base theme
• Contributing to the theme repository

30. Theme Images Audit
• No <img> for decorative images
• Appropriate alt text for all theme <img>
• Evaluation using simple decision tree
dev.w3.org/html5/alt-techniques/#tree

31. 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

32. Theme Structure Audit
• H1 for page Title
• Headings for subsections
– Post titles in archives
– Widget titles

33. Theme Link Text Audit
• No “bare URLs”
• Avoid non-contextual “read more”

34. Accessible “Read More” Excerpt
<?php the_excerpt() ?>
<a class="moretag"
href="'. get_permalink( get_the_ID() ) . '">
Read more
<span class="screen-reader-text">
about <?php the_title()?>
</span>
</a>

35. Accessible <!-- more -->
the_content(
'Read more
<span class="screen-reader-text">
about ' . get_the_title() .
'</span>'
);
codex.wordpress.org
/Customizing_the_Read_More

36. Keyboard Navigation Audit
• Visual focus – use CSS :focus
• Intuitive tab order
• No ‘tabindex’ > 0
• No ‘accesskey’ defined

37. 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

38. Theme Contrast Audit
• “Body” text must meet WCAG AA
contrast ratio (4.5 : 1)
snook.ca/technical/colour_contrast
/colour.html

39. Theme Forms Audit
• <label> for each form control
• All content must be associated with a
control (aria-describedby)
• Messages and errors must be accessible to
screen readers

40. Form Plugins
(with some degree of accessibility)
• Contact Form 7 (3.8.x)
• Visual Form Builder (Pro)
• Gravity Forms

41. Plugins?
• Joe Dolson’s a11y plugin
• Zeitguys Accessibility Bar plugin (mid
2014)
• long-description-for-image-attachments

42. Thank You!
Bonus:
https://github.com/Zeitguys/a11y

43. Bonus Items for Slideshare

44. Theme Customization Best Practice
“Parent + Child Theme”
• Choose (an accessible) Parent theme
• Create a Child theme
• Make modifications in Child theme

45. 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
• Don’t delete the Parent theme!

46. 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

47. Addressing Content Challenges
• WCAG / AODA compliance easily broken
by poor content formatting
• Design integrity compromised
• “Admin User Experience”

48. TinyMCE Customizations
• Block formats
• Remove / add buttons from ribbon
• Custom CSS styles
• Create custom block button
www.tinymce.com/wiki.php/Configuration

49. Editor Block Formats

50. Simplify for the Admin User
• No H1
• Remove formats that break design
• Remove temptation to use blocks as style

51. “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

52. Guiding Admin Content

53. Post Meta
• Plugins such as ACF (Advanced Custom
Fields)
• add_meta_box()
codex.wordpress.org/Function_Reference
/add_meta_box

54. 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)

55. Everyone’s 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

56. 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;
}

57. How TwentyFourteen Does It
twentyfourteen/style.css
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}

58. 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;
}