Best practices for

implementing great
web accessibility
SIMON WATERS
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

r
About the autho

Before joining Silktide as Head of Marketing, Simon knew very little about
accessibility. Over the last couple of years, he’s gained a working knowledge of the
key principles, and so wrote this book to help other beginners gain an overview of
the importance of accessibility.

Table of Contents

What is web accessibility?............................................................................... 05

How does poor web accessibility affect people?.................................................................. 06

Considering situational accessibility....................................................................................... 07

Accessibility is a scale, not a switch....................................................................................... 09

The ambiguity in WCAG........................................................................................................... 11

How effective is automated web accessibility testing?........................................................ 13

Best practices for great web accessibility...................................................... 15

Keyboard navigation and assistive technologies.................................................................. 16

Be consistent in page layout and semantics......................................................................... 20

2
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Add alternative text to images (where appropriate)...............................................................21

What is alt text for?.................................................................................................................... 22

Ensure subtitles, captions, transcripts and audio descriptions are present........................ 31

Do not automatically play media without allowing users to stop them................................ 35

Begin with the Design................................................................................................................ 39

Color contrast of text and its background............................................................................... 42

Page headings and semantic structure................................................................................... 43

Form styling and labeling...........................................................................................................44

Use descriptive and unique URLs.............................................................................................55

Minimize the use of PDFs or, if unavoidable, make sure they’re accessible........................58

Check the readability..................................................................................................................60

The ROI of Web Accessibility............................................................................63

Summary..................................................................................................................................... 63

Prevalence.................................................................................................................................. 64
Business case............................................................................................................................. 65

Costs and solutions....................................................................................................................71

Conclusion..........................................................................................................73
Accessibility and the law............................................................................................................73

Finding and fixing web accessibility issues............................................................................. 74

Next steps................................................................................................................................... 75

About Silktide............................................................................................................................. 77

3
Chapter 1

What is web
accessibility?
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

What is web
accessibility?
Web accessibility is the process of ensuring that your website caters to a wide
range of users’ needs. It’s not always about disability, although allowing people
with disabilities to use your website is the first thing most people think of.

Accessibility is often reduced to checklists, compliance, and legislation but it’s

really about people and improving their online experience.

This book aims to help beginners understand how they can improve the
accessibility of their websites. In the majority of websites that Silktide tests we
see the same common accessibility issues. In this book, we’ll aim to let you know
what these issues are, how you can identify them, and how you can fix them.

5
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

How does poor web

accessibility affect people?
Let’s say your user is blind or has impaired past the repeated parts of every page. It’s
vision. They use a screen reader, which a small thing, but it can make a world of
is a piece of technology that reads the difference.
content on their screen out to them. They
What if you hide critical information inside
can browse your website, fill in forms, and
images, and not in text? Or you include a
generally accomplish everything a sighted
form with no labels, so there’s no way to
user can.
know where to put your name, address, or
Unless of course, your website isn’t phone number?
accessible, then it becomes difficult or
Or how about intrusive popup banners,
completely impossible.
modals, or chatbots that steal focus from
For example, a screen reader will read out screen readers?
everything on your page, one word at a
These are common accessibility issues that
time. That mega menu you have at the top
are relatively easily fixed.
of your site might take a couple of minutes
of painstaking work for a blind user to step For an overview of how accessibility affects
through. Because this is such a common people with disabilities, with real-world
problem, accessibility standards require you examples, we’d recommend watching
to add an invisible “skip to content” link, Silktide’s short webinar on the topic.
which allows screen reader users to jump

What is a screen reader?

A screen reader is computer software designed to help people with
little or no vision by reading device content aloud. It makes web
pages, icons, forms, dialogue boxes, documents, and many other
elements, accessible.

6
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Considering situational
accessibility
Let’s consider “situational accessibility”. If a user has low vision they
need text contrast to be high enough that it’s readable.

The same applies to a person with excellent vision who happens to be

using their device in bright sunlight.

A user might not be able to hear the audio in a piece of your content
because they are either deaf, have an ear infection, or are in a loud
room. Some people may prefer content to be subtitled. These
situations are all fixed with the same solution – adding subtitles,
captions, and audio descriptions to visual media.

Indeed, many accessibility issues affect all users to some degree,

and often a single solution improves the experience for everyone.
Accessibility, then, goes hand in hand with usability.

7
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Permanent Temporary Situational

Touch

One arm Arm injury New parent

See

Blind Cataract Distracted driver

Hear

Deaf Ear infection Bartender

Speak

Non-verbal Laryngitis Heavy accent

8
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Accessibility is a
scale, not a switch.
Silktide is an automated accessibility However, it’s not as simple as that.
testing platform, and our technology is There is some misunderstanding. But this
used to power the Index, the global web is ok because it’s easy to see how, given

accessibility league table. the law pretty much states “you must be
accessible”, people can assume there is
We test and then grade website
some kind of passing grade. The truth is,
accessibility using our proprietary
accessibility is more of a scale rather than
scoring system.
a switch. It’s not something that is on or off.

People often ask us whether there is a You can think of the accessibility of your
score or a threshold they can attain which site as a range, from “totally inaccessible”
means their website is accessible. They to “a brilliant experience for everyone”. You
also ask at what point they can become want to be as near to “brilliant” as possible
100% accessible. on this scale.

To achieve this, you need to employ several methods, including both automated
and manual web accessibility testing. More on that a little later.

9
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) aim to be

the standard for web content accessibility that individuals,
organizations, and governments should follow to ensure more
accessible web experiences.

Developed by W3C, WCAG is a set of criteria and tests that help web developers and
content creators meet the needs of people with disabilities, by providing clear guidance
for making web content more accessible.

WCAG is made up of several “success criteria”, each of which can be passed or failed during
accessibility tests. WCAG is made up of three levels, A, AA, and AAA, which you may consider
as an indication of their importance (Level A is considered to be mandatory).

10
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

The ambiguity in WCAG

Silktide will grade you against WCAG for Without alternative text for each image
all the unambiguous things (i.e., those that (which describes the contents to screen
a computer can test). There are certain readers), you couldn’t know what you were
levels of accessibility failings that would clicking on.
be unambiguously interpreted as totally
You’d be asked to select “image”, “image”, or
inaccessible.
“image” by a screen reader. If you were, say,
A simple example would be the image blind, that would be a classic unambiguous
below. You’re asked to indicate your favorite example, and a WCAG failure.
fruit by selecting one of the three pictures.

