Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next

2

Share

So how do i know if my wordpress website is accessible - WordPress Accessibility Day 2020

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.

Related Books

Free with a 30 day trial from Scribd

See all

So how do i know if my wordpress website is accessible - WordPress Accessibility Day 2020

  1. 1. So, how do I know if my WordPress website is accessible? Photo by Kari Leigh London Graham Armfield Coolfields Consulting
  2. 2. A bit about me 2 I’m a… Web Accessibility Consultant WordPress Developer @coolfields Photo by Kari Leigh London coolfields.co.uk
  3. 3. Accessibility can help everyone Why is accessibility important?
  4. 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. 5. What I’m going to cover So instead, how about a simple yes/no checklist? Easy to check – with free tools @coolfields
  6. 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. 7. Coolfields Consulting www.coolfields.co.uk Keyboard Interaction
  8. 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. 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. 10. Visible keyboard focus 10 Clear keyboard focus everywhere.
  11. 11. Keyboard focus and interaction 11@coolfields Clear keyboard focus everywhere. And sub-navigation is keyboard accessible.
  12. 12. Keyboard interaction 12 Hovering over navigation link - shows highlight and submenu. Tabbing to the same link - no focus indication, no sub-menu.
  13. 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. 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. 15. Keyboard interaction 16 Img of Lightbox But when this lightbox opens, keyboard focus remains on the page below
  16. 16. Keyboard interaction 17 Language selector
  17. 17. Keyboard interaction 18 When language selector opens, keyboard focus is still on underlying screen.
  18. 18. Coolfields Consulting www.coolfields.co.ukPhoto: Links
  19. 19. Can you answer Yes to this one? 5) Are your links obviously links? Links 20@coolfields
  20. 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. 21. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 22
  22. 22. Are your links meaningful? Which version is easier for a screen reader user? Elements list in NVDA screen reader
  23. 23. 24
  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. 25. Coolfields Consulting www.coolfields.co.uk Images and video
  26. 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. 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. 28. Setting alternate text in WordPress Gutenberg Images 29@coolfields
  29. 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. 30. Images that are links 31 1 1 2 2 Here, the featured image alternate text does not describe the link destination.
  31. 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. 32. Coolfields Consulting www.coolfields.co.ukPhoto: thepicturedrome Signposting Content
  33. 33. Signposting content Can you answer Yes to this one? 9) Are the page titles unique and meaningful? 34@coolfields
  34. 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. 35. Signposting content Can you answer Yes to this one? 10) Do pages have appropriate headings and subheadings? 36@coolfields
  36. 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. 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. 38. Signposting content Can you answer Yes to all these? 11) Are landmarks being used correctly? 39@coolfields
  39. 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. 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. 41. Testing for landmarks Here there is no Main landmark.
  42. 42. Coolfields Consulting www.coolfields.co.uk Text
  43. 43. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 44@coolfields
  44. 44. Normal size Note: Resizing and zooming are not the same thing Resizing text 45@coolfields Larger size
  45. 45. More examples Resizing text 46@coolfields
  46. 46. Text Can you answer No to this one? 13) Is any of the text fully justified? 47@coolfields
  47. 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. 48. Coolfields Consulting www.coolfields.co.ukPhoto: AlecCouros User Input
  49. 49. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 50@coolfields
  50. 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. 51. User input 52
  52. 52. Coolfields Consulting www.coolfields.co.uk Colour
  53. 53. Colour contrast Can you answer Yes to this one? 15) Is the colour contrast sufficient? 54
  54. 54. Colour contrast 55 Colour Contrast Analyzer Tool
  55. 55. Colour contrast 56 The aXe browser extension is useful for testing colour contrast.
  56. 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. 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. 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. 59. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 63
  • SelmaKaradurak

    Jan. 28, 2021
  • brianshim2

    Oct. 2, 2020

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.

Views

Total views

1,512

On Slideshare

0

From embeds

0

Number of embeds

7

Actions

Downloads

0

Shares

0

Comments

0

Likes

2

×