1. No category

Web Governance made easy
August 2012
How to ensure website
accessibility
OVERVIEW
The purpose of this white paper is to give a thorough
introduction to web accessibility and how the web
accessibility guidelines are to be applied in practice.
Web accessibility for all
Mostly for web designers
Mostly for web developers
It addresses everyone who works with designing,
developing and publishing content on web sites.
This white paper is divided into sections according
to which role you play in regards to a website. The
first section targets all stakeholders and the following
sections are for web designers, web developers,
web editors and web managers respectively. The last
section is given for how to get started.
Mostly for web editors
Mostly for web managers
Getting started
Who is Siteimprove?
Siteimprove provides organizations of all shapes and
sizes smart tools that make web site management and
maintenance both easier and more affordable.
Web: siteimprove.co.uk
Siteimprove has a global presence with offices in Denmark,
UK and USA. The company proudly serves more than 1,300
organizations worldwide.
Tel: 0845 226 8050
Email: [email protected]
How to ensure website accessibility
Accessibility for all
Web Accessibility in its base form is about
ensuring that as many users as possible are
able to navigate and understand content on a
website.
By Helene Nørgaard Bech
Why web accessibility?
ensuring web accessibility on your website is worth the
investment.
Surveys show that up to 20% of internet users1
What is web accessibility?
experience accessibility issues when using the Internet.
If you look at all aspects of user experience (UX) on the
This means that by having a website with accessibility
Internet, accessibility is one in many areas. Accessibility
issues, up to 1 in 5 users will encounter difficulties.
can be considered a fundamental technical foundation
Federal agencies in the US are obligated by law to
on which you build other aspects such as usability.
comply with the web accessibility guidelines. More on
this is covered in the section ”Which guidelines should
be followed?“ This means that if the responsibility of a
federal website or part of a federal website lies on you,
you are also responsible for ensuring its accessibility.
One of the good things about ensuring web
accessibility is that not only are you increasing your
number of users, you also have a number of extra
benefits in the form of increased search engine
optimization (SEO) and improved usability. This is why
Most of ensuring web accessibility is about technical
provisions. It is very much about how websites are
implemented and about the tools that are used to
1
publish content on websites. But accessibility is not just
http://webaim.org/intro/#people
1
about techniques. The way you communicate on web
(such as operating systems and browsers). It must also
pages can also affect accessibility.
be ensured that content that is not text (such as
Who is accessibility for?
By optimizing web accessibility you ensure that as
many users as possible can use your website. You
ensure that people with disabilities and reading
images) have a text alternative. Make sure that the
website can be used without a computer mouse. These
are some of the main principles from the official
guidelines.
difficulties can read your web pages and also that the
Which guidelines should be followed?
website has a robustness that allows for most user
The organization making standards for the Internet is
agents2 to render content in a consistent and sensible
called World Wide Web Consortium (W3C). They have
way.
a working group called Web Accessibility Initiative
(WAI). This group has the job of defining what web
accessibility is, and formulate guidelines on how to
ensure good web accessibility. The work WAI does is
internationally recognized. The guidelines pertaining to
web pages are called Web Content Accessibility
Guidelines (WCAG). There is an original version in
English3 as well as a number of translations in different
languages4.
In December 2008 (at the time of writing) the current
version of WCAG was released. This is version 2.0
What are assistive technologies?
making the former 1.0 version obsolete.
People with disabilities such as low vision, hearing or
WCAG is divided into 4 main principles: Perceivable,
motor impairments, and people who have reading
Operable, Understandable and Robust. Each of these
difficulties often use assistive technologies when using
main principles is divided into a number of guidelines
IT. These technologies assist the user in writing,
that are again divided into individual success criteria. It
spelling, reading and navigation, as well as having
is the success criteria that are most often used as
software and content read aloud. In order for these
requirement for conformance. The criteria are divided
assistive technologies to be able to compensate in a
into three levels: A, AA and AAA. A is considered the
meaningful way it is important that software and
most severe and AAA is often an enjoining of an AA
websites comply with the standards that make the
criterion. In most countries websites should be
assistive technologies able to interpret and render
compliant on level AA5. It will be difficult to be
content.
completely AAA compliant. It is recommended to pick
How does one ensure an accessible website?
You have to follow a number of general principles. One
out criteria on this level based on web pages
addressing a mainstream audience and where the
website has special target groups. On level AA there
must ensure robustness by complying with the official
standards for coding, such as those from W3C which
ensure that a website works across different platforms
3
http://www.w3.org/TR/WCAG20/
http://www.w3.org/2003/03/Translations/byTechno
logy?technology=WCAG20
5
All criteria on level A and level AA
4
2
including browsers and assistive technologies
http://en.wikipedia.org/wiki/Assistive_technology
2
are 38 criteria in all to comply with. These are the
editor. Generally speaking, web accessibility is very
framework for the rest of this white paper.
technical and many aspects are ensured in the
development phase.
There are a large number of tools that in an automated
way can check if a website is in compliance. But there
are a number of criteria that cannot be checked in an
automated way. For these, a number of assisting
toolbars are available to help manually assessing
whether content is in conformance. This is described in
more detail in the section ‘Mostly for web managers’.
This is the end of the introductory part of the
There are 4 interrelated documents to work with in
document. In the following is given role specific
connection with WCAG 2.0. You have the main
descriptions on which criteria to consider.
document giving some background information and
compromising all the criteria and their levels. Then you
have a document describing how conformance is
Mostly for web designers
ensured. This document refers to a document
containing specific techniques often with coding
Consistent design
examples. Finally there is a document giving a detailed
Some users are not accustomed to using the Internet
description of the individual criteria on why it is
and some users have a disability that makes it hard to
relevant and who it is relevant for.
get an overview of a webpage and navigate a web site.
For federal agencies in the US compliance with the so
called Section 508 requirements is necessary. Section
508 is part of the Americans with Disabilities Act (ADA).
Until now Section 508 has been a separate set of
guidelines only used in the US6. But these guidelines
will soon be obsolete as the consortium is working on
a new set of Section 508 guidelines based on WCAG
2.0 level AA and some supplemental requirements 7.
Who is to work on web accessibility?
Accessibility is something that is relevant for everyone
working with websites regardless of whether you are a
web designer, web developer, web manager or web
Therefore it is important that the navigation across
web pages is consistent and global elements such as
menus and help facilities are in the same order across
the website. At the same time it is important that
elements having the same function such as icons and
references are given in the same way across the
website.
Navigation
In order to make it easy for users to find information it
is important that there is more than one way of finding
specific content on a web page. A user can find
content on a page by navigating through the intended
page hierarchy but it should also be possible to find
the page in another way through a sitemap, an index
6
or a search function.
http://section508.gov/index.cfm?fuseAction=stdsdo
c
7
http://section508.gov/index.cfm
3
Headings
text8. There are a number of tools available to quickly
When designing the look and feel and the architecture
assist in measuring the contrast ratios.
of a website it is important to keep in mind that some
users cannot get a visual overview of a web page. They
have to do this structurally. Make sure pages are
divided into logical sections each having a heading
(coded as an <H< tag) describing the content, so that
assistive technologies can render them as section
headings.
Links
When an element on a web page is to be a link or
something clickable, it is important that the element
text/description makes sense when read out of context.
Part of this is ensured by the technical implementation
but the design should consider using descriptive link
texts also. Link texts such as ‘Read more’, ‘here’, ‘Click
here’, ‘publication’ are examples of poor link texts if
read out of their context.
Interactive elements
When designing for interactive elements, i.e. content
that the user can interact with, it is important that it is
evident to all what is to be entered/chosen/checked.
The design should make sure that when text fields,
drop downs, check boxes and radio buttons are used
these have a text connected to them describing the
purpose.
Use of color
In order to make sure that all users are aware that an
element on a web page has a certain function or
status, it is important to not give information solely by
the use of color. For users that cannot see colors, then
information can be lost. An example could be to show
links within a text by giving links a different color than
the text. Supplement this with another non-color
specific way of indicating the links (such as underline, a
symbol etc.).
Mostly for web developers
Page titles
In order for visually impaired users to be able to read
Make sure that all web pages have a descriptive title
all the text on web pages it is important that the color
reflecting the page content. Also make sure that web
of the text and the color of the background are in
editors can enter page titles via the authoring tool (for
sufficient contrast to each other. This can be ensured
example CMS).
by conforming to the requirement of keeping a
contrast ratio of 4.5:1 for regular text and 3:1 for large
8
Large text is 18 point or 14 point bold. The
requirements for contrast ratios are further
enhanced if you wish to be AAA compliant. It is then
7:1 for regular text and 4.5:1 for large text.
4
Keyboard navigation
All content on a web page should be navigable both
with a computer mouse and from the keyboard alone.
This applies to forms, buttons and links for instance.
Some users are not able to use a computer mouse.
They can use the keyboard only to navigate by tabbing
through content on a web page. These users need to
be able to see where they are located on the page. For
this reason it should always be visually evident where
on the web page the tab indicator is located. Most
browsers automatically show this with a dotted line
around the content. You can also implement your own
way of showing this.
Content sequence
When content for web pages is coded, make sure that
the content has a meaningful order, not only visually
but also in the coding sequence. Some users navigate
pages by this order. Ensure that the order of content is
sensible when styles are disabled and when tabbing
through content.
Language
In order for user agents to be able to render content in
the correct language it is important that the pages
have a correct language definition in the HTML tag for
a web page. The language tag should be ‘en’ for
English pages, ‘da’ for Danish pages, and so on9.
Also the CMS should give web editors the ability to
highlight text that is in a different language than the
rest of the page. The highlighting should add the
lang=”” attribute in the code.
Coding
In order to make sure that the website is shown
consistently across different platforms (such as
operating systems and browsers) and at the same time
that assistive technologies can render content in a
meaningful way, the standard for the format one
Enlarging
Make sure web page text can be resized up to 200% as
publishes in should be complied with. If, for instance
you are publishing in XHTML 1.0 or HTML 5.0 the
syntax rules for this format should be followed. You
a minimum, and still be usable and look sensible
(newer browsers can zoom content and this is usually
9
the way that assistive technologies does it as well).
http://www.w3.org/International/articles/languagetags/Overview.en.php
5
can check your web pages for syntax errors at:
http://validator.w3.org/.
Also make sure that elements are marked up with the
code that is intended for the purpose. For example,
HTML headings should be tagged as <H> (H1…H6).
User input
If the user must enter information in a text field, make
sure that if the user does not enter text in the right
format they are notified with text that helps them
correct the mistake, if possible. When filling out a form
that is part of a financial transaction or a legal
Data tables should be tagged as <table> and web
editors should be able to give description to data
tables via <caption>. Headings for columns and rows
should be defined by the use of <th> and perhaps
’header id’ and ‘scope’. If a complex data table needs
explaining for screen reader users, then this should be
done via ‘summary’.
commitment where data is changed, the input must be
checked by the system to avoid errors or the user
should have the option of reading through the input
before sending it. A third option is that the user can
always reverse the submission.
Graphics
When web pages contain elements that are non-text it
When writing text, web editors should be able to
is important to give a text alternative describing the
emphasize with <strong> and <em>.
purpose of the non-text element. For example, images
When form elements are used, a label should be
explicitly connected to each control and form elements
that belong to the same group should be assembled.
For instance a group of radio buttons should be
grouped with<fieldset> and <legend>. There are a
number of techniques to ensure this:
http://www.w3.org/WAI/WCAG20/quickref/#qrcontent-structure-separation-programmatic and
http://www.w3.org/WAI/WCAG20/quickref/#qrensure-compat-rsv.
use the “alt text” HTML attribute (alt=””). It is important
to note that the alternative text reflects the purpose of
the image and not necessarily what the image is of.
See information on images in the section ‘Mostly for
web editors’ for an elaborate description. In order for
web editors to be able to give the alternative text
correctly it is important that the authoring tool such as
a CMS allows for entering alternative texts on images
that are entered on web pages. The alt attribute should
always be included in the code, regardless of whether
or not any descriptive text is needed. It should be up to
the web editor either to leave the field empty or give a
description for an image. An alternative text is context
specific. For this reason it can be poor accessibility
practice to enter an alternative text for an image once
and for all when uploading to the media library. It
should be possible to enter a new alternative text every
time an image is used on a web page.
6
If a web page contains a media file, it should also be
are other options as well:
given a descriptive text either as an alt attribute or in
http://www.w3.org/WAI/WCAG20/quickref/#qr-
the object tag on inline elements and the like.
navigation-mechanisms-skip.
Audio and video
When an element is to be altered by the user, such as a
When audio and video is published on a web page
drop down menu, a radio button, etc., it is important
there are a number of relevant criteria, such as giving
that it acts as the user expects. Elements should not
an alternative format, and having captions and audio
react solely when receiving focus or when the user
description. These are described in detail in the section
lands on it from the keyboard. It should react when the
”Mostly for web editors.”
user has had the time to choose and confirm.
Throughout development it is important to ensure that
Blinking content
all buttons and navigation in the player can be used
Content should not blink more than three times per
both with a computer mouse and from the keyboard
second, or else it may cause an epileptic episode for
alone. At the same time buttons and navigation are
some users.
given text descriptions to help screen readers.
For a video it should be possible to enter a dedicated
track for audio description as well as add captions.
If a passage of audio starts automatically, the user
should be able to pause, stop or control the sound
volume.
User control
Some users need a long time to read and navigate web
pages. Therefore, if some sort of time limit is present
on pages, such as a time out, the user must be able to
change the limit either by adjusting it, extending, or
disabling it.
If content for moving, blinking or scrolling is added it is
also important that the user can pause, stop or hide
Mostly for web editors
Page titles
In a CMS you give a web page a title or name when
you create it. In some systems there is also a specific
field for this called ‘Title’. It is important that this title is
descriptive of what the page is about. It is the page
title that is shown in the top of your browser and is
read as the first thing on a web page by a screen
reader.
Text
When writing text for web pages, consider the fact that
some users cannot get an overview of a page visually,
as opposed to structurally. Make sure that pages are
this content.
divided into logical sections each given a heading that
In order for screen reader users to avoid having to
of headings: Heading 1, Heading 2, etc. (in the code
listen to the same content every time they load a new
<h1>,< h2> etc., so that assistive technologies can
page, provide the option of skipping blocks of
render them as headings).
repeated content. Repeated content can be a global
menu (and local menu) and help functions. There are
several techniques for ensuring this. The easiest way is
to provide a link at the top of all pages that takes the
user to the main content of the page (for instance the
heading 1 on the page in the content section). There
is descriptive of the section. You can use several levels
Because of low vision some users will perceive a web
page very differently from the way other users would
visually perceive it. Therefore make sure to not give
important information solely by the use of color or
with an instruction requiring sensory skills. For
7
example, avoid writing things like: “…you can read
image is of. If the image is linking, it is important to
more about the event in the blue box to the right.”
describe where the link goes to/what happens when
It is fine to write something like this if you supplement
it with something that all users can find, such as an
additional text: “…you can read more about the event
in the blue box to the right by the heading ‘Events in
March.” This way you are also giving text that all users
will be able to find.
If you change the language in the text make sure you
state the language of that piece of text. In the code
this is done with the attribute lang=”” for the text unit.
If you have a good CMS it will allow you to highlight
the piece of text and choose language from a drop
down menu.
Links
When you add links on a page write link texts that
make sense when read out of context. For instance
avoid using link texts such as “Read more,” “Here,”
“Click here,” “Publication,” etc. An example could be a
text: “You can read more about the Assistive
Technologies event here.” Another example could be
writing: “You can read more about the Assistive
Technologies event here.” It will be better to write “You
can read more about the Assistive Technologies event
here” for example. This way you are giving a link text
that in itself is a good indicator of what the destination
page is about.
Images
When you add images to a web page consider the fact
that some users cannot see images. They need a text
alternative. In most CMS’s this is stated as ”alternative
clicking on the image. If the image is solely used for
decorative purposes such as creating an ambience or a
visual context, then it should have no alternative text. If
the image contains information that information
should be given in the alternative text.
Avoid using images of text. This means that you should
avoid writing text in an image editing program and
saving it as an image. Many of the types of software
that reads text aloud (for instance used by dyslexics)
cannot read images of text. This is because you cannot
highlight text within an image to have it read out to
you. (Some of these types of software can read
alternative texts, but far from all. And they should not
be confused with screen reader software used by the
visually impaired. These are much more advanced).
Video and audio
If you are using video or audio clips on a web page
there are several criteria to consider, such as
captioning and audio description on video. Audio
description is an extra track explaining what happens
on the screen to visually impaired users. If you are not
able to provide your videos with audio descriptions
then give an alternative in the form of a transcript that
is uploaded or linked to from the page. But be aware
that without audio descriptions you cannot be AA
compliant, but only A-compliant.
If the content is solely visual (no sound) or only audio
(no visual) then a text version is an accepted alternative
on both levels.
text” or ”alt text.” The text given here is not visually
Tables
displayed on the page but is hidden in the code to be
When using data tables with information it is
accessed by screen readers. (The alternative text is not
important to indicate headings for rows and/or
the same as a tooltip: The text displayed when you
columns. The way to do this is very CMS specific. In
hover over the image called ”title”)
some cases the editor provides an accessibility tab
Close your eyes and visualize what information you
need if you cannot see the image. Describe the
where this information can be entered when using data
tables.
purpose of the image and not necessarily what the
8
Lists
accessible for instance because it makes the website
When using a list of items make sure to use the
accessible for more users.
function for this that is built into the editor in the CMS.
This will ensure that accessible code is entered for lists.
Avoid just making dots that looks like a list (such as
Getting started
asterisk, dash etc.).
Start out by finding one or more tools that can assist
you in getting a quick overview of issues. There are a
Mostly for web managers
lot of tools on the market that in an automated way
check for a number of accessibility issues. Also there
If you have the responsibilities of ensuring accessibility
are a number of toolbars available assisting in
on a website, then all the criteria in WCAG are relevant
assessing accessibility. These can be installed in your
to you (usually on level AA). It is then necessary to
browser.
have a fundamental understanding of the subject in
order to be able to ensure for instance that through a
development project and by an acceptance test what is
delivered conforms to the guidelines. It is also
important that you as the responsible party make the
right requirements in the requirement specifications
and understand how meeting them is ensured. It is
also important that you train your web editor
colleagues on how to publish content the “accessible
way.” This way, when content is added it furthers your
site's accessibility rather than introducing new
accessibility issues.
If you have policies in your organization for
communication and design and the like it is a good
idea to integrate the relevant accessibility criteria here.
If you are purchasing a new website remember to state
the individual success criteria from WCAG in your
requirement specifications and have tenderer state on
how they will ensure conformance for the individual
criteria. Also make the necessary requirements to make
sure that the CMS supports web editors in publishing
accessible content. You can pick from ATAG, in the
guidelines for accessible authoring tools10.
If your job is to ensure accessibility on an existing
website it is often a question of fixing what can be
fixed. It is always better to be 70% accessible than 60%
For large websites the effort most likely needs to be
prioritized. A good starting point is your main pages,
for example the front page and a selection of your
template pages. Often it requires minor adjustments in
the CSS or in a template and an issue will be fixed and
take effect across all pages.
If there is special content on some web pages such as
video, dynamic content or self-services it is a good
idea to include these pages also. Go through the
WCAG success criteria on level A and start with looking
at issues that a tool can find. After this, go through the
criteria again to check for those that might not have
been considered. Do the same for level AA criteria.
There can be areas where it is not possible to do a fix
on the current website or that should be directed to
development. Write these down so they are not
forgotten and bring them up on the next relevant
meeting.
Make a strategy for testing accessibility on a regular
basis. It can be quarterly for instance as a part of the
organization’s web strategy.
If there is special content on some web pages such as
video, dynamic content or self-services it is a good
idea to include these pages also. Go through the
WCAG success criteria on level A and start with looking
at issues that a tool can find. After this go through the
10
http://www.w3.org/TR/WAI-AUTOOLS/
9
criteria again to check for those that might not have
been considered. Do the same for level AA criteria.
A good tool can assist you in quickly identifying errors
on levels A and AA and where and on which pages
they occur11.
There can be areas where it is not possible to do a fix
on the current website or that should be directed to
development. Write these down so they are not
forgotten and bring them up on the next relevant
meeting.
Make a strategy for testing accessibility on a regular
basis. It can be quarterly for instance as a part of the
organization’s web strategy.
11
For example:
http://siteimprove.com/services/qualityassurance.aspx,
http://www.visionaustralia.org.au/ais/toolbar/ ,
https://addons.mozilla.org/enUS/firefox/addon/accessibility-evaluation-toolb/
10
More information
Siteimprove.com12
Section 50813
Getting started by WAI14
Web Content Accessibility Guidelines – WCAG15
Reference to the guidelines
The formulation of the below given criteria are taken from WCAG 16 and are explained in the sections ’Understanding’
and ’How to meet’ (which are linked to from each criterion on the web page with the success criteria):
http://www.w3.org/TR/UNDERSTANDING-WCAG20/ and http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equivtext-doc.
Web designers: Pay particular attention to:

Success criterion 1.3.1 - Info and Relationships: Information, structure, and relationships conveyed through
presentation can be programmatically determined or are available in text.

Success criterion 1.4.1 - Use of Color: Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual element.

Success criterion 1.4.3 - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1,
except for the following:
o
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
o
Incidental: Text or images of text that are part of an inactive user interface component, that are pure
decoration, that are not visible to anyone, or that are part of a picture that contains significant other
visual content, have no contrast requirement.
o

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Success criterion 1.4.5 - Images of Text: If the technologies being used can achieve the visual presentation,
text is used to convey information rather than images of text except for the following:

o
Customizable: The image of text can be visually customized to the user's requirements;
o
Essential: A particular presentation of text is essential to the information being conveyed.
Success criterion 2.4.4 - Link Purpose (In Context): The purpose of each link can be determined from the link
text alone or from the link text together with its programmatically determined link context, except where the
purpose of the link would be ambiguous to users in general.

Success criterion 2.4.5 - Multiple Ways: More than one way is available to locate a Web page within a set of
Web pages except where the Web Page is the result of, or a step in, a process.
12
http://siteimprove.com/
http://section508.gov/
14
http://www.w3.org/WAI/impl/improving.html & http://www.w3.org/WAI/gettingstarted/Overview.html
15
http://www.w3.org/TR/WCAG20/
16
http://www.w3.org/TR/WCAG20/
13
Siteimprove
1422 Lake St, Suite #314
Minneapolis, MN 55408
Contact:
[email protected]
800-493-0465

