So, How Do I Know if my WordPress Website is Accessible?
•
17 likes•16,169 views
Slides for a presentation I gave originally to WordCamp London on Saturday 23rd November 2013 and at many subsequent Wordcamps and WordPress meetups. The most recent occasion being WordPress Leeds on April 26th 2017 for which I revamped some of the slides to remove some outdated examples. The WCAG 2 guidelines provide a comprehensive list of best practices for creating accessible websites. But there is a lot of information and the success criteria can be a bit impenetrable in places. I've distilled down some common accessibility issues into a series of 16 yes/no questions that anyone can ask about their own website. If you can answer these questions correctly, your website will be more accessible than many. The presentation poses the questions and shows some examples of problems that accessibility testers find, as well as pointing out some of the best practices to achieve good web accessibility. Visit my website for some useful posts on accessibility techniques: http://www.coolfields.co.uk
Recommended
More Related Content
Similar to So, How Do I Know if my WordPress Website is Accessible?
Similar to So, How Do I Know if my WordPress Website is Accessible? (20)
More from Graham Armfield
More from Graham Armfield (20)
Recently uploaded
Recently uploaded (20)
So, How Do I Know if my WordPress Website is Accessible?
- 1. Coolfields Consulting www.coolfields.co.uk @coolfields So, how do I know if my WordPress website is accessible? Slides at: tinyurl.com/wpa001 Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
- 2. A bit about me 2 I’m a… • Web Accessibility Consultant • WordPress Developer Photo by Mike Pead @coolfields
- 3. What I’m going to cover Web Content Accessibility Guidelines (Version 2) published by the Web Accessibility Initiative of the World Wide Web Consortium http://www.w3.org/TR/WCAG20/ A.K.A. WCAG2.0 • Good resource for accessibility • But can be hard to interpret @coolfields
- 4. What I’m going to cover So instead, how about a simple yes/no checklist? Easy to check – with free tools @coolfields
- 5. Health warning In time available I can only cover some common accessibility issues. But, if you can answer these questions correctly, your site will be more accessible than many. 5@coolfields
- 7. Keyboard interaction You need to answer Yes to these: 1) Can I easily access all parts of the site with the keyboard only? 2) Can I easily see where keyboard focus is? 7@coolfields
- 10. Keyboard interaction CSS a:hover {background:#fff, color:#000} a:hover, a:focus {background:#fff, color:#000} Don't do this: a:focus {outline:none} jQuery $(selector).hover(inFunction,outFunction); $(selector).focusin(inFunction); $(selector).focusout(outFunction); 10@coolfields
- 11. Keyboard interaction 11@coolfields Using twenty fourteen theme
- 12. Keyboard interaction 12 You need to answer Yes to these: 3) Can I easily access all functionality with the keyboard only? 4) Does the keyboard tab order make sense? @coolfields
- 13. Keyboard interaction 13 Img of Lightbox When lightbox opens, focus remains on page below
- 15. Links Can you answer Yes to this one? 5) Are the links obviously links? 15@coolfields
- 16. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 16 Elements list in NVDA
- 17. Links 17 Elements list in NVDA
- 18. Links 18 Elements list in NVDA
- 20. Media Can you answer Yes to this? 7) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 20@coolfields
- 21. Can you answer yes to this? Media 21 8) Do all videos have captions? @coolfields Captions shown on YouTube videos
- 22. Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content Photo: thepicturedrome
- 23. Signposting content Can you answer Yes to all these? 9) Are the page titles unique and meaningful? 10) Do pages have appropriate headings and subheadings? 11) Are ARIA landmark roles present? 23@coolfields
- 24. Using headings 24 Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Heading are used as a navigation feature
- 26. ARIA landmark roles <header role="banner"> 26 <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary">
- 28. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 28@coolfields
- 29. Normal size NB: Resizing and zooming are not the same thing Text 29@coolfields Larger size
- 30. Text Can you answer No to this one? 13) Is any of the text fully justified? 30@coolfields
- 31. "Rivers of white space" Text 31 Left aligned textFully justified text
- 32. Coolfields Consulting www.coolfields.co.uk @coolfields User Input Photo: AlecCouros
- 33. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 33@coolfields
- 34. User input 34
- 36. Colour & shape Can you answer Yes to this one? 15) Is the colour contrast sufficient? 36
- 39. Colour & shape Can you answer No to this one? 16) Is meaning conveyed by colour or shape only? 39@coolfields
- 40. Colour & shape 40 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields
- 41. Useful resources 1 Colour Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar/Website • Chrome and Firefox add-on Browser Tools • Chrome – aXe, Accessibility Develop Tools • Firefox – Firebug inspect element 41
- 42. Useful resources 2 Getting alternate text right • http://owl.li/pGtKC Coding forms for accessibility • http://owl.li/pDLMQ Creating text for screen readers only • http://owl.li/qzOGj 42
- 43. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 43
- 54. Some things I didn't cover • Links that open new windows/panels • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page loaded • Timeouts • Data tables 54@coolfields • Keyboard traps • CAPTCHAs • Skip links • Alternate navigation • Indicating language • Triggering actions • Automated page refreshing • PDFs
Editor's Notes
- I work with organisations to help them improve the accessibility of their digital offerings. Do accessibility testing and guide designers and developers in solutions to the issues found. WordPress developer – have built many accessible websites using WordPress. I've delivered presentations to WordCamps in London, Sheffield, Edinburgh, Lancaster, Bournemouth – and a number of WordPress meetup groups. This is me in Sheffield a couple of years ago. The presentation is called So, How Do I Know if My WordPress Website is Accessible and focusses on easy accessibility tests that you can do on your own WordPress website. If you've not seen me do that one – and I know that some of you have - the slides are still on Slideshare , and the deck has been viewed over 12,000 times now.