SlideShare a Scribd company logo
Why Accessibility is
More than Just a
Lighthouse Metric
Ruth Everett, Technical SEO Analyst at
DeepCrawl
Allow: /dogs
Allow: /SEO
Allow: /python
Empathetic human
Hungry dog
🌱
Making the internet
accessible for everyone
What We Will Cover
▪ The Importance of Web Accessibility
▪ The Intersection of SEO & Accessibility
▪ Testing Accessibility
▪ Accessibility Business Case
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett
SEO 🤝 Accessibility
What is Web
Accessibility?
What is Web Accessibility?
The act of making sure
websites are accessible and
usable for everyone.
What is Web Accessibility?
✅ Perceive
✅ Understand
✅ Navigate
✅ Interact
What is Web Accessibility?
✅ Auditory
✅ Cognitive
✅ Physical
✅ Neurological
✅ Visual
What is Web Accessibility?
Temporary impairments
- a user with a broken arm
- someone recovering from surgery
What is Web Accessibility?
Situational impairments
- people on moving trains
- users with limited internet
connection
What is Web Accessibility?
Environmental impairments
- being in a brightly lit room
- unable to play audio aloud
4 Principles of
Accessibility
Principles of Accessibility
Perceivable
Operable
Understandable
Robust
4 Principles of Accessibility
Perceivable
Removing any barriers that a user
may have to accessing your
content.
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”>
4 Principles of Accessibility
Operable
A website must be able to be
usable, despite the device they
are browsing on.
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
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.
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)
4 Principles of Accessibility
Robust
A website must be able to be
accessed and interpreted by
different technologies and
platforms, including screen
readers.
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
Why Is Accessibility
Important?
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.
Why Is Accessibility Important?
An accessible website helps all
users:
✅ Easily navigate the site
✅ Improve their experience
✅ Find information they are
looking for
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
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.
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
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett
The Intersection of
SEO & Accessibility
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
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
SEO & Accessibility
Source
SEO & Accessibility
Source
🌱
Page Titles
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 ✅
Page Title Example
❌ not the most
informative page
title
Page Title Example
✅ this looks
better
🌱
Headings
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 ✅
Heading Examples
❌ aka what not to do
Heading Examples
✅ much better :)
🌱
On-site Sitemaps
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 ✅
Sitemap Example
🌱
Anchor Text
Anchor 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 ✅
Anchor Text Examples
🌱
Breadcrumb Links
Breadcrumb Links
- Make sure they are placed in the same location
across the site.
- It is important that breadcrumb links are
descriptive
Accessibility ✅
Breadcrumb Link Examples
🌱
Alt 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 ✅
Alt Text Example
IMG01234567.jpg
❌ doesn’t tell me
anything about what is in
the image
Alt Text Example
IMG01234567.jpg Golden Labrador Running in a Field
✅ better explains the image
Alt Text - Computer Vision
Alt Text - Identify Missing Alt Text
Alt Text - Identify Missing Alt Text
Alt Text - BONUS
🌱
Navigation
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 ✅
Navigation Example
🌱
Readability
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 ✅
Readability Example
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
🌱
User Interactions
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 ✅
User Interaction Example
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)
Resources
Resources
Color Contrast Checker by WebAIM
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
Other Considerations - Motor Requirements
● Don’t require a mouse
● Use large link targets
● Use focus states for links
● Use default tabbing order
Other Considerations - Auditory Requirements
● Provide captions for videos
● Add transcripts for audio
● Add functional controls
● Don’t autoplay videos
Testing Accessibility
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.
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.
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.
Testing Accessibility
axe Web Accessibility Testing
Displays the accessibility issues detected and where they are found on
the page.
Testing Accessibility
Siteimprove Accessibility Checker
Free Chrome extension provides overview of a
page’s accessibility issues with clear explanations
of how they affect users.
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.
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.
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.
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
The Accessibility
Business Case
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
Accessibility Business Case
Source
● Drive Innovation
Accessibility Business Case
Source
● Drive Innovation
● Enhance Brand Awareness
Accessibility Business Case
Source
● Drive Innovation
● Enhance Brand Awareness
● Increase Market Reach
Accessibility Business Case
Source
● Drive Innovation
● Enhance Brand Awareness
● Increase Market Reach
● Improve Customer Experience
and Loyalty
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%
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%
Takeaways
Approach your work with more
consideration and a different
perspective.
Accessibility is extra work &
effort understanding &
empathy.
Accessibility and SEO
compliment each other in
the best way
Resources
Resources
A11y Project
Checklist
Resources
Resources
Web Content Accessibility Guidelines (WCAG) 2.0
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/
T H A N K Y O U
@rvtheverett