Please select from the following options

“Image” “Image” “Image”

is alternative text
What
Alternative text (“alt text”) may be added to images so
that a screen reader user can hear an audio description
of the information contained in that image.

11
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

There are many cases however where it’s Below are two examples of the same

more subjective. There is a requirement in written content. It’s quite clear that what
you see on the right is easier to understand
WCAG that content is easy to understand
than what is on the left. Indeed, a computer
for as many people as possible. It states
can determine this as well. We have all
that you should write for an audience with sorts of math and formulae that are
a reading age of around 12-13 years. designed to assess this.

But how would you actually grade that? be made that this is failing a WCAG AAA
Would you grade one as a pass and one as requirement, although it isn’t as simple as

a failure? Technically, the material on the yes or no. What if we take the example on
the right and add one sentence that fails
left is accessible in that you can at least
that criteria. Would that make the entire
hear it or read it. It’s just a bad experience.
page a failure? Would it make the entire
A pretty strong case in this example could website a failure? Probably not.

12
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

How effective is automated

web accessibility testing?
Let’s start by getting the elephant in therefore, whether it passes or fails.
the room out of the way. Automated
That said, a good platform will show you
accessibility testing alone will not make a list of all your alt text and allow you
your website 100% accessible. to manually review them quickly.

Always combine automated testing with What automated accessibility testing

manual auditing. The reason for this is can do for you is find a broad range of
that some WCAG criteria are ambiguous. issues quickly, across many thousands of
For example, automated accessibility web pages. It’s scalable, saves you time
tests can tell you if alternative text and money, and helps you find obvious
exists, but what they can’t do is accessibility issues before your users do.

understand the context. Automated testing also allows for

If you display an image of a banana, but consistency, makes your team more
your alt text says, “apple”, a computer efficient, and allows you to report on
cannot determine its context and progress towards your accessibility goals.

13
Chapter 2

Best practices for

great web accessibility
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Best practices for

great web accessibility
There are several areas you can focus on that will help improve accessibility

Following is a non-exhaustive list of common accessibility failures found across all

sectors and industries by Silktide. We’ll approach this in a non-technical way, but there
may be some specific code examples to illustrate certain points. An understanding of
HTML would be advantageous in these situations.

We’ll include data from the Silktide Index where possible that illustrates which
percentage of websites we frequently test have the issues outlined.

the Silktide Index?

What is

The Index is the league table showing Index uses Silktide’s automated web
how organizations in various industries accessibility testing software to test
compare for web accessibility. Index and score websites against WCAG 2.1,
includes a wide range of both public the globally-recognized standard for
and private sector websites, across web accessibility.
many industries and locations.
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Keyboard navigation and

assistive technologies
Not everyone uses a mouse to navigate keyboard, typically using a screen reader.
your website. Whether through motor Some users simply use a keyboard by
impairments or not, some users can only preference, for speed.
navigate using a keyboard.
Of all the potential accessibility issues
Other assistive technologies like buttons you could create, preventing users from
and switches, which act in a similar navigating with a keyboard is the most
way to a keyboard but with fewer fundamental to get right because it
buttons, are also used by disabled users.
affects the most users.
Blind users also navigate with a

16
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Typical keyboard controls

Typically, the TAB key is used to navigate select an option from a list of
through elements on your web page. autocomplete suggestions.
These include links, buttons, form fields,
ARROW KEYS are used to navigate
radio buttons, and more. Pressing TAB menus - up/down to move up and down,
skips to the next interactive element. and left/right to expand and collapse
Pressing SHIFT and TAB skips backward sub-menus. They’re also used to interact
to the previous interactive element. with sliders, and scroll

The escape (ESC) key is used to close These are just a few examples. For these
dialog popups. SPACEBAR is used to to work correctly, your website must be
activate buttons, to check and uncheck coded in an accessible way. If you don’t,
checkboxes, or to expand menus. users will face the following potential
ENTER is also used to expand a menu, problems when navigating with a
activate a button or link, or, additionally, keyboard.

17
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Focus states

Once focused, an interactive element can be manipulated or activated.

It’s mandatory to give users visual feedback on which interactive element is
currently highlighted on your page. If a user navigates to a link using a keyboard,
it must be highlighted.

WCAG 2.1 specifies how the focus element should appear in terms of the contrast
between text and its background, its size and shape, and that it should not be
obscure by any other elements. Making focused elements visible is a Level A
requirement in WCAG A (2.4.7)

of websites in Index do not

ensure controls change
appearance when they are
selected (WCAG A 2.4.7)

Focus order (or Navigation order)

The order in which elements receive focus when using keyboard navigation is
also important. The structure of your code dictates this, not how the elements
look on the screen.

Generally speaking, you must ensure that navigation is logical and intuitive.
That means organizing your page to follow the visual flow of left to right
and top to bottom.

18
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Poor website structure also impacts screen readers’ ability to read the contents
of the page in a logical order and it also impacts navigation.

Therefore, to create a more keyboard-accessible experience you should:

• Pay attention to the semantic structure of your web page by

ensuring the reading and navigation order is correct

• Use CSS to control the visual presentation of elements if necessary

Skipping to content

Lengthy navigation can cause problems for shouldn’t be made visible. Generally, this
users who need to get to the main content should be the first focused link on the page
of your web page quickly. on pressing TAB. Once selected, the user
should be sent straight to the main content
Let’s say your menu has 50 items, ten
in each of five columns. Because the (sometimes coded as a #main element in

navigation appears semantically high on your website) - that is, everything after the

your page, keyboard users must tab through navigation bar.

every one of these items, in turn, just to get Multiple “skip to content” links are also
to the main content. possible, depending on how complex

That is a fundamentally terrible user and information-rich your website is. For
experience for everyone using keyboard example, you might want to include a “skip
navigation, but far more so for users with to search” link as a second option.
motor impairments or blind people.
WCAG lists this Level A success
The solution is to ensure you have a criterion as “Bypass Blocks” in their
“Skip to content” link on your website. It documentation(2.4.1).

19
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Tab stops
Let’s imagine a user who needs to scroll through the five menu lists in the example above.

