The Must-Have

Accessibility
Handbook 2017 Edition

This handbook provides everything you need to know to make your digital
presence accessible. It includes a simple and thorough explanation of accessibility,
where to begin, quick wins, best practices, tips and tricks, and more.
How to Use This Handbook

This handbook aims to give you an introduction to accessibility from various perspectives, helping you define roles
and responsibilities and understanding the list of tasks at hand. It also gives you an introduction to Siteimprove
Accessibility.

The handbook has two main sections:

OO A Beginner’s Guide to Digital Accessibility
OO A Beginner’s Guide to Siteimprove Accessibility

You can use the entire document as learning material or as a reference to look up specific areas of interest.

Who Should Use This Handbook?

Accessibility is relevant to anyone working with websites, regardless of whether you are a web designer, web
developer, web manager, or web editor. Generally speaking, digital accessibility is quite technical, and many aspects
are established in the development phase.

Major Takeaways

OO Digital accessibility overview

OO Roles and responsibilities involved in digital accessibility
OO Priority areas and quick wins
OO How to fix errors with Siteimprove Accessibility
CLICK to open the corresponding section

PART 1 →
A BEGINNER’S GUIDE
TO DIGITAL ACCESSIBILITY

PART 2 →
A BEGINNER’S GUIDE
TO SITEIMPROVE ACCESSIBILITY
CONTENTS_ Part 1
A Beginner’s Guide
to Digital Accessibility

What are Assistive Technologies? 5

What is Digital Accessibility? 5

What are WCAG 2.0 Guidelines and Who Defines Them? 6

The Process of Achieving Digital Accessibility 6

Defining Resources 7

Roles and Responsibilities of Digital Accessibility 7

Web Managers 7
Web Designers 8
Web Developers 8
Web Editors and Content Creators 11

Developing or Redesigning a Website 12

Requirements Specifications 12
Design and Development 13
Publishing Content 13
Migrating Media Players, Forms, and Old Content 13

Accessibility Top 5 14

Digital Accessibility Resources 14

← GO BACK to overview
Part 1:
A Beginner’s Guide to
Digital Accessibility
Surveys show that up to 1 in 5 people have a disability What are Assistive
that affects the way they use the internet. These Technologies?
disabilities encompass physical and cognitive barriers People with disabilities such as low vision, cognitive
including color blindness, full blindness, hearing loss, challenges, and hearing or motor impairments often
dyslexia, paralysis, and more. Without an accessible utilize assistive technologies when using the internet.
website, 20% of internet users will encounter By presenting content in a different way, such as
difficulties trying to navigate a site. reading a page aloud, these technologies assist the
user in writing, spelling, reading, and navigating. It
Having an accessible website not only increases your is important for software and websites to comply
potential number of users, but it also increases search with the standards that allow assistive technologies
engine optimization (SEO) and improves usability for to interpret and render content properly. The Web
every user, regardless of ability. Achieving accessibility Accessibility Initiative (WAI) provides information on
on your website is worth the investment. You ensure how different types of users browse the web and the
that all people, including those with disabilities and technologies used: w3.org/WAI/intro/people-use-
web/browsing.

What is Digital Accessibility?

If you look at all areas of user experience (UX) on the
internet, accessibility is one of many. Accessibility can
and should be considered a fundamental technical
foundation on which you build other aspects such as
usability.

The term “accessibility” is used widely, but according

to the World Wide Web Consortium (W3C), web
accessibility means that people with disabilities can
perceive, understand, navigate, interact with, and
contribute to the web.

Digital accessibility is about technical provisions. It is

reading difficulties, can use your web pages with very much about how websites are implemented and
ease. It allows most internet browsers and assistive the tools that are used to publish content on websites.
technologies to render content in an understandable But accessibility is not just about techniques; the
way. way you communicate on web pages can also affect
accessibility. This is described in detail in the section
Roles and Responsibilities of Digital Accessibility.

5
 not have to relate to all the criteria. It is easier to
What are WCAG 2.0 Guidelines pick out areas that are relevant to your specific role.
and Who Defines Them? For instance, if you are a developer, a high number
The W3C is the organization that standardizes the
of criteria are relevant to you. If you are a content
internet. The W3C working group Web Accessibility
management system (CMS) provider, another set
Initiative (WAI) defines and composes guidelines for
of criteria are relevant for you. And if you are a web
proper web accessibility. These globally recognized
content editor, a third set of criteria are relevant to
guidelines are called the Web Content Accessibility
you.
Guidelines (WCAG) and are formulated in such a way
that if a website complies, it also ensures a robustness
The Process of Achieving
that allows most user agents (such as internet
Digital Accessibility
browsers and assistive technologies) to interpret web
Web accessibility isn’t achieved solely through a
pages in a consistent way.
website development project; it is a process. To be
successful, accessibility must be part of the overall
WCAG was originally written in English and has since
website strategy.
been translated into 16 other languages, plus several
more “unauthorized translations.”
Accessibility can often be neglected in a website’s
strategy. The project manager usually has too much
WCAG 1.0 was first introduced in 1999, and the current
on his/her plate, and accessibility can slip through
2.0 version of WCAG was released in December 2008.
the cracks. It isn’t neglected as a result of not caring
Version 2.1 is in development and is set to release
or a lack of interest, but because there is not enough
June 2018. Primary contributions are expected
transparency with vendors. The tendency is to
to come from the Mobile Accessibility Task Force,
assume that adding accessibility to your requirement
Cognitive and Learning Disabilities Accessibility Task
specifications means it will be taken care of.
Force, Low Vision Task Force, and public input.
Unfortunately, this is not always the case.