Success criterion 2.4.6 - Headings and Labels: Headings and labels describe topic or purpose.

Success criterion 3.2.3 - Consistent Navigation: Navigational mechanisms that are repeated on multiple Web
pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change
is initiated by the user.

Success criterion 3.2.4 - Consistent Identification: Components that have the same functionality within a set of
Web pages are identified consistently.

Success criterion 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user
input.
Web developers: Pay particular attention to:

Success criterion 1.1.1 - Non-text Content: All non-text content that is presented to the user has a text
alternative that serves the equivalent purpose, except for some situations.

Success criterion 1.2.1 Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded
video-only media, the following are true, except when the audio or video is a media alternative for text and is
clearly labeled as such:
o
Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent
information for prerecorded audio-only content.
o
Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that
presents equivalent information for prerecorded video-only content.

Success criterion 1.2.2 - Captions (Prerecorded): Captions are provided for all prerecorded audio content in
synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Success criterion 1.2.3 - Audio Description or Media Alternative (Prerecorded): An alternative for time-based
media or audio description of the prerecorded video content is provided for synchronized media, except when
the media is a media alternative for text and is clearly labeled as such.

Success criterion 1.2.4 - Captions (Live): Captions are provided for all live audio content in synchronized
media.

Success criterion 1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded
video content in synchronized media.