Tab stops allow users to step through the top-level menu items in turn. Pressing ENTER
then opens the menu and allows you to tab through the lower-level options.

Let’s imagine a user who needs to scroll through the three menu lists in the
example below

That would be a poor experience for everyone using keyboard navigation.

Be consistent in page layout

and semantics
Ensure that any navigable elements found Keeping the same semantic structure helps

on multiple pages are placed consistently keyboard navigation and screen readers.
Maintaining the same visual structure
on those pages.
reduces the cognitive burden of trying
That means if your website contains a to find a moved menu item between
navigation menu, a search box, or a login different pages.

button, you need to ensure that these Our webinar “Accessible Web Navigation”
remain in the same order on every page. explains these concepts in more detail.

20
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Add alternative text to images

(where appropriate)
Alternative text (or “alt text”) is used by screen readers to describe the contents
of an image to a user who may have difficulty seeing it. It should convey meaning
where possible.

Content editors, not developers, are generally responsible for the bulk of the
website material. This section is focused on helping them understand the
implications of implementing alt text incorrectly.

Alt text is covered in WCAG success criteria 1.1.1, “non-text content”.

In code, alt text is added using the alt=”your text goes here” attribute. You must use
this attribute on all images on your website.

However, you don’t need to include text inside the quotation marks all of the time.
I’ll cover this a little later in the “Always think of the context” part of this section.

But for now, just remember that alt=”” is required. Period.

63 60
% %

of all websites do not of all websites do not

specify alt text for all specify alt text for
media. images inside links

21
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

What is alt text for?

Consider this image, which depicts a photograph of a pear, a banana, and an apple. Let’s say
this appears on an online survey with a message asking you to choose your favorite fruit.

Please select from the following options

Sighted users can easily see each photo. They can use a mouse or keyboard to navigate to
one of the pictures and make their selection. Now, consider a blind or visually-impaired
user navigating with a screen reader. With incorrect or omitted alt text, these images might
be read out as “Image”, “Image”, and “Image”.

Please select from the following options

“Image” “Image” “Image”

22
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

With correct alt text, the image would be read out as “Pear”, “Banana”, and “Apple”.

Please select from the following options

“pear” “banana” “apple”

This is the reason we add alt text. Whatever you add to your images will be read aloud.

This example shows how incredibly useful alt text is to screen reader users. In fact, in this
example, it’s essential. Without alt text, screen reader users simply wouldn’t be able to
complete the action of choosing a fruit.

23
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

So just add alt text to all images and

we’re done?
Not quite. You might think that just alt text. Let’s take this example. It’s an
adding alt text with abandon solves the image that shows instructions on how to
problem. You would, however, be wrong, charge your phone.
unless you consider the context of your

The text reads “Charging the phone: phone”.

Connect the phone to a power outlet
Now, this is an example of an image that
using the cable and power adaptor
conveys useful, in fact in this case, critical,
provided”.
information, but the alt text does not. In
The image next to the text shows this case, a screen reader user will not get
a picture of a phone and charger, specific instructions on where to plug the
illustrating where to put the power cable power cables.
both at the phone end and at the power
This next image is identical, except the
outlet end.
alt text in the image reads “Plug cable
The alternative text reads “Charging into the bottom edge of the phone”.

24
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

So now, a screen reader user knows they You can understand that it’s not quite
must plug the cable into their phone to as simple as just adding text. You need
charge it. to make a judgment call as to whether
you think the image conveys information
Sighted users can see enough information
that is not otherwise present in the
in the image that they probably wouldn’t
surrounding text.
even need to read the text to be able to
work out what they need to do.

Information presented in a graph

Let’s take another example of crucial information presented in an image. One of the
most popular forms of visual communication of data is the graph. Imagine you have a
picture of a graph showing human population growth.

25
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

If you do not add either body text or alternative text describing what the information
shows, then this becomes useless to a screen reader user.

If this image appears without an explanation, and the alternative text is set to
something like “Human population growth”, then this is not only unhelpful but creates
a barrier to accessing this information.

Instead, the alt text should include the information the graph is trying to convey. In
this example, “Human population growth increased from under 1 billion in 1000 to 7.5
billion in 2017” would be more useful alt text.

Again, context is key here. You need to consider what is happening in the surrounding
text of the article or blog post, or whatever you are writing.

26
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Too much, or unnecessary, alt text?

Let’s take a common example of a menu containing both text and an
image or icon for each item.

Please select from the following options

The menu contains four text links, Auditory, Visual, Motor, and Cognitive.
There is an icon for each option next to each link.

What’s the correct way to present

alt text in this situation?
Well, if your idea is to add alt text to the icons explaining what they are, then you’d
actually be making the experience worse for screen readers.

In this case, each menu item would be read out something like “Ear receiving
sound – Image” followed by “Auditory – Link”.

27
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Please select from the following options

Consider the context here. Is a description of the icons in this menu useful?
They don’t add to the utility of this menu. Rather, they take away from it. Instead,
you should specify blank alternative text for each icon in the list.

Remember the mandatory code attribute alt=”” from earlier? Use that, but don’t
fill anything in between the quotation marks. This alerts screen readers to ignore
the image entirely, and mark it as purely decorative, which is an important
accessibility concept. By marking these icons as decorative, a much more pleasant
experience for the user results, as only the link text is read aloud.

28
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

The icons themselves still serve their purpose to sighted and even dyslexic users,
so they should remain of course. But for a visually impaired user, alt text would be a
hindrance if added.

In this new example, the images are ignored by screen readers, and the menu would
be read out as “Auditory - Link”, “Visual - Link”, “Motor - Link”, “Cognitive - Link”

What happens if I don’t have an alt

attribute on my images?
There is a big difference between Your CMS or website theme should ensure
specifying blank alt text and omitting the that the alt attribute is always present
alt text attribute (alt=””) entirely. on every image, with the option for your

If you do not include the alt attribute at content editors to add the alt text on a

all then a screen reader will do its best to per-image basis.

read out what it thinks should go in there, If they forget (and they will) then the
often with terrible results. image will be ignored entirely by screen

The best guess is usually just to read the readers. This is arguably better than having

filename. If that’s “Screenshot 2020-11-06 a filename read aloud, but still not a great
at 16.21.25”, that’s a big problem for your experience if the information contains
screen reader users. critical information.