More Related Content

PPTX
Python For Technical SEO | Women In Tech SEO Festival March 2020 | Ruth Everett
PPTX
The Power of Python :: How It Can Help With Technical SEO | Bristol SEO May 2...
PPTX
Tackling Python: How It Can Help With Technical SEO | Pint Sized Meetup Janua...
PPTX
Tackling Python: What is it and How Can it Help with Technical SEO? | TechSEO...
PPTX
Machine Learning and Python For Marketing Automation | MKGO October 2019 | Ru...
PPTX
Brighton SEO - Sep 2019 - Accessibility & Technical SEO
PPTX
Advanced Technical SEO in 2020 - Data Science
PPTX
Getting Started with Python and Machine Learning for SEO | BrightonSEO Octobe...
Python For Technical SEO | Women In Tech SEO Festival March 2020 | Ruth Everett
The Power of Python :: How It Can Help With Technical SEO | Bristol SEO May 2...
Tackling Python: How It Can Help With Technical SEO | Pint Sized Meetup Janua...
Tackling Python: What is it and How Can it Help with Technical SEO? | TechSEO...
Machine Learning and Python For Marketing Automation | MKGO October 2019 | Ru...
Brighton SEO - Sep 2019 - Accessibility & Technical SEO
Advanced Technical SEO in 2020 - Data Science
Getting Started with Python and Machine Learning for SEO | BrightonSEO Octobe...

What's hot (20)

PPTX
Tackling Python: What is it and how can it help with Technical SEO?
PDF
TechSEO Boost 2018: Programming Basics for SEOs
PPTX
TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
PPTX
TechSEO Boost 2017: Working Smarter: SEO Automation to Increase Efficiency & ...
PDF
Automate, Create Tools, & Test Ideas Quickly with Google Apps Script
PDF
Keynote: Bias in Search and Recommender Systems
PPTX
TechSEO Boost 2017: Making the Web Fast
PPTX
TechSEO Boost 2018: The Statelessness of Technical SEO
PDF
NLP for SEO
PPTX
Distributed And Scaled (DiSc) Agile PMO
PDF
NLP Powered Outreach Link Building
PPTX
Linuxkit and Moby - A Sneek Peek into The Future of Container Ecosystem
PPTX
Windows Automation with Ansible
PPTX
Design Thinking Approach for Analytics
PPTX
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
PDF
Inbound 2017: Back to Our Roots with Technical SEO
PPTX
TechSEO Boost 2017: The State of Technical SEO
PPTX
Scaling automated quality text generation for enterprise sites
PPTX
TechSEO Boost 2017: Fun with Machine Learning: How Machine Learning is Shapin...
PPTX
Strengthening CX through Agile Ecosystems
Tackling Python: What is it and how can it help with Technical SEO?
TechSEO Boost 2018: Programming Basics for SEOs
TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
TechSEO Boost 2017: Working Smarter: SEO Automation to Increase Efficiency & ...
Automate, Create Tools, & Test Ideas Quickly with Google Apps Script
Keynote: Bias in Search and Recommender Systems
TechSEO Boost 2017: Making the Web Fast
TechSEO Boost 2018: The Statelessness of Technical SEO
NLP for SEO
Distributed And Scaled (DiSc) Agile PMO
NLP Powered Outreach Link Building
Linuxkit and Moby - A Sneek Peek into The Future of Container Ecosystem
Windows Automation with Ansible
Design Thinking Approach for Analytics
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
Inbound 2017: Back to Our Roots with Technical SEO
TechSEO Boost 2017: The State of Technical SEO
Scaling automated quality text generation for enterprise sites
TechSEO Boost 2017: Fun with Machine Learning: How Machine Learning is Shapin...
Strengthening CX through Agile Ecosystems
Ad

Similar to Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett (20)