Success criterion 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through
presentation can be programmatically determined or are available in text.

Success criterion 1.3.2 - Meaningful Sequence: When the sequence in which content is presented affects its
meaning, a correct reading sequence can be programmatically determined.

Success criterion 1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3
seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control
audio volume independently from the overall system volume level.

Success criterion 1.4.4 Images of Text: If the technologies being used can achieve the visual presentation, text
is used to convey information rather than images of text except for the following:
o
Customizable: The image of text can be visually customized to the user's requirements;
o
Essential: A particular presentation of text is essential to the information being conveyed.
Siteimprove
1422 Lake St, Suite #314
Minneapolis, MN 55408
Contact:
[email protected]
800-493-0465

Success criterion 2.1.1 - Keyboard: All functionality of the content is operable through a keyboard interface
without requiring specific timings for individual keystrokes, except where the underlying function requires
input that depends on the path of the user's movement and not just the endpoints.

Success criterion 2.1.2 No Keyboard Trap: If keyboard focus can be moved to a component of the page using
a keyboard interface, then focus can be moved away from that component using only a keyboard interface,
and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised
of the method for moving focus away.

Success criterion 2.2.1 - Timing Adjustable: For each time limit that is set by the content, at least one of the
following is true:
o
Turn off: The user is allowed to turn off the time limit before encountering it; or
o
Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at
least ten times the length of the default setting; or
o
Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit
with a simple action (for example, "press the space bar"), and the user is allowed to extend the time
limit at least ten times; or
o
Real-time Exception: The time limit is a required part of a real-time event (for example, an auction),
and no alternative to the time limit is possible; or