As of now, WCAG 2.0 is divided into four main

Another problem is that many web managers do not
principles: Perceivable, Operable, Understandable,
know enough about accessibility to know that proper
and Robust. Each of these principles are divided into
web accessibility is a process rather than just a coding
guidelines that are further divided into individual
task during development.
success criteria. These success criteria are most
often used as compliance requirements around the
Accessibility isn’t something that can simply be added
world. The criteria are divided into three levels: A, AA,
into the current web project and the new website
and AAA. Level A criteria affect the largest number
budget. For example, if you want to add a video to
of potential users in the most severe ways. In most
your website and want it to conform to Level AA
countries, websites should be compliant to Level
guidelines, which is mandatory in many cases around
AA, encompassing the first and second levels of
the world, there are many aspects to consider. You
accessibility requirements. Becoming completely AAA
must provide captions, audio description, and several
compliant is challenging, and these criteria affect the
other things. If you wish to conform on Level AAA, you
least number of users in minor ways.
must also provide sign language of the content. Do
you have the resources for this every time you upload
Level A and AA include 38 criteria, and these are the
a video to the website?
framework for the rest of this handbook.

Accessibility is relevant throughout the lifetime of

The structure and details of WCAG 2.0 are somewhat
your website. Every time you integrate a third-party
complex. It takes a lot of work to understand and
solution or you upload video or audio content, you
interpret the guidelines, but in most cases, you do
must consider accessibility. The content editing

6
process and the website’s CMS also influence the
OO Who takes responsibilities for accessibility
situation, and in some cases need to be revisited. during design and development?
OO How will we track our progress toward
It’s a good idea to create a strategy for accessibility ­becoming accessible and who will hold us
goals and how you plan to achieve them. It is also accountable?
important to integrate accessibility criteria into the
OO Who will organize training for not only the web
organization’s communications policy, design guide, team but the entire organization?
policy for purchase, and so on. Create a matrix of
stakeholders in the process. Web Managers
If you are responsible for achieving accessibility on
Defining Resources a website, then all WCAG 2.0 criteria are relevant
Assessing a website and its compliance with to you (usually on Level AA). It is necessary to have
accessibility guidelines requires a considerable a fundamental understanding of the subject in
amount of work and knowledge. First, clarify the order to see a project through from development to
roles and responsibilities and which areas you can compliance. It is also important to understand the
tackle within the organization and which ones require requirement specifications, as well as any accessibility
outside help. This is relevant for both testing and legislation that directly applies to your organization.
fixing accessibility issues. You must also train your web editor colleagues on
how to publish content accessibly. This way, any new
Many issues can be fixed within the organization, and content enhances your site’s accessibility and does
some issues require outside help. Sort through the list not create new accessibility issues.
of issues and divide them into these categories.
It is also vital to integrate relevant accessibility criteria
Remember that issues on Level A are considered into policies and brand guidelines and to educate the
most important, and Level AA issues are considered entire organization on any changes.
second most important. You can pick from Level AAA
depending on the types of pages and target users. If your team is updating an existing website, it is often
a question of “Realistically, what can be fixed now?”
Roles and Responsibilities of Start by using tools that can give you a quick overview
Digital Accessibility of issues. For large websites, this effort most likely
Dividing ownership and establishing responsibilities needs to be prioritized. Begin with your front page and
is crucial. It helps to have an accessibility coordinator a selection of template pages. Often, these require
or a go-to person who is consulted when questions minor adjustments in the CSS or in a template, and an
or decisions arise. These could involve general issue will be fixed across all pages. If there is special
accessibility knowledge, re-structuring, new content on some web pages such as video, dynamic
purchases and integration, change of existing policies, content, or self-services, it is a good idea to include
and more. these pages as well.

It is also a good idea to divide your strategy into areas There may be areas where a quick fix is not possible,
of responsibility and subsidiary goals: and that should be directed to development. Write
OO What dependencies do we have on vendors these down so you don’t forget and bring them up in
and who will start a dialogue with them? the next relevant meeting.
OO Who will ensure that accessibility is i­ ntegrated
into different organizational policies? Looking long-term, create a strategy for testing
­(Communications policy, design guide, policy accessibility on a regular basis. Whether it is weekly,
for purchase, etc.)
monthly, quarterly, or bi-annually, decide what is