PPT
corePHP Usability Accessibility by Steven Pignataro
PPTX
The Importance of Accessibility in Web Development
PDF
Accessibility and why it matters
PPTX
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
PPTX
Web Accessibility 101
PPTX
Accessibilitytesting public
PDF
Quick Web Accessibility - Sensory Therapy Gardens Manual
PPTX
Web Accessibility
PPTX
Getting Started With Web Accessibility
PDF
Top 10 Tips for Making Your Website Accessible
PPTX
Accessibility in Web Development: Making Websites Inclusive
PDF
How to engineer accessible websites
PPTX
A11y presentation-2017
PPTX
Wave training
PPTX
Designing, Developing & Testing for Accessibility
PPT
Plan For Accessibility - TODCon 2008
PPT
SEO through Accessibility- How designing accessible websites leads to automat...
PDF
Usability ≠ Accessibility. An intro to web accessibility for agencies.
PPTX
How accessibility improves SEO.pptx
PPTX
The Accessible Web: Improving the Universal Experience
corePHP Usability Accessibility by Steven Pignataro
The Importance of Accessibility in Web Development
Accessibility and why it matters
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility 101
Accessibilitytesting public
Quick Web Accessibility - Sensory Therapy Gardens Manual
Web Accessibility
Getting Started With Web Accessibility
Top 10 Tips for Making Your Website Accessible
Accessibility in Web Development: Making Websites Inclusive
How to engineer accessible websites
A11y presentation-2017
Wave training
Designing, Developing & Testing for Accessibility
Plan For Accessibility - TODCon 2008
SEO through Accessibility- How designing accessible websites leads to automat...
Usability ≠ Accessibility. An intro to web accessibility for agencies.
How accessibility improves SEO.pptx
The Accessible Web: Improving the Universal Experience
Ad

Recently uploaded (20)

PPTX
Sumit Saxena IIM J Project Market segmentation.pptx
PDF
Hidden gems in Microsoft ads with Navah Hopkins
PDF
Pay-Per-Click Marketing: Strategies That Actually Work in 2025
PDF
Digital Marketing in the Age of AI: What CEOs Need to Know - Jennifer Apy, Ch...
PDF
UNIT 2 - 5 DISTRIBUTION IN RURAL MARKETS.pdf
PDF
AFCAT Syllabus 2026 Guide by Best Defence Academy in Lucknow.pdf
PDF
Prove and Prioritize Profitability in Every Marketing Campaign - Zach Sherrod...
PPTX
"Best Healthcare Digital Marketing Ideas
PDF
Mastering Bulk Email Campaign Optimization for 2025
PDF
RC 14001 Certification: Enhancing ISO 14001 with EHS & Security Standards
PDF
MARG’s Door & Window Hardware Catalogue | Trending Branding Digital Solutions
PDF
How a Travel Company Can Implement Content Marketing
DOCX
marketing plan starville............docx
PPTX
The evolution of the internet - its impacts on consumers
PDF
Master Fullstack Development Course in Chennai – Enroll Now!
PDF
exceptionalinsights.group visitor traffic statistics 08-08-25
PPTX
Mastering eCommerce SEO: Strategies to Boost Traffic and Maximize Conversions
PDF
Building a strong social media presence.
PDF
Wondershare Filmora Crack Free Download 2025
PDF
AI & Automation: The Future of Marketing or the End of Creativity - Matthew W...
Sumit Saxena IIM J Project Market segmentation.pptx
Hidden gems in Microsoft ads with Navah Hopkins
Pay-Per-Click Marketing: Strategies That Actually Work in 2025
Digital Marketing in the Age of AI: What CEOs Need to Know - Jennifer Apy, Ch...
UNIT 2 - 5 DISTRIBUTION IN RURAL MARKETS.pdf
AFCAT Syllabus 2026 Guide by Best Defence Academy in Lucknow.pdf
Prove and Prioritize Profitability in Every Marketing Campaign - Zach Sherrod...
"Best Healthcare Digital Marketing Ideas
Mastering Bulk Email Campaign Optimization for 2025
RC 14001 Certification: Enhancing ISO 14001 with EHS & Security Standards
MARG’s Door & Window Hardware Catalogue | Trending Branding Digital Solutions
How a Travel Company Can Implement Content Marketing
marketing plan starville............docx
The evolution of the internet - its impacts on consumers
Master Fullstack Development Course in Chennai – Enroll Now!
exceptionalinsights.group visitor traffic statistics 08-08-25
Mastering eCommerce SEO: Strategies to Boost Traffic and Maximize Conversions
Building a strong social media presence.
Wondershare Filmora Crack Free Download 2025
AI & Automation: The Future of Marketing or the End of Creativity - Matthew W...

Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland | March 2021 | Ruth Everett