1. No category

Web Governance made easy
January 2014
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.
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.
Web accessibility for all
Mostly for web designers
Mostly for web developers
Mostly for web editors
Mostly for web managers
Getting started
Who is Siteimprove?
Siteimprove provides organisations of all shapes and
sizes smart tools that make web site management and
maintenance both easier and more affordable.
Web: siteimprove.co.uk
Tel: 0845 226 8050
Siteimprove has a global presence with offices in Denmark,
UK and USA. The company proudly serves more than 1,300
organisations worldwide.
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.
Studies 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
In the UK the Equality Act states that websites are to
on which you build other aspects such as usability.
be accessible to everyone. More on this is covered in
the section ‘Which guidelines should be followed?’ This
means that if the responsibility of a website or part of a
website lies with you, then 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
optimisation (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 textual (such as
Who is accessibility for?
By optimising 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 organisation 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 recognised. 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
3
ensure that a website works across different platforms
4
2
including browsers and assistive technologies
http://en.wikipedia.org/wiki/Assistive_technology
http://www.w3.org/TR/WCAG20/
http://www.w3.org/2003/03/Translations/byTechnol
ogy?technology=WCAG20
5
All criteria on level A and level AA
2
are 38 criteria in all to comply with. These are the
This is the end of the introductory part of the
framework for the rest of this white paper.
document. In the following, role specific descriptions
on which criteria to consider are given.
Mostly for web designers
Consistent design
Some users are not accustomed to using the Internet
and some users have a disability that makes it hard to
get an overview of a webpage and navigate a website.
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
There are 4 interrelated documents to work with in
the website. At the same time it is important that
connection with WCAG 2.0. You have the main
elements having the same function such as icons and
document giving some background information and
references are given in the same way across the
compromising all the criteria and their levels. Then you
website.
have a document describing how conformance is
ensured. This document refers to a document
containing specific techniques often with coding
examples. Finally there is a document giving a detailed
description of the individual criteria, why it is relevant
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
and who it is relevant for.
content on a page by navigating through the intended
Who is to work on web accessibility?
the page in another way through a sitemap, an index
Accessibility is something that is relevant for everyone
or a search function.
working with websites regardless of whether you are a
web designer, web developer, web manager or web
editor. Generally speaking, web accessibility is very
technical and many aspects are ensured in the
page hierarchy but it should also be possible to find
Headings
When designing the look and feel and the architecture
of a website it is important to keep in mind that some
development phase.
users cannot get a visual overview of a web page. They
There are a large number of tools that in an automated
divided into logical sections each having a heading
way can check if a website is in compliance. But there
(coded as an <h> tag) describing the content, so that
are a number of criteria that cannot be checked in an
assistive technologies can render them as section
automated way; a number of assisting toolbars are
headings.
have to do this structurally. Make sure pages are
available to help manually assessing whether content is
in conformance. This is described in more detail in the
section ‘Mostly for web managers’.
3
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,
they have a text connected to them describing the
purpose.
Use of colour
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 not to give information solely by
the use of colour. For users that cannot see colours,
then information can be lost. An example could be to
show links within a text by giving links a different
colour than the text. Supplement this with another
non-colour specific way of indicating the links (such as
underline, a symbol etc.).
Mostly for web developers
In order for visually impaired users to be able to read
Page titles
all the text on web pages it is important that the colour
Make sure that all web pages have a descriptive title
of the text and the colour of the background are in
reflecting the page content. Also make sure that web
sufficient contrast to each other. This can be ensured
editors can enter page titles via the authoring tool (for
by conforming to the requirement of keeping a
example CMS).
contrast ratio of 4.5:1 for regular text and 3:1 for large
text6. There are a number of tools available to quickly
Keyboard navigation
assist in measuring the contrast ratios.
All content on a web page should be navigable both
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
6
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.
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.
4
Content sequence
Language
When content for web pages is coded make sure that
In order for user agents to be able to render content in
the content, not only visually but also in the coding
the correct language, it is important that the pages
sequence, has a meaningful order. Some users
have a correct language definition in the HTML tag for
navigate pages by this order. Ensure that the order of
a web page. The language tag should be ‘en’ for
content is sensible when styles are disabled and when
English pages for instance and ‘da’ for Danish pages
tabbing through content.
and so on7.
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 into 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
a minimum, and still be usable and look sensible
(newer browsers can zoom content and this is usually
the way that assistive technologies do it as well).
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
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 <h1></h1>
(h1…h6).
7
http://www.w3.org/International/articles/languagetags/Overview.en.php
5
Data tables should be tagged as <table> and web
user should have the option of reading through the
editors should be able to give description to data
input before sending it. A third option is that the user
tables via <caption>. Headings for columns and rows
can always reverse the submission.
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
Graphics
When web pages contain elements that are non-
done via ‘summary’.
textual it is important to give a textual alternative
When writing text, web editors should be able to
for instance can be an image. For images the HTML
emphasise with <strong> and <em>.
attribute for alt text is used (alt=””). It is important that
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.
describing the purpose of the non-text element. This
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 tagged on all images. 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 alternative text every time
an image is used on a web page.
If a web page contains a media file, it should also be
given a descriptive text either as an alt attribute or in
the object tag on inline elements and the like.
Audio and video
When audio and video is published on a web page
there are a number of criteria that are relevant. One
User input
If the user is to enter information in a text field, make
sure that where the user does not enter text in the
right format the user is notified with text, and if
possible help the user correct the mistake. When filling
out a form that is part of a financial transaction or a
legal commitment where data is changed, the input
must be checked by the system to avoid errors or the
being to give an alternative format, but also to have
captions and audio description. These are described in
detail in the section ‘Mostly for web editors’.
Through development it is important to ensure that all
buttons and navigation in the player can be used both
with a computer mouse and from the keyboard alone.
At the same time buttons and navigation are given
textual descriptions to help screen readers.
6
For a video it should be possible to enter a dedicated
track for audio description and also the option to add
captions should be available.
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
divided into logical sections, each given a heading that
this content.
is descriptive of the section. You can use several levels
In order for screen reader users not having to listen to
<h1>,< h2> etc., so that assistive technologies can
the same content across web pages for instance, every
render them as headings).
time they load a new page, provide the option of
skipping blocks of 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 are other options as well:
http://www.w3.org/WAI/WCAG20/quickref/#qrnavigation-mechanisms-skip.
When an element is to be altered by the user, such as a
drop down menu, a radio button or the like, it is
important that it acts as the user expects. Elements
should not react solely when receiving focus or when
the user lands on it from the keyboard. It should react
when the user has had the time to choose and confirm.
Blinking content
In terms of the above, specifically for blinking content,
this should not happen with a frequency of more than
three times a second, otherwise it may cause an
of headings: heading 1, heading 2, etc. (in the code
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 colour or
with an instruction requiring sensory skills. As an
example, avoid writing things like: “… you can read
more about the event in the blue box to the right”.
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.
epileptic episode for some users.
7
Links
be confused with screen reader software used by the
When you add links on a page write link texts that
visually impaired. These are much more advanced).
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 would 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
text’ or ‘alt text’. The text given here is not visually
displayed on the page, but is hidden in the code to be
accessed by screen readers. (The alternative text is not
the same as a tooltip: The text displayed when you
hover over the image called ‘title’).
Try and close your eyes and visualise what information
you need if you cannot see the image. Describe the
purpose of the image and not necessarily what the
image is of. If the image is linking it is important to
describe where the link goes to/what happens when
clicking on the image. If the image is solely used for
decorative purposes, creating an ambience or a visual
context, it should have no alternative text. If the image
contains information, that information should be given
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 letting a visually impaired
user knows what happens on the screen. If you are not
able to provide your videos with audio description,
give an alternative in the form of a transcript that is
uploaded or linked to from the page. But be aware that
without audio description 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.
Tables
When using data tables with information it is
important to indicate what are headings for rows
and/or columns. The way to do this is very CMS
specific. In some cases the editor provides an
accessibility tab where this information can be entered
when using data tables.
Lists
When using a list of items make sure to use the
function for this that is built into the editor in the CMS.
This will ensure that the right and accessible code is
entered for lists. Avoid just making dots that looks like
a list (such as asterisk, dash etc.).
in the alternative text.
Avoid using images of text. This means that you should
Mostly for web managers
avoid, for instance, writing a text in an image editing
If you have the responsibility of ensuring accessibility
program and save it as an image. Many of the types of
on a website, all the criteria in WCAG are relevant to
software that reads text aloud (for instance used by
you (usually on level AA). It is then necessary to have a
dyslexics) cannot read images of text. This is because
fundamental understanding of the subject in order to
you cannot highlight text within an image to have it
be able to ensure, for instance, that through a
read out to you. (Some of these types of software can
development project and by an acceptance test what is
read alternative texts but far from all. They should not
delivered conforms to the guidelines. It is also
8
important that you as the responsible party make the
the CSS or in a template and an issue will be fixed and
right requirements in the requirement specifications
take effect across all pages.
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
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
accessibility issues.
at issues that a tool can find. After this, go through the
If you have policies in your organisation for
been considered. Do the same for level AA criteria.
communication and design and the like, it is a good
criteria again to check for those that might not have
idea to integrate the relevant accessibility criteria here.
A good tool can assist you in quickly identifying errors
If you are purchasing a new website remember to state
they occur9.
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 tools8.
If your job is to ensure accessibility on an existing
website, it is often a question of fixing what can be
on levels A and AA and where and on which pages
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
organisation’s web strategy.
fixed. It is always better to be 70% accessible than 60%
accessible, for instance, because it makes the website
accessible for more users.
Getting started
Start out by finding one or more tools that can assist
you in getting a quick overview of issues. There are a
lot of tools on the market that in an automated way
check for a number of accessibility issues. Also there
are a number of toolbars available assisting in
assessing accessibility. These can be installed in your
browser.
For large websites the effort most likely needs to be
prioritised. 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
8
9
For example:
http://siteimprove.co.uk/services/qualityassurance.aspx,
http://www.visionaustralia.org.au/ais/toolbar/,
https://addons.mozilla.org/enUS/firefox/addon/accessibility-evaluation-toolb/
http://www.w3.org/TR/WAI-AUTOOLS/
9
More information
Siteimprove.co.uk10
Equality Act 201011
Getting started by WAI12
Web Content Accessibility Guidelines – WCAG13
Reference to the guidelines
The formulation of the below given criteria are taken from WCAG 14 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/#qrmedia-equiv-text-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 Colour: Colour 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.

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.
10
http://siteimprove.co.uk/
http://www.homeoffice.gov.uk/equalities/equality-act/
12
http://www.w3.org/WAI/impl/improving.html & http://www.w3.org/WAI/gettingstarted/Overview.html
13
http://www.w3.org/TR/WCAG20/
14
http://www.w3.org/TR/WCAG20/
11
Siteimprove Ltd.
New Loom House, Suite 306
101 Back Church Lane
London - E1 1LU
Contact:
[email protected]
Tel: (0)845 226 8050

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 (Pre-recorded): For pre-recorded 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 labelled as such:
o
Pre-recorded Audio-only: An alternative for time-based media is provided that presents
equivalent information for pre-recorded audio-only content.
o
Pre-recorded Video-only: Either an alternative for time-based media or an audio track is provided
that presents equivalent information for pre-recorded video-only content.

Success criterion 1.2.2 - Captions (Pre-recorded): Captions are provided for all pre-recorded audio content
in synchronized media, except when the media is a media alternative for text and is clearly labelled as
such.

Success criterion 1.2.3 - Audio Description or Media Alternative (Pre-recorded): An alternative for timebased media or audio description of the pre-recorded video content is provided for synchronized media,
except when the media is a media alternative for text and is clearly labelled 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 (Pre-recorded): 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.
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.
Siteimprove Ltd.
New Loom House, Suite 306
101 Back Church Lane
London - E1 1LU
Contact:
[email protected]
Tel: (0)845 226 8050

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

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
repeated on multiple Web pages.
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

Success criterion 3.1.1 - Language of Page: The default human language of each Web page can be

Success criterion 3.1.2 - Language of Parts: The human language of each passage or phrase in the content
where the keyboard focus indicator is visible.
programmatically determined.
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

Success criterion 3.2.2 - On Input: Changing the setting of any user interface component does not
context.
automatically cause a change of context unless the user has been advised of the behaviour 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.
Siteimprove Ltd.
New Loom House, Suite 306
101 Back Church Lane
London - E1 1LU
Contact:
[email protected]
Tel: (0)845 226 8050
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 (Pre-recorded): For pre-recorded 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 labelled as such:
o
Pre-recorded Audio-only: An alternative for time-based media is provided that presents
equivalent information for pre-recorded audio-only content.
o
Pre-recorded Video-only: Either an alternative for time-based media or an audio track is provided
that presents equivalent information for pre-recorded video-only content.

Success criterion 1.2.2 - Captions (Pre-recorded): Captions are provided for all pre-recorded audio content
in synchronized media, except when the media is a media alternative for text and is clearly labelled as
such.

Success criterion 1.2.3 - Audio Description or Media Alternative (Pre-recorded): An alternative for timebased media or audio description of the pre-recorded video content is provided for synchronized media,
except when the media is a media alternative for text and is clearly labelled 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 (Pre-recorded): 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.
Siteimprove Ltd.
New Loom House, Suite 306
101 Back Church Lane
London - E1 1LU
Contact:
[email protected]
Tel: (0)845 226 8050

Success criterion 1.4.1 - Use of Colour: Colour 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.
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 Commons15.
15
http://creativecommons.org/licenses/
Siteimprove Ltd.
New Loom House, Suite 306
101 Back Church Lane
London - E1 1LU
Contact:
[email protected]
Tel: (0)845 226 8050