7
realistic and necessary for your organization. who are color blind. For instance, conveying links
within text should go beyond making them a different
Web Designers color. Supplement them with underlined text, a
As a web designer, several accessibility criteria are symbol, etc. (Success criterion 1.4.1)
especially important to help you create an inclusive
website for as many users as possible. In order for visually impaired users to read all the text
on web pages, it is important that the color of the
Consistent Design text and the color of the background are in sufficient
For accessibility and general UX purposes, it is contrast with one other. This can be achieved by
important that design is consistent across all your conforming to the required contrast ratio of 4.5:1 for
web pages. Global elements such as menus and help regular text and 3:1 for large text. There are a number
facilities should appear in the same order everywhere of tools available to assist in measuring contrast ratios
on the site, and it is also important that elements quickly. (Success criterion 1.4.3)
with the same function (such as icons and references)
are ordered in the same way on every page (Success Links
criteria 3.2.3 and 3.2.4). When an element on a web page is a link or something
clickable, it is important for the link text or element
Navigation description to make sense when read out of context.
In order for users to find information easily, there Link texts such as “Read more,” “Click here,” or “here”
should be more than one way to find specific content are examples of poor link text, because visitors using
on a web page. A user can find content on a page by screen readers or other assistive technologies will be
navigating through the intended page hierarchy, but unable to decipher where the link will lead without
it should also be possible to find the page in another the proper context. Be specific and concise within link
way through a sitemap, an index, or a search function text, such as “Click here to download the Accessibility
(Success criterion 2.4.5). This allows visitors using Checklist.” (Success criterion 2.4.4)
keyboard navigation to find exactly what they need
without barriers. Interactive Elements
When designing interactive elements, it should be
Headings clear to users what is to be entered, chosen, checked,
When designing the look, feel, and architecture of a etc. When text fields, drop-downs, check boxes, and
website, keep in mind that some users cannot get a radio buttons are used, they should always have
visual overview of a web page; they have to do this descriptive text associated. (Success criteria 2.4.6 and
structurally. Make sure pages are divided into logical 3.3.2)
sections, each with a heading that describes the
content so that assistive technologies can render Web Developers
them as section headings. To do this properly, Page Titles
sections must be tagged with headings such as <h1>, Make sure that all web pages have a descriptive title
<h2>, <h3>, and so on. Places on the site where you reflecting the page’s content. Also make sure that web
wish to logically and visually highlight an area by editors can enter page titles via the authoring tool (for
using bold font/large font/another color, this heading example CMS). (Success criterion 2.4.2)
should also be highlighted in the code so the heading
not only functions visually, but also structurally. Headings
(Success criteria 1.3.1 and 2.4.6) Not every CMS adds headings automatically. A
website’s main areas must be categorized by
Use of Color headings, often manually within the code. Pay special
A web page with information or data represented attention to headings when creating templates.
solely by color is frustrating and ineffective for users (Success criteria 1.3.1 and 2.4.10)

8
Keyboard Navigation The CMS should also give web editors the ability to tag
All content on a web page should be navigable both text that appears in a different language than the rest
with a computer mouse and from the keyboard of the page and choose the correct language for this
alone. This applies to forms, buttons, links, and more. part. The tagging should add the lang=”” attribute in
(Success criteria 2.1, 2.1.1, and 2.1.2) the code.

Some users are unable to use a computer mouse Coding

