So how do i know if my wordpress website is accessible - WordPress Accessibility Day 2020
•
2 likes•1,640 views
Testing websites for accessibility can be a daunting undertaking if it's not something you're familiar with. The WCAG 2.1 accessibility guidelines can be hard to follow. But actually, many aspects of digital accessibility are not that complicated. In this talk I move away from the impenetrable guidelines, and introduce a simpler series of yes/no questions that anyone can answer about their own website. In the time available it can't cover every single potential accessibility problem, but instead I focus on some of the most common, and most serious accessibility issues that I've found when reviewing websites. Where possible, I'll also talk about how you can fix any issues founds.
Report
Share
So how do i know if my wordpress website is accessible - WordPress Accessibility Day 2020
- 1. So, how do I know if my WordPress website is accessible? Photo by Kari Leigh London Graham Armfield Coolfields Consulting
- 2. A bit about me 2 I’m a… Web Accessibility Consultant WordPress Developer @coolfields Photo by Kari Leigh London coolfields.co.uk
- 3. Accessibility can help everyone Why is accessibility important?
- 4. What I’m going to cover Web Content Accessibility Guidelines (Version 2.1) published by the Web Accessibility Initiative of the World Wide Web Consortium A.K.A. WCAG2.1 http://www.w3.org/TR/WCAG21/ • A good resource for web accessibility • But it can be hard to interpret @coolfields
- 5. What I’m going to cover So instead, how about a simple yes/no checklist? Easy to check – with free tools @coolfields
- 6. Health warning In the time available I can only cover some common accessibility issues. But, if you can answer all these questions correctly, your site will be more accessible than many. 6@coolfields
- 7. Coolfields Consulting www.coolfields.co.uk Keyboard Interaction
- 8. Why keyboard accessibility is vital Some people can't use a mouse or trackpad or touch commands. They may rely on keyboards to use their machines - including browsing websites. Also, desktop/laptop screen readers are operated using keystrokes. 8@coolfields
- 9. Keyboard interaction You need to answer Yes to these two: 1) Can I easily see where keyboard focus is? 2) Can I easily access all parts of the site using the keyboard only? 9@coolfields
- 10. Visible keyboard focus 10 Clear keyboard focus everywhere.
- 11. Keyboard focus and interaction 11@coolfields Clear keyboard focus everywhere. And sub-navigation is keyboard accessible.
- 12. Keyboard interaction 12 Hovering over navigation link - shows highlight and submenu. Tabbing to the same link - no focus indication, no sub-menu.
- 13. Keyboard interaction 14 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
- 14. Keyboard interaction 15 Many WordPress websites use 'lightbox' plugins. They show a full- size version of the image when the smaller image is clicked on, or actioned with keyboard.
- 15. Keyboard interaction 16 Img of Lightbox But when this lightbox opens, keyboard focus remains on the page below
- 17. Keyboard interaction 18 When language selector opens, keyboard focus is still on underlying screen.
- 19. Can you answer Yes to this one? 5) Are your links obviously links? Links 20@coolfields
- 20. Making links look like links 21@coolfields Users who are colour blind or who have poor vision may struggle to see links with no underline.
- 21. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 22
- 22. Are your links meaningful? Which version is easier for a screen reader user? Elements list in NVDA screen reader
- 23. 24
- 24. Are your blog links meaningful? 25 1 1 2 3 4 5 6 7 2 3 4 5 6 7 Do all these links make sense to a screen reader user?
- 25. Coolfields Consulting www.coolfields.co.uk Images and video
- 26. Images Can you answer Yes to this? 7) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 27@coolfields Using the Wave browser extension.
- 27. Images Setting alternate text in WordPress classic editor 28@coolfields Best to set alternative text, even if you're supplying a caption too.
- 28. Setting alternate text in WordPress Gutenberg Images 29@coolfields
- 29. When an image is a link, it's best to have the link destination as the alternate text. In this WP theme, the featured images do this automatically. Images that are links 30
- 30. Images that are links 31 1 1 2 2 Here, the featured image alternate text does not describe the link destination.
- 31. Can you answer yes to this? Videos 32 8) Do all the videos have captions? @coolfields Captions shown on YouTube videos Deaf people rely on captions, but many others use them too when watching videos
- 32. Coolfields Consulting www.coolfields.co.ukPhoto: thepicturedrome Signposting Content
- 33. Signposting content Can you answer Yes to this one? 9) Are the page titles unique and meaningful? 34@coolfields
- 34. Page titles Getting them right in WordPress is usually easy… 35@coolfields Page title is the first thing that's read out when screen readers arrive at new page. Helps users know they're in the right place.
- 35. Signposting content Can you answer Yes to this one? 10) Do pages have appropriate headings and subheadings? 36@coolfields
- 36. Using headings 37 Here, the headings are being indicated when I use the Wave browser extension. It's also highlighting the heading level.
- 37. Using headings 38 Headings list shown by NVDA screen reader Headings are used as a navigation feature Note: NVDA exposes the heading hierarchy
- 38. Signposting content Can you answer Yes to all these? 11) Are landmarks being used correctly? 39@coolfields
- 39. Landmarks Banner 40 Navigation Footer Main Content Sidebar Landmarks are used by many screen reader users to jump to parts of the page that may be of interest.
- 40. Landmarks from HTML5 elements <header> 41 <nav> <footer> <main> <aside> Most websites now use HTML5 elements, and these set appropriate landmarks if they are used correctly.
- 41. Testing for landmarks Here there is no Main landmark.
- 43. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 44@coolfields
- 44. Normal size Note: Resizing and zooming are not the same thing Resizing text 45@coolfields Larger size
- 46. Text Can you answer No to this one? 13) Is any of the text fully justified? 47@coolfields
- 47. Text justification 48 Left aligned text Fully justified text can make life very difficult for some dyslexics - around 8 - 10% of the population. Fully justified text "Rivers of white space" effect
- 48. Coolfields Consulting www.coolfields.co.ukPhoto: AlecCouros User Input
- 49. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 50@coolfields
- 50. User input 51 new wave screenshot Tested with Wave. Labels are important for screen reader users - so they know what the fields are for.
- 51. User input 52
- 53. Colour contrast Can you answer Yes to this one? 15) Is the colour contrast sufficient? 54
- 55. Colour contrast 56 The aXe browser extension is useful for testing colour contrast.
- 56. Useful resources 1 Colour Contrast Analyzer • https://paciellogroup.com/resources/contrastanalyser Wave Testing Tool - Chrome and Firefox extension • https://wave.webaim.org/extension/ aXe Testing Tool - Chrome, Firefox and Edge extension • https://www.deque.com/axe/browser-extensions/ 60
- 57. Useful resources 2 Getting alternate text right • https://coolfields.co.uk/2010/11/alternate-text-for-images/ Coding forms for accessibility • https://coolfields.co.uk/tag/forms/ Creating text for screen readers only • https://coolfields.co.uk/2016/05/text-for-screen-readers- only-updated/ 61
- 58. Some things I didn't cover • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page has loaded • Timeouts • Data tables 62@coolfields • Modals • Using CAPTCHAs • Skip links • Indicating language • Automated page refreshing • Accordions and tab panels
- 59. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 63
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 many WordCamps inc London, Sheffield, Edinburgh, Lancaster, Manchester, 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.
- Something like 20-25% of the population have some kind of different access needs when it comes to websites. Whether it's blindness, poor vision, colour blindness, dyslexia, ADHD, autism, deafness, or people who are just getting old.