Top accessibility pitfalls and how to fix them

Make Your Site More
Accessible!
Jessica James | Erudite
@Jessica_James01

Hi, I’m Jess,
Account
Director at
Erudite”
Jessica James
Account Director &
Nerd
Jess worked in Digital
Marketing roles for 5 years
before specialising in SEO
in 2018. Since then, she’s
become increasingly
fascinated by user
experience and inclusive
design.
@Jessica_James01 #BrightonSEO

Who does it impact?
Why be accessible?
What is accessibility?
1
.
2
.
3
.
I’m Going to
Cover…
How to make our sites more
accessible
4
.

B R I G H T O N S E O J U L Y 2 0 2 1
What is
Accessibility
?
01

Web accessibility is the inclusive
practice of ensuring there are no
barriers that prevent interaction
with, or access to, websites on the
Web by people with physical
disabilities, situational
disabilities, and socio-economic
restrictions on bandwidth and
speed.”

In Order to be Accessible, All Users
Should be Able to…
Perceive
Understand
Navigate
Interact

Who Does it
Impact?
02

Sensory (visual, auditory)
Cognitive (thinking, communication)
Motor (locomotion, fatigue, dexterity)

Most Likely to Be
Impacted
Visual
1.7m
Hearing
1.8m
Manual Dexterity
3.7m
Neuro-diverse
3.2
m
The Clickaway Pound

Accessibility Impacts People with
Disabilities

Situational (crowded public space, lost
headphones)
Temporary (carpal tunnel, concussion)
Socio-economic (limited access to top-end
devices or fast Wi-Fi)

Accessibility Impacts People with
Disabilities
Accessibility Impacts Everyone

Why Be
Accessible?
03

Great User Experience
Accessibility is great user experience
We know that great user experience is becoming
increasingly important in SEO
It stands to reason that improving Accessibility will
have long-term SEO benefits

Brand Favour
Making your content easy to
access builds brand loyalty

You are Legally Obliged
The Equality Act 2010 (UK) requires site owners to
make reasonable adjustments to make sites more
accessible.
In the US there were over 3,500 web accessibility
lawsuits in 2020.

You are Legally Obliged

£17.1 billion
Lost every year due to
inaccessible websites
The Bottom Line
The Clickaway Pound, 2019

How to be
More
Accessible?
04

Accessible Images
Improving Colour Contrast
1
.
2
. Accessible Navigation
3
.
Tone of Voice
4
.

Low colour contrast impacts everyone
Test for low colour contrast using the WAVE Chrome
extension or the WCAG Colour Contrast Checker (WebAIM)
Who?
How?

Test changes in Google
Optimize first to build a
business case!

Accessible Images
Overlay your text with HTML
Embed text within images, or use images of text
Do
Don’t

Accessible Images

Accessible Images Alt Text
Provide useful alt text when it’s appropriate to the user
Stuff every alt text field with keywords
Do
Don’t

“Cooking experience setting with captions What’s my
Introduction? and Make a Simple shopping list.”
“Cooking Station”
Helpful
Unhelpful

Accessible Images Colour Coding
Include a second point of differentiation if colour coding
information (patterns, underline, labels, HTML table of
supporting data)
Use colour alone to convey meaning.
Do
Don’t

Accessible Images Colour Coding

Accessible Navigation Keyboard
Test navigating around your site using your keyboard. Can
you move around easily? Fill out forms and interact with
elements?
Assume all of your users use a mouse.
Do
Don’t

Make sure your site has visible focus indicators with sufficient colour
contrast when you navigate with a keyboard.
Do

Make sure you have a functioning skip-link on all pages.
Keyboard users don’t have to tab through your whole header
before they can get to the main content.
Do
Don’t

• Tab key – skip link appears
• Enter key – focus skips
over the header and moves
down to the main content.
Focus means both;
- the content in the
viewport
- keyboard focus

• Tab key – no skip link
• Have to tab 11 times to
reach main content of the
page!

Accessible Navigation Links
Use descriptive link text that describes the action the user is
about to make
Do
Don’t Click here, see more, explore

Accessible Navigation Links

Tone of Voice
• Use plain language wherever possible
• Avoid figurative speak
• Minimise use of jargon
• Explain acronyms the first time you use them
• Remember, not all of your users will be reading it in their
first language, or may be using Google Translate.
Do

Google Translate doesn’t always get it right

Final Note.
05

- Tim Berners-Lee
The power of the Web is in its universality.
Access by everyone regardless of
disability is an essential aspect.”

Top accessibility pitfalls and how to fix them

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Top accessibility pitfalls and how to fix them

Semelhante a Top accessibility pitfalls and how to fix them (20)

Mais de Erudite

Mais de Erudite (20)

Último

Último (20)

Top accessibility pitfalls and how to fix them