and instead use the keyboard to navigate by tabbing In order for the website to display consistently across
through content on a web page. Because these users different platforms such as operating systems and
must always be able to see where they are located browsers—and for assistive technologies to render
on the page, the indicator should always be visually content in a meaningful way—you should comply with
evident. (Success criterion 2.4.7) Most browsers format standards. (Success criterion 4.1.1)
automatically show this with a dotted line around
the content. You can also implement your own If, for instance, you are publishing in XHTML 1.0 or
way of showing this. Note: some Reset Stylesheets HTML 5.0, follow the syntax rules for this format. You
remove this highlighting, so be sure to address this can check your web pages for syntax errors within
highlighting within the Reset CSS. tools such as Siteimprove Accessibility or at validator.
w3.org.
Forms
Placeholder text that indicates the purpose of a form Also make sure that elements are marked up with the
field is not sufficient instructions for users. To make code that is intended for the purpose. For example,
sure users can identify and use a form or search field, HTML headings should be tagged as <h1>, <h2>, and
explicitly add text to the field through a label. (Success so on. (Success criteria 1.3.1 and 1.3.2)
criterion 3.3.2)
Data tables should be tagged as <table>, and web
Content Sequence editors should be able to describe the data tables via
When content for web pages is coded, make sure that <caption>. Headings for columns and rows should
the content has a meaningful order, not only visually be defined using <th> and perhaps “header id” and
but also in the coding sequence. Some users navigate “scope.” If a complex data table needs explaining
pages by this order. Be sure that the order of content for screen reader users, then this should be done via
is sensible when styles are disabled and when tabbing “summary.” (Success criteria 1.3.1 and 1.3.2)
through content. (Success criteria 1.3.2)
When writing text, web editors should be able to
Enlarging emphasize with <strong> and <em>. (Success criterion
Make sure web page text can be resized up to 200% as 1.3.1)
a minimum, and still be understandable without loss
of content. Newer browsers can zoom content, and When form elements are used, a label should be
this is usually the way assistive technologies do it as explicitly connected to each control, and form
well. (Success criterion 1.4.4) elements that belong to the same group should be
assembled. For instance, a group of radio buttons
Language should be grouped with <fieldset> and <legend> or
In order for user agents to render content in the role=”group”/role=”radiogroup” and WAI-ARIA labels.
correct language, it is important that web pages have (Success criteria 3.3.2 and 4.1.2)
the correct language definition in the HTML tag. The
language tag should be “en” for English pages, “da” User Input
for Danish pages, and so on. (Success criteria 3.1.1 and If the user must enter information into a text field,
3.1.2) ensure they receive instructions to enter the text

9
correctly. (i.e. phone number with dashes, xxx-xxx- Audio and Video
xxxx) Also ensure that the user is notified if he/she When audio and video files are published on a web
make a mistake. Instant notification is better for all page, there are a number of relevant criteria, such as
users rather than being notified upon submission. providing an alternative format, captions, and audio
When filling out a form that is part of a financial descriptions. These are described in detail in the
transaction or a legal commitment, the input must section Web Editors and Content Creators. (Success
be validated to avoid errors, or the user should have criteria 1.1, 1.1.1, 1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, and 1.2.5)
the option to review before submitting it. As a third
option, the user should always be able to reverse the Throughout development, it is important to ensure
submission. (Success criteria 3.3.1, 3.3.2, 3.3.3, and that all buttons and navigation in the player can
3.3.4) be used both with a computer mouse and from
the keyboard alone. At the same time, buttons and
Graphics navigation require text descriptions to help screen
When web pages contain non-text elements, one readers. (Success criteria 1.2.1, 2.1, 2.1.1, and 2.1.2)
of the most important rules is to provide a text
alternative that describes the purpose of the non-text For a video, it should be possible to add captions
element. (Success criteria 1.1.1) and to enter a dedicated track for audio description.
(Success criteria 1.2.1 and 1.2.2)
For example, images use the “alt text” HTML attribute
alt=””. It is important to note that the alternative text If a passage of audio starts automatically, the user
reflects the purpose of the image and not necessarily should be able to pause, stop, or control the sound
what the image is of. (Find detailed information volume. (Success criterion 1.4.2)
on images in the section Web Editors and Content
Creators.) User Control
Some users need more time to read and navigate web
For web editors to provide alternative text correctly, pages. Therefore, if some sort of time limit is present
it is important that the authoring tool, such as the on pages, such as a time out, the user must be able
CMS, allows for alternative texts on images. The image to change the limit either by adjusting, extending, or
tag should always include an alternative attribute, disabling it. (Success criterion 2.2.1)
regardless of whether an image description is needed.
If the web editor decides that the image is only If moving, blinking, or scrolling content is added, it is
decorative and does not need an alt text, they must also important that the user can pause, stop, or hide
add a “null” alt attribute (alt=””). this content. (Success criterion 2.2.2)

Alternative text is context specific, so be sure if you In order for screen reader users to avoid having to
enter alternative text for one image when uploading listen to the same content every time they load a
to a media library, review the alternative text if new page, provide the option of skipping blocks of
reusing it across several pages. You should be able to repeated content. Repeated content can be global
enter a new alternative text every time an image is and local menus and help functions. There are several
used on a web page. A “title” attribute does not serve techniques for ensuring this; the easiest way is to
the same function as an “alt” attribute and should not provide a link at the top of all pages that takes the
be used in place of the “alt.” user to the main content of the page. (Success criterion
2.4.1)
If a web page contains a media file, it should also be
given a descriptive alternative text. When an element is to be altered by the user, such
as a drop-down menu, a radio button, etc., it is
important that it acts as the user expects. Elements

