SEOs play a crucial role in the overlap between SEO and accessibility. This presentation will show how we can make a positive impact on accessibility through our work, as we help to make the web a more welcoming place for everyone.

1. 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. SEO & Accessibility
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