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.
4. What We Will Cover
▪ The Importance of Web Accessibility
▪ The Intersection of SEO & Accessibility
▪ Testing Accessibility
▪ Accessibility Business Case
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
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
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
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 ✅
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 ✅
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 ✅
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 ✅
55. Breadcrumb Links
- Make sure they are placed in the same location
across the site.
- It is important that breadcrumb links are
descriptive
Accessibility ✅
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 ✅
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 ✅
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 ✅
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
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 ✅
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)
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
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.
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
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
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%