o
Essential Exception: The time limit is essential and extending it would invalidate the activity; or
o
20 Hour Exception: The time limit is longer than 20 hours.
Success criterion 2.2.2 - Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of
the following are true:
o
Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts
automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content,
there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling
is part of an activity where it is essential; and
o
Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in
parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control
the frequency of the update unless the auto-updating is part of an activity where it is essential.

Success criterion 2.3.1 - Three Flashes or Below Threshold: Web pages do not contain anything that flashes
more than three times in any one second period, or the flash is below the general flash and red flash
thresholds.

Success criterion 2.4.1 - Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated
on multiple Web pages.

Success criterion 2.4.2 - Page Titled: Web pages have titles that describe topic or purpose.

Success criterion 2.4.3 - Focus Order: If a Web page can be navigated sequentially and the navigation
sequences affect meaning or operation, focusable components receive focus in an order that preserves
meaning and operability.

Success criterion 2.4.7 - Focus Visible: Any keyboard operable user interface has a mode of operation where
the keyboard focus indicator is visible.

Success criterion 3.1.1 - Language of Page: The default human language of each Web page can be
programmatically determined.
Siteimprove
1422 Lake St, Suite #314
Minneapolis, MN 55408
Contact:
[email protected]
800-493-0465

Success criterion 3.1.2 - Language of Parts: The human language of each passage or phrase in the content can
be programmatically determined except for proper names, technical terms, words of indeterminate language,
and words or phrases that have become part of the vernacular of the immediately surrounding text.