10
should not react solely when the user lands on it from right” may render meaningless if page elements have
the keyboard. It should react when the user has had shifted.
the time to choose and confirm. (Success criteria 3.2.1
and 3.2.2) Always make sure you state the language of your
content piece. In the code, this is done with the
Blinking Content attribute lang=””. Your CMS may allow you to highlight
Content should not blink more than three times the piece of text and choose a language from a drop-
per second, or else it may cause seizures. (Success down menu. (Success criteria 3.1.1 and 3.1.2)
criterion 2.3.1)
Links
Web Editors and Content Creators When you add links on a page, write link texts that
Page Titles make sense when read out of context. For instance,
In a CMS, you name or title a web page when you avoid using link texts such as “Read more,” “Here,”
create it. In some systems, there is also a specific “Click here,” “Publication,” etc. An example could be:
field for this called “Title.” It is important that this “You can read more about the Assistive Technologies
title describes what the page is about, because this event here.” This way you are giving a link text that in
appears in the top of your browser and is the first itself is a good indicator of what the destination page
thing read by a screen reader. Page titles are also used is about. (Success criterion 2.4.4)
for bookmarks and search results. (Success criterion
2.4.2) Images
When you add images to a web page, consider the
Text fact that some users cannot see images. They need
When writing text for web pages, consider the fact a text alternative. In most CMSs this is stated as
that some users can only get an overview of a page “alternative text” or ”alt text.” The text provided here
structurally rather than visually. Make sure that pages is not visually displayed on the page but is hidden
are divided into logical sections with descriptive in the code and is accessed by screen readers. The
headings. You can use several levels of headings: alternative text is not the same as a tooltip, the text
Heading 1, Heading 2, etc. (in the code <h1>, <h2>, displayed when you hover over the image from the
etc., so assistive technologies can render them as “title” attribute. (Success criteria 1.1.1)
headings). (Success criterion 1.3.1)
Close your eyes and visualize what information you
Some low vision users will perceive a web page very would need if you could not see an image. Describe
differently than the way other users would. Therefore, the purpose of the image and not necessarily what
do not provide important information solely using the image is of. If the image links somewhere, it is
color or with an instruction requiring sensory skills. important to describe where the link leads or what
For example, avoid writing things like, “You can read happens when you click. If the image contains
more about the event in the blue box on this page.” pertinent information, that information should be
(Success criterion 1.4.1) stated in the alternative text. If the image is used
solely for decorative purposes, such as creating
Not all people see a web page the way you do. While ambiance or giving visual context, then it should have
keeping disabilities in mind, also remember that “null” alternative text. However, your CMS should
many websites are built using responsive web design. automatically insert the tag alt=”” to the image in the
This means that page elements can shift according code, as this is important for decorative images.
to device (mobile, desktop, etc.) as well as by web
browser. Therefore, providing important information Avoid using images of text. This means that you
based on direction is also not advised. For instance, should never write or scan text into an image editing
“You can read more about the event in the box to the program and save it as an image. No screen reader

11
technology can read images of text, because you that accessible code is entered for lists. Avoid using
cannot highlight text within an image and have symbols that looks like a list, such as bullets, dashes,
it read aloud. Images of text also tend to pixelate asterisks, etc. (Success criterion 1.3.1)
and become blurry upon magnification, making
them difficult to read for those with other visual or Documents
cognitive impairments. For many dyslexic web users, Many WCAG 2.0 principles that apply to web content
their assistive technology requires them to manually are relevant for documents, including PDFs. In fact,
highlight text on a page to be read aloud. (Success most legislation around the world requires accessible
criterion 1.4.5) documents in order for a website to be compliant.

Video and Audio Our guide How to Create Accessible PDFs

If you are using video or audio clips on a web (http://go.siteimprove.com/how-to-create-accessible-
page, there are several criteria to consider, such as pdfs) can help you get started.
captioning and audio description on video. Audio
description is an extra track that explains to visually Developing or Redesigning a
impaired users what is happening on screen. If you Website
are not able to supplement your videos with audio As soon as you think “new website,” you should think
descriptions, then give an alternative in the form “accessibility.” By considering and implementing
of a transcript uploaded to or linked from the page. accessibility early on, the process will be much more
However, be aware that without audio descriptions manageable than if you think “accessibility” in the late
you cannot be AA-compliant, but only A-compliant. stages of website development or redesign.
(Success criteria 1.1, 1.1.1, 1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4,
and 1.2.5) Requirements Specifications
When you are writing your accessibility requirement
If the content is solely visual or only audio, then a text specifications for your web development team, it is
version is an accepted alternative on both levels. important to use the right standards, preferably WCAG
2.0. In web design projects, it is common for the buyer
Tables to request the website to be designed in conformance
When using data tables, it is important to indicate with WCAG 2.0 on Level AA. However, this requirement
headings for rows and columns. The way to do this may not be as straightforward as it would appear.
is very CMS-specific. In some cases, the text editor
provides an accessibility tab where this information In the middle of the project, how will you determine
can be entered when using data tables. (Success whether or not the website meets your expectations?
criteria 1.3.1 and 1.3.2) Explicitly state the individual success criteria you wish
to comply with. Have your website developer state if
Lists and how this will be achieved. For example, design a
When listing items, make sure to use the function for table or list to be filled out by you and your developer:
this that is built in to the CMS editor. This will ensure It is also important that the CMS helps web editors

