Slide 1
Slide 1 text
#SEOnerdSwitzerland
Why Accessibility is
More than Just a
Lighthouse Metric
Ruth Everett, Technical SEO Analyst at
DeepCrawl
Slide 2
Slide 2 text
Allow: /dogs
Allow: /SEO
Allow: /python
Empathetic human
Hungry dog
Slide 3
Slide 3 text
🌱
Making the internet
accessible for everyone
Slide 4
Slide 4 text
What We Will Cover
▪ The Importance of Web Accessibility
▪ The Intersection of SEO & Accessibility
▪ Testing Accessibility
▪ Accessibility Business Case
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
SEO 🤝 Accessibility
Slide 8
Slide 8 text
What is Web
Accessibility?
Slide 9
Slide 9 text
What is Web Accessibility?
The act of making sure
websites are accessible and
usable for everyone.
Slide 10
Slide 10 text
What is Web Accessibility?
✅ Perceive
✅ Understand
✅ Navigate
✅ Interact
Slide 11
Slide 11 text
What is Web Accessibility?
✅ Auditory
✅ Cognitive
✅ Physical
✅ Neurological
✅ Visual
Slide 12
Slide 12 text
What is Web Accessibility?
Temporary impairments
- a user with a broken arm
- someone recovering from surgery
Slide 13
Slide 13 text
What is Web Accessibility?
Situational impairments
- people on moving trains
- users with limited internet
connection
Slide 14
Slide 14 text
What is Web Accessibility?
Environmental impairments
- being in a brightly lit room
- unable to play audio aloud
Slide 15
Slide 15 text
4 Principles of
Accessibility
Slide 16
Slide 16 text
Principles of Accessibility
Perceivable
Operable
Understandable
Robust
Slide 17
Slide 17 text
4 Principles of Accessibility
Perceivable
Removing any barriers that a user
may have to accessing your
content.
Slide 18
Slide 18 text
Perceivable Example
Bad: 
Also bad:
Better:
Best:
Slide 19
Slide 19 text
4 Principles of Accessibility
Operable
A website must be able to be
usable, despite the device they
are browsing on.
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
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)
Slide 23
Slide 23 text
4 Principles of Accessibility
Robust
A website must be able to be
accessed and interpreted by
different technologies and
platforms, including screen
readers.
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Why Is Accessibility
Important?
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
Why Is Accessibility Important?
An accessible website helps all
users:
✅ Easily navigate the site
✅ Improve their experience
✅ Find information they are
looking for
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
The Intersection of
SEO & Accessibility
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
SEO & Accessibility
Source
Slide 38
Slide 38 text
Source
Slide 39
Slide 39 text
🌱
Page Titles
Slide 40
Slide 40 text
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 ✅
Slide 41
Slide 41 text
Page Title Example
❌
not the most
informative page
title
Slide 42
Slide 42 text
Page Title Example
✅
this looks
better
Slide 43
Slide 43 text
🌱
Headings
Slide 44
Slide 44 text
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 ✅
Slide 45
Slide 45 text
Heading Examples
❌
aka what not to do
Slide 46
Slide 46 text
Heading Examples
✅
much better
:)
Slide 47
Slide 47 text
🌱
On-site Sitemaps
Slide 48
Slide 48 text
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 ✅
Slide 49
Slide 49 text
Sitemap Example
Slide 50
Slide 50 text
🌱
Anchor Text
Slide 51
Slide 51 text
Anchor Text
Slide 52
Slide 52 text
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 ✅
Slide 53
Slide 53 text
Anchor Text Examples
Slide 54
Slide 54 text
🌱
Breadcrumb Links
Slide 55
Slide 55 text
Breadcrumb Links
- Make sure they are placed in the same location
across the site.
- It is important that breadcrumb links are descriptive
Accessibility ✅
Slide 56
Slide 56 text
Breadcrumb Link Examples
Slide 57
Slide 57 text
🌱
Alt Text
Slide 58
Slide 58 text
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 ✅
Slide 59
Slide 59 text
Alt Text Example
IMG01234567.jpg
❌
doesn’t tell me
anything about what is in
the image
Slide 60
Slide 60 text
Alt Text Example
IMG01234567.jpg Golden Labrador Running in a Field
✅
better explains the image
Slide 61
Slide 61 text
Alt Text - Computer Vision
Slide 62
Slide 62 text
Alt Text - Identify Missing Alt Text
Slide 63
Slide 63 text
Alt Text - Identify Missing Alt Text
Slide 64
Slide 64 text
Alt Text - BONUS
Slide 65
Slide 65 text
🌱
Navigation
Slide 66
Slide 66 text
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 ✅
Slide 67
Slide 67 text
Navigation Example
Slide 68
Slide 68 text
🌱
Readability
Slide 69
Slide 69 text
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 ✅
Slide 70
Slide 70 text
Readability Example
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
🌱
User Interactions
Slide 73
Slide 73 text
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 ✅
Slide 74
Slide 74 text
User Interaction Example
Slide 75
Slide 75 text
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)
Slide 76
Slide 76 text
Resources
Resources
Color Contrast Checker by WebAIM
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
Other Considerations - Motor Requirements
● Don’t require a mouse
● Use large link targets
● Use focus states for links
● Use default tabbing order
Slide 79
Slide 79 text
Other Considerations - Auditory Requirements
● Provide captions for videos
● Add transcripts for audio
● Add functional controls
● Don’t autoplay videos
Slide 80
Slide 80 text
Testing Accessibility
Slide 81
Slide 81 text
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.
Slide 82
Slide 82 text
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.
Slide 83
Slide 83 text
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.
Slide 84
Slide 84 text
Testing Accessibility
axe Web Accessibility Testing
Displays the accessibility issues detected and where they are found on
the page.
Slide 85
Slide 85 text
Testing Accessibility
Siteimprove Accessibility Checker
Free Chrome extension provides overview of a
page’s accessibility issues with clear explanations of
how they affect users.
Slide 86
Slide 86 text
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.
Slide 87
Slide 87 text
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.
Slide 88
Slide 88 text
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.
Slide 89
Slide 89 text
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
Slide 90
Slide 90 text
The Accessibility
Business Case
Slide 91
Slide 91 text
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
Slide 92
Slide 92 text
Accessibility Business Case
Source
● Drive Innovation
Slide 93
Slide 93 text
Accessibility Business Case
Source
● Drive Innovation
● Enhance Brand Awareness
Slide 94
Slide 94 text
Accessibility Business Case
Source
● Drive Innovation
● Enhance Brand Awareness
● Increase Market Reach
Slide 95
Slide 95 text
Accessibility Business Case
Source
● Drive Innovation
● Enhance Brand Awareness
● Increase Market Reach
● Improve Customer Experience
and Loyalty
Slide 96
Slide 96 text
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%
Slide 97
Slide 97 text
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%
Slide 98
Slide 98 text
Takeaways
Slide 99
Slide 99 text
Approach your work with more
consideration and a different
perspective.
Slide 100
Slide 100 text
Accessibility is extra work &
effort understanding &
empathy.
Slide 101
Slide 101 text
Accessibility and SEO
compliment each other in
the best way
Slide 102
Slide 102 text
Resources
Slide 103
Slide 103 text
Resources
A11y Project Checklist
Slide 104
Slide 104 text
Resources
Resources
Web Content Accessibility Guidelines (WCAG) 2.0
Slide 105
Slide 105 text
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/
Slide 106
Slide 106 text
T H A N K Y O U
@rvtheverett