Themes, Plugins and Accessibility
•
2 likes•1,186 views
There are over 2000 WordPress themes available on the WordPress theme repositiry. But only a small number are fully accessible. Yet the accessibility guidelines available in the WordPress codex aren't hard to follow. And there is a new 'accessibility ready' tag that can be applied to themes that pass the extra accessibility test carried out when themes are reviewed. This presentation looks at the accessibility part of the WordPress theme review process and describes what needs to be done to help a theme pass the test. Even if you're not creating themes for the WordPress repository, but just creating them for your own website, or for a client, this presentation could be useful.
Report
Share
Themes, Plugins and Accessibility
- 1. Themes, Plugins and Accessibility Coolfields Consulting www.coolfields.co.uk @coolfields Graham Armfield graham.armfield@coolfields.co.uk @coolfields
- 2. A bit about me 2 I’m a… • Web Accessibility Consultant • WordPress Developer Photo by Mike Pead
- 3. What I’m Going to Cover • Why accessibility matters • WP theme review process and the 'accessibility-ready' tag • Plugins and accessibility 3
- 4. Why is Accessibility Important? Coolfields Consulting www.coolfields.co.uk @coolfields What all the fuss is about?
- 5. Why accessibility is important • More people than you think have disabilities or impairments • Populations are growing older • Those two groups combined have significant spending power • There are legal frameworks • And, morally it’s the right thing to do 5
- 6. WordPress for everyone? http://memeburn.com/2013/05/matt-mullenweg-on-how-open-source-is-democratising-the-web/ 6
- 7. Theme reviews and accessibility Coolfields Consulting www.coolfields.co.uk @coolfields
- 8. Coolfields Consulting www.coolfields.co.uk @coolfields Themes • for us • for our clients • for WordPress
- 9. Theme review guidelines 9 http://codex.wordpress.org/Theme_Review
- 11. The 'accessibility-ready' tag 11 'Official' Version (soon to be updated): http://make.wordpress.org/themes/guidelines/guidelines-accessibility/ Guide for reviewers: http://make.wordpress.org/accessibility/theme-accessibility-guide-for-reviewers/
- 12. Why 'accessibility-ready'? • A website's accessibility is not just down to the theme. • Admins add plugins… • Then they let content authors loose on it… 12
- 13. The 'accessibility-ready' sections: • Images • Media • Headings • Link text • Keyboard navigation • Colour contrast 13 • Skip links • Forms • tabindex • accesskey • Popups
- 14. Images • decorative • alt attributes 14
- 15. Media • no auto start without user action • includes: audio, video, sliders, carousels 15
- 16. Headings • semantic elements – not just for presentation • must use a 'reasonable' html heading structure • subsections defined by theme must use headings – eg widget titles, post titles, etc 16
- 17. Link text • must supply context • no bare urls 17
- 18. Keyboard navigation • keyboard focus must be visible everywhere • dropdown menus • intuitive (tab order) • tabindex? – use only 0 or -1 • accesskey – do not use 18
- 19. Colour contrast • background/foreground • WCAG 2.0 ratio - algorithm • theme colour schemes (http://www.paciellogroup.com/resources/contrastanalyser/) 19
- 20. Skip links • direct to content • direct to navigation • first focusable element(s) on a page 20
- 21. Forms • explicitly linked labels • error messages reachable by screen readers 21
- 22. Popups • warn users first 22
- 23. How many accessible themes? 23 2,751 themes in repository (as at 15th Sep 2014) 7 results for 'accessibility' and 8 results for 'accessible' and 13 results for 'accessibility-ready'
- 24. WordPress has it's critics 24 http://mor10.com/accessibility-ready-tag-required-wordpress-themes/ Simone - http://wordpress.org/themes/simone
- 25. WordPress has it's critics 25 http://wptavern.com/wordpress-themes-suck-at-accessibility-its-time-to-fix-it
- 26. An accessible theme author writes… http://davidakennedy.com/2014/07/08/accessible-wordpress-theme-lessons/ 26
- 27. Coolfields Consulting www.coolfields.co.uk @coolfields Plugins and accessibility
- 28. So what about plugins? • There is a plugin review process. • But no mention of accessibility. • Could there be an accessibility review? • Should there be? 28
- 29. Can plugins affect accessibility? Some examples: • Slider/carousel plugins • Lightbox plugins • Form generator plugins 29
- 30. Slider/carousel plugin example 30 Can I stop the slider using the keyboard? Buttons or links? And do they label their purpose? Can I attach alternate text to the images?
- 31. Lightbox plugin example 31 Can I attach alternate text to the large images? When lightbox opens, focus remains on page below
- 32. Form plugin example 32 Are these labels linked to input fields? Do screen reader users get to hear these error messages?
- 33. So plugins can affect accessibility Plugin authors should sensibly follow the theme accessibility guidelines, to avoid spoiling the accessibility of WordPress websites. 33
- 34. Remember… Every accessibility step you take makes the web easier for someone. Please take your next step soon. 34
- 35. Thanks for listening graham.armfield@coolfields.co.uk @coolfields 35
Editor's Notes
- All decorative images MUST be included using CSS. Where theme authors add images to template markup, authors MUSTincorporate an appropriately used alt attribute or the means to provide one. During the audit, a simple alt text decision tree is used to check whether images are using the alt attribute appropriately.
- Media resources must NOT auto start or change without user action as a default configuration. This includes resources such as audio, video, or image/content sliders and carousels. An important addition to this would be to provide a way to stop the slider/video etc.
- Be wary of having multiple levels of H1 etc – best to nest them sensibly. Theme templates should use a reasonable HTML heading structure — including the use of heading elements for page sub-sections. Heading markup must NOT be used for presentational purposes. Heading elements for structure MAY be positioned off-screen as long as this is not at the expense of providing good, visual, structure. Specifically, sub-sections defined by your theme MUST use heading elements. This includes wrapping your post title in a heading when used in an article context and wrapping widget titles in headings.
- Links MUST avoid repetitive non-contextual text strings such as ‘read more…’ and should also also make sense when taken out of context. Bare urls must NOT be used as links. Context-specific text MAY be positioned off-screen. The core-defined ‘read more’ links fall under this guideline. You can use filters to replace these links. The post title should generally be used in addition to the normal directive text. Can use hidden text
- Theme authors MUST provide visual keyboard focus highlighting in navigation menus and for form fields, submit buttons and text links. Navigation by keyboard should also be intuitive and effective. Focus – at minimum it should be the same as the hover style, but consider making it more then the browser default. Dropdown menus must be operable by keyboard accesskey – can hijack keystrokes from AT
- Theme authors MUST ensure that all background/foreground color contrasts for plain content text are within the level AA contrast ratio (4.5:1) specified in the Web Content Accessibility Guidelines (WCAG) 2.0 for color luminosity. Unless a clearly labelled accessible color scheme is available within the theme, the default settings will be the only color scheme checked. If a theme offers multiple color schemes, only one scheme is required to pass these guidelines. Tools are available to help with this. See the Paciello Group contrast analyzer.