Criteria Description Notes Developer Required

Solution
1.1.1 All non-text content that is Relevant for images, inputs, X
presented to the user has a CAPTCHA, and more.
text alternative that serves the
equivalent purpose, except for the
situations listed below.

12
publish accessible content. Pick the necessary Make sure your web editors are trained to publish
checkpoints from the Authoring Tool Accessibility content the “accessible way.” This way, when content
Guidelines, which dictate that the tool generates is added both in the development phase and after
accessible web content, helps web editors to you’ve launched, it furthers your site’s accessibility
publish accessible content, and that the tool itself is and does not introduce new accessibility issues.
accessible. Explicitly state requirements for how to:
Migrating Media Players, Forms, and
Old Content
OO Handle alternative texts for images
Areas that are often neglected involve third party
OO Use of headings
solutions, such as media players and forms.
OO Ability to create accessible data tables
Remember these in the process of redesign or
OO How to make quotes (<q> and <blockquote>)
development. They should also be accessible!
OO How to enter page titles
OO How HTML code created by the CMS complies
with W3C standards Also think about content you migrate from the old
system to the new. If you change the HTML/XHTML
OO How to tag change of language in the text
version, the syntax specifications from W3C are
different. There might also be content from the old
Consider the organization’s design manual and
system that is not accessible. After all your hard work,
if there are any contradictions with accessibility
the last thing you want is to carry old problems over
guidelines. For example, there are contrast ratio
to your new website.
requirements between background and text colors.
For this reason, it is important to use accessible color
combinations. (Success criteria 1.4.3)

Design and Development

A handful of accessibility criteria are relevant
when starting the phase of designing and creating
wireframes. Think about navigation, the use of
headings, colors, link texts, white space, and
descriptions, especially where the user is to click on,
fill out, or choose content on web pages.

When it comes to the development process, most

accessibility criteria are relevant. Therefore, it is
important that the people developing the solution
have a solid understanding of accessibility. Make sure
you test the solution during the process from start to
finish. If you wait until the end, it is nearly impossible
to correct possible errors and shortcomings before the
site goes live. It is especially important that templates
are tested as early as possible before building on
them to avoid spreading mistakes to hundreds or
thousands of pages.

Accessibility Top 5
Publishing Content

13
1) Images (w3.org/WAI)
a. Provide alternative text for images that reflect Find an extensive collection of information on how to
the purpose: work with accessibility.
i. Decorative: alt=””
ii. Has a function: Describe Accessibility Guidelines Working Group
iii. Links: Describe destination (w3.org/WAI/GL/)
iv. Avoid images of text where possible. Where
you cannot, make sure that text alternatives Siteimprove Blog
are equivalent. (siteimprove.com/blog/?topics=web-accessibility)
v. Be certain that backgrounds and text colors Dig through this library of blog posts covering
in photos and on web pages are in sufficient accessibility from different angles.
contrast to each other.

2) Links
a. Write link texts that can be read out of context.
Avoid “Click here,” “Read more,” etc.
b. Do not convey a link by only changing the color.
Underline the link, add an asterisk, etc.

3) Headings
a. Divide pages into logical sections, each with
a heading (<h1> to <h6>) that describes the
content. Content that is logically connected
must also be visually connected and connected
in the code.
b. Do not give instructions based solely on
location of content, such as “In the box to your
right…” or on the use of color, such as “In the
green box you will find…” Supplement with a
heading.

4) Forms
a. Label all form fields with text that indicates the
purpose of the field.
b. Be sure all forms are navigable by mouse and
keyboard.

5) Skip Navigation
a. Provide the option of skipping blocks of
repeated content in areas such as global and
local menus and help functions.

Digital Accessibility Resources

Web Accessibility Initiative (WAI) with W3C

14
CONTENT_ Part 2
A Beginner's Guide to
Siteimprove Accessibility

How Siteimprove Accessibility Helps Your Work 16

Automated and Manual Testing 16

Who Should Use the Tool 16

Webmaster 16
Developer 16
Web Editor 16

First Time Using the Tool? 17

Accessibility Overview Page 17

Summary 17
Issues Page 20
Guidelines Page 20
Pages Page 21
Page reports 22
PDFs Page 22
Validation 23
Decisions 23

Getting Started 24

Quick Wins 25

Working With PDFs 26

Creating a Printable Report & Email Reports 28

← GO BACK to overview
Part 2:
A Beginner's Guide to Siteimprove
Accessibility

How Siteimprove Accessibility Helps Your Work

Siteimprove’s automated accessibility tool scans a website, assessing every page using WCAG 2.0 guidelines. The
tool then provides you an overview of issues, the pages on which you will find them, how these errors affect your
website visitors, and tips on how to fix them.