Success criterion 3.2.1 - On Focus: When any component receives focus, it does not initiate a change of
context.

Success criterion 3.2.2 - On Input: Changing the setting of any user interface component does not
automatically cause a change of context unless the user has been advised of the behavior before using the
component.

Success criterion 3.3.1 - Error Identification: If an input error is automatically detected, the item that is in error
is identified and the error is described to the user in text.
Success criterion 3.3.3 - Error Suggestion: If an input error is automatically detected and suggestions for
correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or
purpose of the content.

Success criterion 3.3.4 Error Prevention (Legal, Financial, Data): For Web pages that cause legal commitments
or financial transactions for the user to occur, that modify or delete user-controllable data in data storage
systems, or that submit user test responses, at least one of the following is true:
o
Reversible: Submissions are reversible.
o
Checked: Data entered by the user is checked for input errors and the user is provided an opportunity
to correct them.
o
Confirmed: A mechanism is available for reviewing, confirming, and correcting information before
finalizing the submission.

Success criterion - 4.1.1 Parsing: In content implemented using markup languages, elements have complete
start and end tags, elements are nested according to their specifications, elements do not contain duplicate
attributes, and any IDs are unique, except where the specifications allow these features.

Success criterion 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form
elements, links and components generated by scripts), the name and role can be programmatically
determined; states, properties, and values that can be set by the user can be programmatically set; and
notification of changes to these items is available to user agents, including assistive technologies.
Web editors: Pay particular attention to:

Success criterion 1.1.1 - Non-text Content: All non-text content that is presented to the user has a text
alternative that serves the equivalent purpose, except for some situations.

Success criterion 1.2.1 Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded
video-only media, the following are true, except when the audio or video is a media alternative for text and is
clearly labeled as such:
o
Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent
information for prerecorded audio-only content.
o
Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that
presents equivalent information for prerecorded video-only content.

Success criterion 1.2.2 - Captions (Prerecorded): Captions are provided for all prerecorded audio content in
synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Siteimprove
1422 Lake St, Suite #314
Minneapolis, MN 55408
Contact:
[email protected]
800-493-0465

Success criterion 1.2.3 - Audio Description or Media Alternative (Prerecorded): An alternative for time-based
media or audio description of the prerecorded video content is provided for synchronized media, except when
the media is a media alternative for text and is clearly labeled as such.

Success criterion 1.2.4 - Captions (Live): Captions are provided for all live audio content in synchronized
media.

Success criterion 1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded
video content in synchronized media.

Success criterion 1.3.1 - Info and Relationships: Information, structure, and relationships conveyed through
presentation can be programmatically determined or are available in text.

Success criterion 1.3.3 - Sensory Characteristics: Instructions provided for understanding and operating
content do not rely solely on sensory characteristics of components such as shape, size, visual location,
orientation, or sound.