29
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Always think of the context

You should consider the following And if you decide that alt text should be
questions when deciding whether to add added, consider:
alternative text.
• How can I describe this image’s
• Is this image purely decorative? information in context?
• Will important meaning be lost if no Finally, remember, there is a big
alt text is added? difference between specifying blank alt
• Does text content include important text and omitting alt text tags entirely.
information present in this image? By omitting, the screen reader will
• Will adding alt text to this image probably read the filename of the image.
make the user experience worse?

Pay attention to spelling in alt text

Make sure you’re spelling alt text correctly. Even though it’s not visible on the page,
spelling errors may confuse screen reader users.

Search engines also look at your alt text and use it when presenting the results of an
image search, which can be quite useful for SEO. Misspellings here may impact your
SEO to some extent.

Context and automated accessibility testing

Computers are not (yet) capable of understanding whether the alt text you add describes the
information in that image in a useful way. They can alert you if alt text is missing, and they
can even tell you if your alt text seems nonsensical (e.g. if it is a filename).

Silktide, for example, gives you this information but also prompts you for a manual review of
whether alt text is required or is appropriate, for all images on your websites.

30
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Ensure subtitles, captions,

transcripts and audio
descriptions are present
Everyone should be able to access video content. Accessible videos
include the following features:

• Subtitles • Audio descriptions

• Transcriptions • Captions

The accessibility requirements for video and audio media are

described in WCAG 1.2.1 and WCAG 1.2.2.

31
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Subtitles
Did you know that 70% of videos on indeed, non-native speakers of whichever
Facebook are watched without sound? language the audio is recorded in)
understand content more clearly, especially
From an accessibility standpoint, subtitles
if, for example, the words are spoken
are the text version of spoken dialogue
quickly or in a regional accent.
and narration. They are synced with the
content on the screen. There are several tools to help transcribe
audio into subtitles. If you’re uploading
Subtitles are arguably the absolute bare
videos to YouTube, for example, it will
minimum you should include in all video
do it for you (with varying degrees of
content for better accessibility. However
success - you will likely want to review
as you’ll see shortly, captions, transcriptions,
the file once completed and perform any
and audio descriptions are just as
manual changes).
important. You should include all of them
where appropriate. There are a few different file formats
available, but they all accomplish the same
Users in loud rooms or in other locations
thing in the same way. Spoken words are
where volume cannot be increased
split up and timestamps
(like trains, or the library) also benefit
are added, and this is how media
from subtitles.
players know when to show the text
They also help non-English speakers (or on the screen.

32
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Captions
Captions are designed for deaf people and are used to describe audio content that is
not narrated. Without captions, the context of what a deaf person sees on screen can
dramatically change.

Take this image. The protagonist, Anna, walks along the train tracks facing away from the
camera. She says “What a beautiful day”.

The caption below reads “[Train approaches]”

You can understand how the context of the image changes dramatically with the new
knowledge that there is the sound of an approaching train off-camera.
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Transcriptions
These differ from subtitles in that they are not time-coded snippets of text, but rather, the
full text of spoken dialogue written out in complete sentences. Transcripts are designed
so that users can read the spoken video content, or use a screen reader to read it to them.

They include only the dialogue. They do not include descriptions of what is happening
on screen.

Audio descriptions
Subtitles and transcriptions can’t tell the whole story, as often what is happening
on the screen is not narrated by the characters.

Audio descriptions introduce another voice that describes what is happening on the
screen. This is incredibly useful for blind users who otherwise would only be able to
hear the dialogue. But what if there is no dialogue?

A great example of how audio descriptions work in video content

is the Frozen 2 Disney trailer on YouTube.

of all websites fail to

provide captions for all
prerecorded audio and video

34
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Do not automatically play

media without allowing
users to stop them
In code, it’s possible to set HTML and video over 5 seconds long,
media (video or audio) to play using autoplay without adding user
the autoplay attribute, and further, controls is a WCAG accessibility
it’s possible to set the media to loop failure.
with the loop attribute.
Animations over 5 seconds long
However, it’s bad practice to do this should also contain controls to
without also allowing user control. pause or stop them. All automatically
It’s also considered good practice to
looping media must contain controls,
mute the audio by default.
regardless of their length.
For any audio over 3 seconds long,

Flashing content
Warnings must be given for any
content which includes flashes,
strobes, sudden loud sounds, or
other possible triggers for seizures.

Flashing content with more than 3

flashes per second is not allowed,
unless below certain thresholds for
size and color contrast.

35
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Test accessibility
on mobile devices

When the first iteration of WCAG 2.0 was • the content on the screen moving in
released in 2008, mobiles phones capable all directions when trying to scroll
of giving rich Internet experience barely
• being unable to zoom in and out of a
existed (the first iPhone was released
website and making fonts larger,
in 2007).
without breaking the layout
Accessibility fell short as mobile device
technology improved over the next ten There are others, including ensuring you
years, so WCAG 2.1 introduced a range of have sufficient button sizes and that you’ve
new testing criteria to address this. implemented autocomplete on form fields
Now, mobile device usage has overtaken (this is not exclusively a mobile issue but
desktop usage worldwide. certainly more useful for mobile users).
The main accessibility issues faced by There’s more on autocomplete in the “Form
mobile users include: styles and labeling” section a little later.

• being unable to view content in Let’s consider these issues, and why they
different orientations are important, in turn.

36
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Device orientation
People need to be able to view your content on mobile devices in any orientation.
That means your content should work for them whether their device is in portrait
or landscape mode.

Consider a user with cerebral palsy who uses a wheelchair. They may have a tablet
attached to their wheelchair. Your application or web page should work regardless
of whether the device is attached vertically or horizontally.

If you’ve employed a responsive design when building your site, then it should already
be viewable in both orientations.

Two - dimensional scrolling

Web pages should only scroll in one dimension. This means you should be able to scroll
either up and down, or left and right, but never both at the same time.

There are two main reasons that two-dimensional scrolling fails WCAG tests:

1) People with motor issues may not be able to scroll in two dimensions

2) Cognitive burden increases when scanning text across multiple

screen widths

Two-dimensional scrolling occurs when images,

tables, or other on-page elements are not
constrained to their container width
(i.e. they are too wide for the
current screen width).

Having to remember what