There are two scenarios in which it is particularly beneficial to use the tool:

On an Existing Website – Use the tool to work through current issues and sort them based on issue type, where
they occur, or by who should fix them. Monitor new issues and address them promptly.

When Building a New Website – Have the development site crawled to quickly catch any accessibility issues before
they become too extensive and require a lot of time to fix.

Automated and Manual Testing

Many accessibility issues can be discovered through Siteimprove’s automated Accessibility tool. Some aspects must
be evaluated through human assessment, however, as it is impossible to test all issues via automated testing.

Who Should Use the Tool

Webmaster
The person(s) in charge of the website may choose to assign themselves as an administrator, which allows them to
sort through the reported issues and assign them to lists: Webmaster, Developer or Web Editor. The webmaster is
able to make site-wide decisions about each issue. For example, if fixing a given issue is currently beyond what is
feasible for the organization, then that issue can be marked as such. All users have access to a list that includes all
of these “Can’t Fix” issues.

Developer
The list of issues for this role is typically related to style sheets and CSS. Often, this list is for a website provider and
not the website owner.

Web Editor
In the tool a list is available for web editors. It lists issues that are introduced in the content creation process.

16
First Time Using the Tool?
If you are new to the Accessibility tool, it is recommended that you explore the tool to get an overview of how the
tool works with your site.

If you are looking for a list of issues on your website, take a look at the Issues page.

If you would like to learn more about WCAG 2.0 guidelines and the issues your website has in accordance to these,
it would be beneficial to look at the Guidelines page.

Accessibility Overview Page

Summary
The Accessibility dashboard provides an overview of several areas. The various circles indicate the number of issues
present on the website and within the chosen WCAG 2.0 group: A, AA, or AAA issues.

Depending on organizational responsibilities, an overview of issues within the categories of editor, webmaster, or
developer are available. Additionally, you are provided with a group of high priority issues:
OO Headings
OO Images
OO Links
OO Forms

17
A history graph reports fluctuations in the number of issues, and a progress bar monitors your progress with fixing
issues over time. If you are working on portions of the website and want to check it right away, you may choose to
generate a new sitewide scan on demand.

18
As PDF files are often a large portion of web content, the tool also provides you a list of and direct links to PDF files
with the highest number of errors.
My Sites
Gain an overview of the accessibility status across all your websites and filter by team tags. At a glance, see the total
number of A, AA, AAA issues, plus the number of PDFs with issues.

Groups
Groups are used to display information for specific sections of the website that belong to different team members.
Only groups that are visible under your profile are displayed.

Accessibility Policies
Siteimprove Policy allows you to employ accessibility best practices across your digital presence and create policies
specific to your organization. Examples include “Find words in all capital letters” or “Max length of words.”

Single Page Check

Enter individual URLs at any time to check the accessibility status of specific pages.

Issues Page
The Issues page provides you with a list of issues on your website and can be filtered according to an individual’s
responsibilities, high priority issues, conformance level, and severity. Here, you can move issues between the areas
of responsibilities and continuously track progress toward accessibility compliance with the dynamic progress bar.

19
Guidelines Page
The Guidelines page provides you an overview of all WCAG 2.0 success criteria, displaying which criteria your site
complies with and which criteria it does not. Keep in mind that some WCAG 2.0 criteria require manual testing,
which are distinguished within the tool. You can also view all individual issues for each success criterion.

20
Pages Page
If you wish to work with individual pages, you can view and navigate a list of “Pages with Issues.” Consider
prioritizing pages with high priority issues or higher traffic. Once you click on a page in this part of the menu, you are
brought to Page Reports.

21
Page reports
Individual Page Reports display all issues present on that page. Filter by security or conformance levels, and read
detailed descriptions of issues that are also highlighted on the page where possible. You will also find links to
techniques that can help you fix issues.

PDFs Page
We can crawl all PDFs on your website and provide you with an overview page of PDFs with accessibility issues. We
provide a summary of issues for each PDF and a link to a document report with detailed descriptions of each issue,
as well as a visual highlighting of the issue on the actual page (where possible).

22
Validation
If you would like to know how your website is performing in accordance to the W3C syntax requirements for HTML
and CSS, we provide you with two pages: HTML validation and CSS validation.

HTML Validation
We provide you with an overview of all your web pages and the number of errors on each page, plus a link to the
W3C validation service that provides detailed descriptions of each error.

CSS Validation
We provide you with an overview of all your style sheets and the number of errors on each style sheet, plus a link to
the W3C validation service providing detailed descriptions of each error.

Decisions
When you choose to make decisions on an issue for the entire website, on individual pages, or for individual items,
your decisions are saved in a section which contains two pages:

Issue Decisions
If decisions have been made for global issues or on individual pages, these will appear in this table.