Success criterion 1.4.1 - Use of Color: Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual element.

Success criterion 1.4.5 - Images of Text: If the technologies being used can achieve the visual presentation,
text is used to convey information rather than images of text except for the following:
o
Customizable: The image of text can be visually customized to the user's requirements;
o
Essential: A particular presentation of text is essential to the information being conveyed.

Success criterion 2.4.2 - Page Titled: Web pages have titles that describe topic or purpose.

Success criterion 2.4.4 - Link Purpose (In Context): The purpose of each link can be determined from the link
text alone or from the link text together with its programmatically determined link context, except where the
purpose of the link would be ambiguous to users in general.

Success criterion 2.4.6 - Headings and Labels: Headings and labels describe topic or purpose.

Success criterion 3.1.2 - Language of Parts: The human language of each passage or phrase in the content can
be programmatically determined except for proper names, technical terms, words of indeterminate language,
and words or phrases that have become part of the vernacular of the immediately surrounding text.
Siteimprove
1422 Lake St, Suite #314
Minneapolis, MN 55408
Contact:
[email protected]
800-493-0465
Helene Nørgaard Bech
Senior eAccessibility consultant. M.Sc in IT
Advisor on all aspects of digital accessibility. Helene is an
experienced educator and has many years of experience in
teaching web accessibility.
Write to Helene by: [email protected].
This white paper is licensed by Creative Commons17.
17
http://creativecommons.org/licenses/
Siteimprove
1422 Lake St, Suite #314
Minneapolis, MN 55408
Contact:
[email protected]
800-493-0465