line of text you were on when
scrolling to the next line of text
increases the cognitive burden.

37
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

es don’t
b si te s fa il to ensure pag
of we reens
o d im e n si o ns on small sc
scroll in tw

Disabling pinch-to-zoom
Users must be allowed to zoom into a website using their mobile device
to increase the size of the text without breaking the layout.

Text and other on-page elements must flow correctly once zoomed in.

Pinch to zoom is enabled in web browsers by default, so in failing this

accessibility check in WCAG you would need to go out of your way to turn it off.

of all websites disable

pinch-to-zoom

38
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Begin with the design

Designers and UX teams should be aware of the need for accessibility in the
early stages of a new web project.

Specific examples of design impacts on accessibility include:

• Typography and font choice • Hierarchy and semantic heading structure

• Letter spacing • Form styling and labeling
• Color contrast of text and its background • Focus styling
• Minimize use of carousels • URL structure

There’s a lot to consider, but laying out a style guide at the beginning will help
your developers implement these when coding.

Typography and font choice

By choosing the correct font, you’ll improve legibility and readability for
people with moderate visual impairments, dyslexia, or a learning disability.
But how do you choose a “correct font”?

Ideally, you should consider the following issues.

BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Similar characters
Some fonts contain letters and numbers that look the same as
other letters and numbers. Examples often include the upper case
“i”, the number “1”, and the lower case “l”. The uppercase “o” and the
number zero can also look the same.

Ensure that additional strokes are included to distinguish these

characters from one another.

O 0 I
Uppercase O Zero Uppercase i
l
Lower case L

Mirroring
You should also ensure that mirroring is reduced. The lowercase letters “b” and “d”, or “p”
and “q” are often confused by young children and, sometimes, in later life by adults.

To avoid issues here, use a font that distinguishes these letters from one another
by including extra strokes, for example above the “p” and below the “b”.

bd pq
40
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Text spacing
Increasing space between and around text helps people with:

• Low vision

• Dyslexia

To ensure good readability, you should apply the following minimum

attributes to website text:

• Line height of at least 1.5 times the font size

• Spacing following paragraphs to be at least 2 times the font size

• Letter spacing to be at least 0.12 times the font size

• Word spacing to be at least 0.16 times the font size

quick brown fox

The
b r ow n f ox
The quick
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Color contrast of text

and its background
It’s important to maintain readability by ensuring the contrast between text color and
its background is sufficient.

Insufficient contrast affects people with low vision, and people using devices in bright
sunlight. For example, this yellow text on a red background fails all levels of WCAG.

Normal text requires a contrast ratio of at least 4.5:1, and large text must be at least 3:1.

of websites do not ensure text of links are indistinguishable by

has sufficient contrast more than just color

42
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Page headings and

semantic structure
We briefly mentioned earlier that screen readers rely on the semantic
structure of headings and content. Your design must ensure:

• Only one h1 per page

• Subheadings are nested and do not skip
• Paragraphs are nesting within headings
• Navigation, main content, sidebars, and footers appear in code in the
correct order, regardless of where they appear on the page

Developers are responsible for implementing your design but you must
ensure you give them the correct information to work from.

of websites fail to ensure every

page contains a heading

of websites fail to ensure every

heading contains text

43
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Form styling and labeling

Accessible forms are not just about design, they’re also about user experience.

Creating accessible forms is a huge topic in itself. There are, however, a few
fundamentals to get right in the design process.

You should pay attention to their appearance, the semantics, and the user flow.

Appearance
There are several elements available to you when creating forms, including fields,
dropdowns, checkboxes, star ratings, and buttons. It’s important to ensure you adhere
to the WCAG non-text color contrast specifications when creating these elements.

Boundaries
This is a relatively new concept in WCAG 2.1 that refers to the contrast of form
elements. Specifically, whether or not you can determine where the element is
and what it is, visually.
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

You should ensure that there is relatively high contrast between the
form element and its surroundings.

Take these two examples:

On the left, the input field has a thicker, high this instance is 1.4.11: Non-text contrast).
contrast border that easily distinguishes the form
A key aspect of this requirement is not that you
field from the background.
must add thick black borders to everything, but
On the right, there is a light grey border against that you must make the elements clear.
a white background, creating a less obvious
Another way to achieve this is to simply change
distinction between the two.
the background color accordingly. However, you
The example on the right would not pass the must ensure that this difference has a contrast
WCAG success criterion for boundaries (which in ratio of at least 4.5:1 to meet WCAG Level A.

45
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Further examples of
insufficient contrast
This image depicts a form containing a dropdown menu, a checkbox,
a rating widget, and a toggle button.

None of these elements would pass WCAG as at least one aspect of their
color contrast is too low.

If you compare this with a more accessible variant, you can see the
difference between the two.

46
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

The borders around elements are darker, the text is more contrasting with its
background, and elements like the reviews widget are clearer.

So, why is this important?

Well, people with moderate visual impairments might view your form like this:

This is a simulated view of moderately It’s therefore very important you ensure
blurred vision. Notice how the borders you adhere to the WCAG color contrast
around the dropdown and the toggle
specifications when creating your form.
button are invisible in the version on
You should also ensure that focused
the left?
elements (the highlighted input field) are
A lot of important information is
sufficiently differentiated from
completely lost. Insufficient contrast
prevents people with low vision from other fields.

using forms.

47
 BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Labels and placeholders

Labels and placeholders are not the same things. Labels are necessary and should sit
outside of the form field as a permanent reminder of the purpose of that field. Labels
are usually placed above the field they are related to.

Placeholders can be used to illustrate field once the placeholder text is no longer
examples of the content that needs to present. So, where do people get this
be input into a particular field. However, wrong?
placeholders are not substitutes for labels.
In this example, the developer has created
This is because when a user starts typing
this form field and used the placeholder as
into a box, the placeholder text disappears.
a label. There are a few problems with this
This adds an unnecessary cognitive burden, approach.
as people can forget the purpose of the

48
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Firstly, the grey placeholder text on

this white background causes issues for
people with moderate visual impairments
as outlined above - they may not even
see this text.

Secondly, when you start typing in

this field, you no longer know what
information you are being asked to
provide. This is because placeholder
text disappears when you begin to type.

This example may seem slightly

simplistic, as there is only one field.
But consider a multi-field form with
only placeholder text, like this.

Because the user has already filled

in similar forms, parts of this form
have already been autocompleted by
the browser, you’d have to take an
educated guess as to what each field is
supposed to be.

Here are three common ways labels are

implemented in form design.

49
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

The first approach has the obvious

advantage of being able to fit on a
small display.

The second is perhaps not so good for

mobile devices, as there’s less room
available to type in the box.

The third, while quite trendy, may or may

not be better for accessibility. However,
none of these are strictly covered under
WCAG so you should use your best
judgment when choosing.

The importance of form labels cannot

be understated. They are therefore
mandatory under WCAG 3.3.2.

websites fail to ensure form

controls have labels

Focus
Each form control has a ‘focus state’. This is implemented as a way to clearly
see which element is currently selected, usually by changing its color.

In this example, the email input box has been selected and is currently
highlighted with an obvious blue border.

50
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

While most people are familiar with this, People who are unable to use a mouse or
something that is less obvious to many who otherwise use keyboard navigation
developers is that checkboxes and buttons may instead tab through form controls.
also need to be highlighted when focused. They rely on those controls to change
visually so they know which is currently
The reason it’s less obvious is that most
selected.
users would select these controls
using a mouse because they can easily WCAG 2.1 does not state specifics as to
navigate to them and interact with how you should implement this, only that
them visually. Alternatively, they might be you should.
used to tapping on them if using
In the upcoming WCAG 2.2 specification,
a mobile mouse
however, clear guidelines have been written
But what about users who select form to state just how contrasting the focus
controls differently? state should be for these form controls.

51
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Without focus, forms are unusable via keyboard. This corresponds to many assistive
technologies, like switches.

Focus state is required under WCAG 2.4.7 and 1.4.1

Valid and invalid states

Commonly, when a user enters incorrect given this feedback is important. Often,
information into a form, they cannot developers implement color to indicate
proceed. There’s usually some feedback as that a field has incorrect information inside.
to why this is the case, and the user is given
In the below example the user is made
the opportunity to correct their information
aware that the information in the field on
before proceeding.
the left is incorrect, as it does not contain
Obvious examples include the mistyping a complete email address, by adding a red
of an email address or an incorrectly- color to the form control.
formatted zip code.
The field on the right is indicated as correct
The mechanism by which a user is by being colored in green.

52
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

However, imagine that your user is color blind or has some other impairment meaning that
distinguishing between these two colors is difficult. They may not see color at all, such as
in this example.

In this case, the form does not work and the user doesn’t know why. Using color alone
is not an accessible way to convey information.

The solution is to either add a visual marker, like a tick or cross symbol or add additional
explanatory text. Ideally, you should do both for the most accessible experience.

53
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Even without color, this example still works.

So, why is this important?

Not all users can see color, and without an alternative method of conveying
information, this becomes inaccessible.

Conveying meaning without using color alone is a requirement under WCAG 1.4.1

Autocomplete
Autocomplete is an essential requirement this information in automatically for the
of WCAG 2.1 (WCAG 1.3.5 Identify Input user.
Purpose).
There are many standardised autocomplete
The key thing to remember is that attributes available. The most common
autocomplete is a way for you to say what are things like name, email, and tel. In
a field is supposed to contain in a standard code, the input type is set to one of these
way, so that if possible, the browser will fill attributes.

54
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Browsers then attempt to fill this keyboard, or not use a keyboard at all.
information automatically from the Autocomplete greatly enhanced the
user’s device. experience of these users by reducing the

Why is autocomplete important? Well, burden of inputting characters with some

WCAG 2.1 aims to minimize typing assistive technologies (for example, a

where possible. keyboard switch).

If information is pre-filled, then people Finally, autocomplete benefits all users by

with language and memory-related simply speeding up the process of filling

disabilities benefit by not having to in forms. Typing in postal addresses into

remember complex information. online checkout forms can be avoided

completely, as can pre-filling email
Any users with moderate to severe motor
addresses into product signup forms.
impairments may have limited use of a

Use descriptive and unique URLs

Links are the most important way for users to navigate through your website.
People use links to:

• Navigate your content • Open their email program automatically

• Download or view documents online • and many more

All links should:

• Avoid duplicating link text unless the destination is the same.

• Link text should be meaningful when read out of context
• Help users understand where the link goes

In terms of accessibility, these items are important, because blind users or those
with moderate to severe visual impairments may use a screen reader when visiting
your website.

55
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Due to the nature of how screen readers work, each link is read aloud. It’s
possible to navigate through your page by tabbing to each link, in turn,
skipping the content in between.

Therefore, if all your link text says “Read more” or “Click here”, the user will hear:

“Read more” “Read more” “Read more”

This is not a great user experience. Would you know where the link goes by
listening to these options?

Another example is a website that has these two sentences, linking to news
about the company and news about its products.

Read more about our company news.

Read more about our product news.

If a user is skipping through links on your page, the text in the sentences will not
be read, and all they will hear is:

“News - Link” “News - Link”

56
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

In this instance, a solution would be to Now, the screen reader will say:
change the link text so that they are a)
“Company news - Link”
unique, and b) understandable out of context.
“Product news - Link”
For example:
It’s a simple change, but not something the
• Read more about our company news. average content editor will be aware of. Most
• Read more about our product news. aren’t even aware they aren’t aware of it.

How to ensure
better-quality links
When you add links, think how they would
look and sound if there was no surrounding
text. Do they still make sense out of
context?
of websites do not explain
Even the examples above could be made
the purpose of their links.
better. Change the entire sentence to a link,
like this:
example, Dave Smith.
• Read more about our company news. • When linking to a document, including
• Read more about our product news. the file type and size. For example,
Download our guide to accessibility
Screen readers would say:
(PDF. 3MB). This is so the user can
“Read more about our company news - Link” know in advance how big the file is
and approximately how long it will take
“Read more about our product news - Link”
to download.
Other best practices are:
Avoid adding a full url in the text of the
• When linking to an email address, link. Instead of writing “Visit https://silktide.
encompass the whole name, for com/”, write “Visit the Silktide website”.

57
 BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Minimize the use of PDFs

or, if unavoidable, make sure
they’re accessible.
PDFs are generally the bane of any web content manager’s life, especially those in sectors
that must adhere to accessibility legislation. This is because they are difficult to make
accessible and staff don’t understand why they need to. It’s also difficult to retrospectively
make PDFs accessible without the source document available.