23
Reviewed Items
If specific items have been reviewed on the Accessibility Page Report, they will appear in this table. This applies to
items that have been reviewed on individual pages and sitewide.

If there are issues that you are not able to fix due to limitations in your technical implementation or CMS, you can
decide to hide these issues so they no longer occur in your Decisions list. You may then revert (unhide) the issue
later when you have the ability to fix it.

Getting Started
First, the person(s) predominantly in charge of the website should sort through the list of all issues reported.
Afterwards, they can assign issues to the correct team member (webmaster, developer, web editor), or they can
decide on issues that do not need to be handled immediately.

Siteimprove Issues: Errors, Warnings, and Reviews

Error = Issues that can be tested automatically and where the instances are with certainty violations the Web
Content Accessibility Guidelines (WCAG) 2.0.
Warning = Issues that can be tested automatically and where the instances are accessibility best practice
violations.
Review = Issues that cannot be checked automatically but requires a manual inspection to determine if each
item lives up to the success criteria.

Start with Level A issues, as they are considered the most severe. Begin with the errors flagged by the exclamation
point icon. Next, move on to AA errors.

When you have worked through errors on Levels A and AA, then you can move onto warnings, flagged with the
triangle icon. These are also important to tackle in order to become Level AA compliant.

Finally, sort through review items to determine next steps and delegate amongst your team. If you have limited
resources, another way to prioritize is to use the filtering option for high priority areas: issues with headings,
images, forms, and links.

Remember that you can always revisit Issue Decisions when you have the resources to fix them.

24
Quick Wins
Most quick wins are issues introduced via style sheets or templates. It is usually a matter of fixing a bit of code in
one area, and the fix will take effect on all pages where the issue occurs. Look for errors that are present on a large
number of pages, as this likely indicates a CSS/template issue.

Examples:
OO Issues with contrast ratio
OO Issues with forms such as global search field
OO No definition of language for web pages
OO Inability to bypass blocks of repeated content

The developer or web provider often needs to fix these types of issues.

25
Working With PDFs
PDFs may be a big part of your web content, and it is possible to greatly increase the accessibility of these
documents for many users.

In the PDFs page, which is available from the left-hand menu, you are given a list of all PDFs on your website (or
within a chosen group) that have accessibility issues. PDFs without issues will not appear in this list.

You have several filtering options available. One option is to look only at PDFs that are not tagged. Tagging is a
fundamental prerequisite for accessibility, because it allows user agents such as screen readers to know how
to render content in a meaningful way. If there is no tagging, then there is no information on text types such as
paragraphs, headings, lists, tables, and so on. You may also filter for documents without machine-readable text,
which likely indicates that a document is scanned.

You have several filtering options available. One option is to look only at PDFs that are not tagged. Tagging is a
fundamental prerequisite for accessibility, because it allows user agents such as screen readers to know how
to render content in a meaningful way. If there is no tagging, then there is no information on text types such as
paragraphs, headings, lists, tables, and so on. You may also filter for documents without machine-readable text,
which likely indicates that a document is scanned.

Fixing PDFs that are not tagged is a good way to optimize your efforts. PDFs with a high number of issues can also be
good to prioritize. If you have analytics integration, you can also prioritize your efforts on PDFs that have had a lot of
traffic.

26
Clicking on a PDF link will take you to a document report for that specific PDF, which gives you an overview of all
issues present. Where possible, it will highlight the individual issues on the actual page.

You are given a help text on what each issue entails and suggestions on how to fix it. Remember that fixing PDF
issues will need to occur in a program like Adobe Acrobat and then reuploaded.

Once you start fixing issues, run a crawl of an affected page to check if the issue is fixed. When you are done for the
day, it is recommended to order a crawl of the website to ensure you have fresh results when you come back. A
crawl can be ordered from the bottom of the front accessibility page.

27
 Creating a Printable Report & Email Reports
Most overviews are exportable and can be added to a printable report or to a spreadsheet file. You can also choose
to send a report with specific components to any given user after each crawl.

Siteimprove transforms the way organizations manage and deliver their digital presence. With
the Siteimprove Intelligence Platform, you gain complete visibility and deep insights into what
matters, empowering you and your team to outperform the status quo with certainty every day.
With a worldwide customer base of more than 5,000 customers, Siteimprove serves dozens of
markets from offices in Amsterdam, Berlin, Copenhagen, London, Minneapolis, Oslo, Sydney,
Toronto, and Vienna.

To learn more, visit siteimprove.com

Start Your
Free Trial
siteimprove.com/account/create/

Act With Digital Certainty

Siteimprove transforms the way organizations manage
and deliver their digital presence. With the Siteimprove Intelligence
Platform, you gain complete visibility and deep insights into what
matters, empowering you and your team to outperform the status quo
with certainty every day.

siteimprove.com
28