Ruth Everett - Why Accessibility is More Than Just a Lighthouse Metric (SEONerdSwitzerland March 2021)

Transcript

1. #SEOnerdSwitzerland Why Accessibility is More than Just a Lighthouse Metric Ruth Everett, Technical SEO Analyst at DeepCrawl
2. Allow: /dogs Allow: /SEO Allow: /python Empathetic human Hungry dog
3. 🌱 Making the internet accessible for everyone
4. What We Will Cover ▪ The Importance of Web Accessibility ▪ The Intersection of SEO & Accessibility ▪ Testing Accessibility ▪ Accessibility Business Case
7. SEO 🤝 Accessibility
8. What is Web Accessibility?
9. What is Web Accessibility? The act of making sure websites are accessible and usable for everyone.
10. What is Web Accessibility? ✅ Perceive ✅ Understand ✅ Navigate ✅ Interact
11. What is Web Accessibility? ✅ Auditory ✅ Cognitive ✅ Physical ✅ Neurological ✅ Visual
12. What is Web Accessibility? Temporary impairments - a user with a broken arm - someone recovering from surgery
13. What is Web Accessibility? Situational impairments - people on moving trains - users with limited internet connection
14. What is Web Accessibility? Environmental impairments - being in a brightly lit room - unable to play audio aloud
15. 4 Principles of Accessibility
16. Principles of Accessibility Perceivable Operable Understandable Robust
17. 4 Principles of Accessibility Perceivable Removing any barriers that a user may have to accessing your content.
18. Perceivable Example Bad: <img src=“/img1234567” alt=“img1234567”> Also bad: <img src=“/img1234567” alt=“ ”> Better: <img src=“/img1234567” alt=“Golden Labrador”> Best: <img src=“/img1234567” alt=“Golden Labrador Running in a Field”>
19. 4 Principles of Accessibility Operable A website must be able to be usable, despite the device they are browsing on.
20. Operable Example Giving users enough time to read content or perform an action, for example - Not using moving or blinking content - Avoiding alerts or pop ups that can’t be minimised - Prevent having a time alert to complete a task
21. 4 Principles of Accessibility Understandable Being able to understand the information displayed on a webpage, as well as clearly understand the user interface and navigate the site.
22. Understandable Example Ensuring content is easy to read and follows a structure, for example - Breaking up content with logical headings - Utilising bullets and lists (correctly marked up)
23. 4 Principles of Accessibility Robust A website must be able to be accessed and interpreted by different technologies and platforms, including screen readers.
24. Robust Example - Ensure there are no errors in code so that the pages are easy for assistive technologies to follow and understand - Use ARIA components to provide additional information to assistive technologies
25. Why Is Accessibility Important?
26. Why Is Accessibility Important? Ensuring the websites we work on are accessible for everyone should be a primary concern for anyone who works on websites.
27. Why Is Accessibility Important? An accessible website helps all users: ✅ Easily navigate the site ✅ Improve their experience ✅ Find information they are looking for
28. Why Is Accessibility Important? 62% of accessibility practitioners surveyed in March and April 2020 reported that “COVID-19 has raised the awareness and impact of accessibility on the digital channel.” Deque Report
29. Why Is Accessibility Important? User Experience When websites aren’t accessible it can make it incredibly difficult for some users to perform necessary tasks or find the information they are looking for.
30. Why Is Accessibility Important? Legal Implications In addition to being imperative to user experience, an accessible website is also required by law in most cases. - European Accessibility Act - Americans Disability Act (ADA) - UK Equality Act
34. The Intersection of SEO & Accessibility
35. SEO & Accessibility 2020 study by WebAim to assess end-user accessibility barriers and web content accessibility guideline failures found: • 98% of homepages had detectable WCAG failures Source
36. SEO & Accessibility 2020 study by WebAim to assess end-user accessibility barriers and web content accessibility guideline failures found: • 97% of the deeper content pages also failed the accessibility testing Source
37. SEO & Accessibility Source
38. Source
39. 🌱 Page Titles
40. Page Titles - Provide context to help understand what the webpage is about - Identify whether the information on a page is relevant for users - Differentiate content when multiple tabs or pages are open Accessibility ✅
41. Page Title Example ❌ not the most informative page title
42. Page Title Example ✅ this looks better
43. 🌱 Headings
44. Headings - Assistive technologies use headings to quickly navigate a page and move to a particular section of the content. - Ensure all headings are relevant to the content beneath them and only use headings if there is content below them Accessibility ✅
45. Heading Examples ❌ aka what not to do
46. Heading Examples ✅ much better :)
47. 🌱 On-site Sitemaps
48. Sitemaps - Provide an overview, and clear access, to all the important pages on the site - Helpful for all users to find content they are looking for, especially if the site has a complex navigation. Accessibility ✅
49. Sitemap Example
50. 🌱 Anchor Text
51. Anchor Text
52. Anchor Text - Also help users determine whether they want to click the link to visit the destination page. - Typically screen readers will tab through a page and inform users when a link has been found before announcing the anchor text. Accessibility ✅
53. Anchor Text Examples
54. 🌱 Breadcrumb Links
55. Breadcrumb Links - Make sure they are placed in the same location across the site. - It is important that breadcrumb links are descriptive Accessibility ✅
56. Breadcrumb Link Examples
57. 🌱 Alt Text
58. Alt Text - Used to provide textual alternatives for users with visual impairments. - Alt text is read aloud by screen readers which means they need to be accurate and relevant. Accessibility ✅
59. Alt Text Example IMG01234567.jpg ❌ doesn’t tell me anything about what is in the image
60. Alt Text Example IMG01234567.jpg Golden Labrador Running in a Field ✅ better explains the image
61. Alt Text - Computer Vision
62. Alt Text - Identify Missing Alt Text
63. Alt Text - Identify Missing Alt Text
64. Alt Text - BONUS
65. 🌱 Navigation
66. Navigation - Generally, navigation links are built to be tab-able which means that all keyboards and screen readers are able to read them. - In order to ensure your navigation is accessible, make sure you only include primary pages rather than the entire site. Accessibility ✅
67. Navigation Example
68. 🌱 Readability
69. Readability - Having a simplified reading level of content is one of the best ways to help users who may have cognitive disabilities. - In order to simplify the readability of a website, it’s important to avoid jargon or difficult language, ensure text is left-aligned, and lists are utilized. Accessibility ✅
70. Readability Example
71. Good semantics - Use h1 - h6 tags to markup headings - Use list elements - ol, ul & dl for list content - Use a elements with href attributes for links - Use the button element for buttons - Use the table element to describe tabular data and th element for table headers
72. 🌱 User Interactions
73. User Interactions - Just like Googlebot is unable to perform physical interactions such as clicking buttons, or opening accordions, most screen readers are also unable to do this unless directed to by the user. - It’s best practice to avoid using a hover action to reveal any content, unless the hidden content is also included within the source code. Accessibility ✅
74. User Interaction Example
75. Other Considerations - Colour Contrast • Low colour contrast makes it difficult to discern elements in the foreground from the background • Can make links, headings or CTAs hard to read • Ensure visual presentation of text has a contrast ratio of 4.5:1 (AA standard)
76. Resources Resources Color Contrast Checker by WebAIM
77. Other Considerations - Visual Requirements • Don’t use colour or styling to convey meaning • Use safe fonts • Don’t use iframes for core content • Ensure table layout is device friendly
78. Other Considerations - Motor Requirements • Don’t require a mouse • Use large link targets • Use focus states for links • Use default tabbing order
79. Other Considerations - Auditory Requirements • Provide captions for videos • Add transcripts for audio • Add functional controls • Don’t autoplay videos
80. Testing Accessibility
81. Testing Accessibility WAVE Evaluation Tool Free Chrome extension Developed by webAIM.org and provides visual feedback about the accessibility of content by adding icons and indicators onto the page.
82. Testing Accessibility WAVE Evaluation Tool It also provides a summary of issues that allows you to drill down into specific errors to find out more information.
83. Testing Accessibility axe Web Accessibility Testing Free Chrome extension that utilizes the axe open source JavaScript library which is developed by Deque Systems. Run within the browser developer tools to identify accessibility defects on a webpage.
84. Testing Accessibility axe Web Accessibility Testing Displays the accessibility issues detected and where they are found on the page.
85. Testing Accessibility Siteimprove Accessibility Checker Free Chrome extension provides overview of a page’s accessibility issues with clear explanations of how they affect users.
86. Testing Accessibility Siteimprove Accessibility Checker Free Chrome extension provides overview of a page’s accessibility issues with clear explanations of how they affect users. Also displays recommendations for fixing the identified issues.
87. Testing Accessibility At Scale with DeepCrawl We’ve also been able to combine the axe testing tool with a custom JavaScript script and extractions within DeepCrawl.
88. Testing Accessibility At Scale with DeepCrawl View violations across a site at scale, together with providing a score and summary, for a number of URLs.
89. Testing Accessibility Screen readers Try installing a screen reader extension to understand a user with a screen reader will interact with your website. Recommendations: - ChromeVox Screen Reader - Pericles: Text to Speech Screen Reader - Show Screen Reader Text
90. The Accessibility Business Case
91. Accessibility Business Case Source “Businesses that integrate accessibility are more likely to be innovative, inclusive enterprises that reach more people with positive brand messaging that meets emerging global legal requirements.” - W3
92. Accessibility Business Case Source • Drive Innovation
93. Accessibility Business Case Source • Drive Innovation • Enhance Brand Awareness
94. Accessibility Business Case Source • Drive Innovation • Enhance Brand Awareness • Increase Market Reach
95. Accessibility Business Case Source • Drive Innovation • Enhance Brand Awareness • Increase Market Reach • Improve Customer Experience and Loyalty
96. Case Study - NPR Weekly Source • Search traffic increased 6.86% • Ability to search text to reference a specific section of audio • 7.23% of visitors viewed at least one transcript • Unique visitors increased 4.18%
97. Case Study - Legal and General Group Source After implementing changes to improve their online accessibility, Legal and General the positive impact seen included: • Doubled visitor numbers • Cut maintenance costs by two thirds • Increase in search traffic by 50%
98. Takeaways
99. Approach your work with more consideration and a different perspective.
100. Accessibility is extra work & effort understanding & empathy.
101. Accessibility and SEO compliment each other in the best way
102. Resources
103. Resources A11y Project Checklist
104. Resources Resources Web Content Accessibility Guidelines (WCAG) 2.0
105. Resources https://webaim.org/standards/wcag/checklist https://www.a11yproject.com/checklist/ https://github.com/accessibility/a11y-courses https://github.com/fejes713/accessibility-guide https://www.google.com/accessibility/ https://www.deque.com/blog/the-business-case-for-accessibility/ https://www.upbuild.io/blog/web-accessibility-lessons-whitehouse-gov/ https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/
106. T H A N K Y O U @rvtheverett