Best practice is simply to avoid PDFs entirely. Create HTML (web) versions of PDFs. You can
add information to web pages and build accessible forms with less effort than creating
PDFs, plus electronic form submissions are easier to track.

For more information visit the UK Government

Digital Service website.

Staff don’t understand

why they need to make
PDFs accessible

58
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

PDFs are easy to make look consistent, but • Maintainability

they are far harder to make accessible. By • Mobile experience
default, the information you need to make
If you’ve read all this and are still adamant
them accessible is simply not there.
that you want to create accessible PDFS,
So in summary, PDFs are great for: then you should watch the Silktide webinar
“How to make PDFs accessible”.
• Portability
In that webinar we teach you how to:
• Permanence
• Build an accessible PDF using Word
• Printed media
• Make an existing PDF accessible
Unfortunately, these same qualities without the source document
make them terrible for:
• Make an existing PDF accessible with
• Accessibility the source document

of websites fail to add of websites fail to define of websites fail to specify

bookmarks to long PDFs a title for PDFs a default language

of websites do of websites fail to specify a

not tag PDFs heading on PDFs

59
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Check the readability

Generally speaking, you should aim for your a lower secondary level of education
content to be readable by a wide audience. (7-9 years of schooling) is present, then

Easier to read text is more accessible, more supplementary content should be available.

usable, and gives a greater sense of fluency Supplementary content may include:
to the end-user.
• Summary paragraphs aimed at a
Even websites with a highly educated
lower reading age
audience benefit from easy-to-understand
• Illustrations of complex concepts
content. You want to make your readers feel
in a simpler form
smart, not stupid.
• An audio version of web content
For sites concerned with accessibility,
Of course, it’s not possible to get complex
hard-to-read text can be a serious barrier
topics across to someone with only a few
to understanding. Readability has also been
years of schooling, but that’s not the point,
mentioned as a possible ranking variable
nor is it realistic. WCAG simply suggests
for search engines, although evidence for
that you summarise complex information
this is mixed.
in a more readable way, alongside the
WCAG 3.1.5 states that if complex technical content.
information requiring a minimum of

60
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Specifying languages
On a more technical note and somewhat related, you should set the default
language of a page so that screen readers can convert text into the correct
speech patterns and inflections. It’s a Level A requirement so you should consider
this mandatory.

Specifying the language attribute also enables Google Translate to automatically

offer suggested translation on page load.

of websites fail to
specify a language
on everypage
Chapter 3

The ROI of Web

Accessibility
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

The ROI of Web

Accessibility
We’ve talked a lot about why you should create a better experience for
everyone by making a more accessible website.

The benefits to most users are clear, but businesses often look for some
indication of the ROI of investing in web accessibility.

Following are some statistics to illustrate.

Summary
• There are 14.1 million disabled • Almost everyone experiences temporary
people in the UK and this number is or situational impairments (e.g. noise,
increasing (source). poor lighting, distractions); these people
benefit from web accessibility (source).
• The spending power of UK families
with at least one disabled person is • 97.4% of the top 1 million websites
an estimated £274 billion / year (source). have clear accessibility issues (source).

• 71% of disabled people abandon • 93% of disabled users don’t report

websites which present access inaccessible websites to their owners
barriers (source). (source).

63
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Prevalence
In 2020, there were 14.1 million disabled temporary or situational impairment.
people in the UK (source: GOV.UK).
Consider that In the United States, about
• 8% of children are disabled 26,000 people a year suffer from loss
• 19% of working-age adults are disabled of upper extremities. But the number
• 46% of pension age adults are disabled
of people with similar temporary and

However, these figures drastically situational impairments exceeds 20 million

understate the number of people with a (source: Microsoft).

TOTAL

21M
Source: Microsoft
Inclusive Design
Permanent Temporary Situational

Other examples:

• Distracted users watching TV due to their environment:

benefit from websites that impose at work, or at a bar
a lower cognitive burden on them
• Most users are now on mobile
• Users with mobility impairments, devices, and the idea of a user
say riding a train, who benefit from sitting down to experience your
decently sized buttons, and website on a computer, in a quiet
forgiving controls.
room is now the exception, not
• Users unable to experience sound, the rule.

64
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Business case
Legal risk

Legal risk varies enormously by country and between private

and public sector organizations. Most countries have adopted
legislation build around the WCAG standard.

Have adopted WCAG 2.0

Recommend or reference WCAG 2.0

Have adopted WCAG 1.0

65
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

In the UK, the Disability Discrimination High court, which is difficult and expensive;
Act (1995) and Equality Act (2010) make although several cases have been initiated,
it unlawful for a service provider to all of these were settled out of court.
discriminate against a disabled person by
Conversely in the US, the Americans with
refusing to provide the service or providing
Disabilities Act (ADA) and Section 508 of
a worse service because of their disability.
the Rehabilitation Act (1973) are widely
At the time of writing, although the UK used, and present a substantial risk of high
public sector organizations have clearly compensation. In 2020, 10,982 ADA Title
enforced standards, the legal risk for III lawsuits were filed in federal court, a
private organizations is relatively low. A number that was barely slowed by the
customer would need to demonstrate a COVID-19 pandemic.
breach of the Equality Act in a County or

66
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

These trends are accelerating drastically. During January 2021, 1,108 cases were
filed – the most ever in a single month (source).

Globally, more legislation is being introduced over time, and although laws rarely change,
the trend is pointing towards more regulation with stricter enforcement.

Globally, more legislation is

being introduced over time

67
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Commercial opportunity
Modern organizations are seeing a transition similar to what happened with diversity
and inclusion: what was initially seen as a frustrating new challenge, is increasingly
being recognized as an incredible opportunity.

In the UK, 22% of all people report a disability (source: National Statistics); for people
of state pension age, this is 46%. These numbers are increasing over time:

68
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

The total spending power of families with Many components of accessibility are
at least one disabled person in the UK is closely aligned with Search Engine
estimated at £274 billion a year (source). Optimization (SEO), including the use
71% of people with a disability people will of alternative text, headings, landmarks,
abandon a website that presents them with semantics, captions, page titles, languages,
access barriers (source). code quality, and link size.

Add to this the much higher number of Improving accessibility can therefore
people who have a temporary or situational improve search engine placement and
disability, who benefit from the improved traffic (source: W3C).
user experience of an accessible website.
An accessible mobile experience is both
Considered as a facet of website usability, a key ranking factor (source: Google) and
the commercial opportunity of improving a requirement of modern accessibility
accessibility is enormous. On average, standards (WCAG 2.1 and later). Websites
e-commerce websites that redesign rank differently in Google on mobile
for better usability double their sales; and desktop devices, depending on how
accessibility is a component of these gains. accessible they are on mobile:

69
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Brand and reputation

Organizations who embrace accessibility can benefit from the positive press that
accessibility attracts, such as BBC’s coverage of Ticketmaster.

The reputational damage from being inaccessible is hard to quantify but is present.
Inaccessible websites are by definition, delivering an inferior user experience, which
means lower customer retention, and fewer recommendations.

Consider that the largest two companies in the world, as measured by market
capitalization at the time of writing, are Microsoft and Apple. Both invest heavily
into world-leading accessibility, which is prevalent throughout their products,
services, training, brands, and marketing. Apple has had public accessibility guidelines
available for its operating system since 1987.

70
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Costs and solutions

The cost of making a website accessible Silktide is designed to help organizations
is generally a small fraction of the overall identify and remediate accessibility issues
cost of the website as a whole. This fixed quickly, and at scale. Wherever possible,
cost is almost always a negligible fraction issues are identified automatically, and
of the expected returns. Silktide helps teams share, triage, and
understand how to fix them in the most
Once the correct processes, tools, and
efficient way.
training are in place, the overhead for
keeping a website accessible drops By providing clear and transparent scoring
significantly, so long as it’s done properly. of the different areas of your web estate,
Silktide helps to align your teams. They
A further concern can be how accessibility
can view their progress easily, regularly,
can reduce the responsiveness of your
and across business departments. Together,
team. By introducing additional processes,
scores help incentivize team members to
accessibility can slow down the rate at
care about and excel at accessibility.
which websites can be developed or
updated.

Further reading

• The Business Case for Digital Accessibility (W3C)

• Accessibility of top 1 million websites (WebAIM)

• Assessing the online shopping experience of customers with disabilities,

and the costs to business of ignoring them (Enterprise rent-a-car)

• We analyzed 6,554 websites for accessibility issues and here are the results (Silktide)

71
Chapter 4

Conclusion
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Conclusion
Web accessibility problems affect litigation, you’ll improve your SEO, create
everybody, and often, the solution to a a better experience for all your users, and
single issue creates a better experience have a positive impact on your brand
for all users. perception.

Fixing poor web accessibility should be While the topic of web accessibility can
seen not as an expensive, time-consuming seem overwhelming, it’s possible to make
endeavour, but as an opportunity to good headway in fixing common issues
improve. relatively quickly, as long as you know
where to look.
Not only will you reduce your risk of

Accessibility and the law

Depending on your location and your Disabilities Act extends to ‘places of
sector, you may be subject to laws requiring public accommodation’, and this includes
that your website is sufficiently accessible (depending on your location and sector)
to certain recognised standards. your website.
The consequences for non-compliance
U.S. organizations with poor web
may be severe.
accessibility leave themselves vulnerable
In Europe, the EU Web Accessibility to litigation, with hefty fines levied against
Directive applies to all public sector large companies in recent years. The
websites, and states that these websites number of ADA web accessibility lawsuits
must be accessible to WCAG 2.1 standards. filed is increasing.

In the U.S., the Americans with

73
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Finding and fixing web

accessibility issues
A single issue may affect every page on accessibility score from 35 to 99.
your website (a good example of this is a
They were able to do this for a number
missing Skip to Content link), so by fixing
of reasons. Firstly, Silktide was able to
that you’ll have a big impact on both
find accessibility issues automatically
usability and accessibility.
across their websites, including mobile
We identified many common accessibility accessibility issues.
issues in websites around the world in the Secondly, Silktide helped educate their
Silktide Index. The data clearly shows that web team in accessibility by including
no sector or location is immune to web information and suggestions on how
accessibility issues. to fix the issues in plain language.

While creating and managing an accessible Finally, Silktide’s platform improved the
website might seem like a monumental team’s workflow by listing out all the issues
challenge, given the general lack of in one place, and allowed the team to
awareness, lack of resources, or inability segment their websites and assign work
to find current accessibility problems, with to individuals.
the right tools it’s possible to create a more
This created a much more efficient way of
accessible website relatively quickly.
working and allowed the team to rapidly
For example, in just five weeks the Royal improve accessibility by working on the
Cornwall Hospitals NHS Trust, a UK-based higher priority issues (those identified as
healthcare provider, increased their Silktide having the most impact) first.

74
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Next steps
The best place to begin is by starting a worked closely with Silktide to improve
conversation about web accessibility in their accessibility. The figures prove that
your organization. over time,
these sectors have massively improved.
We’ve supported many organizations with
accessibility, and work closely with the Conversely, the private sector is still
public sector. lagging behind somewhat. You can see a
comparison in average accessibility scores
Over the last few years, government
across two sample sectors here.
agencies and healthcare providers have

75
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

Our (January 2022) data shows a marked Indeed, in February 2020 when Silktide first
difference in average accessibility scores tested UK Councils the average score was
between the public and private sector. ten points lower across the board.

Most of the UK FTSE websites score Over time, we hope to see average scores
between 40 and 70, while most UK Councils improve across all sectors, whether private
score between 70 and 100. or public, as more organizations start their
accessibility conversations.
This is likely to be more of a case of
ignorance on the part of FTSE businesses
rather than wilfully neglecting web
accessibility.

76
BEST PRACTICES FOR IMPLEMENTING
GREAT WEB ACCESSIBILITY

About Silktide
We’re the web intelligence company social, speed, and legal compliance.
helping businesses and organizations make
Our clients are located around the world,
their websites better.
and we help large organizations in both
Founded in 2001, Silktide helps thousands the public and private sectors improve
of customers analyze tens of millions of their websites.
websites every year. Our users are found in
Our mission is to make the web a better
over 900 cities around the globe.
place.
We cover almost every aspect of an
organization’s web presence, including
content, accessibility, marketing, mobile,
silktide.com