WCAG Accessibility Testing Guide

The following guide is organized under WCAG’s four leading principles of accessibility regarding web content. These principles can be
described as:
1. Perceivable - A site must provide text alternatives for non-text content, alternatives for time-based media, layout alternatives for
related or sequential content, and generally make sure all content is easy to see and hear.
2. Operable - A site must provide keyboard access, enough time to read and use content, orientation, clear navigation, and organized
content. A site must also operate safely without flashing.
3. Understandable - Content must be readable, consistent, and predictable. Instructions must be clear and helpful.
4. Robust - Content must be compatible with a variety of user agents and assistive technologies.
The guide focuses on level A and AA success criteria as this is considered a best practice, and is usually the level required by legislation.
The guide provides a quick overview of each success criterion as well as techniques for testing. This list is not exhaustive and does not
include all possible testing techniques or ways of meeting each criterion. Links to the WCAG document are provided in the Success
Criterion column. I encourage you to read these in depth to increase your understanding of the requirement, the techniques that could be
used to meet it, and the common failures.

Principle 1: Perceivable
Success Level What to test for Testing method
Criterion

1.1.1: Non-text A Automated

● Do all images, icons, charts, infographics and
Content
other visuals have alternative text?
Note: the alt text attribute can only be used on
<img> elements. Other elements, such as icons,
can have an aria-label, aria-labelledby or aria-
describedby attribute. These are all valid forms
of providing text alternatives to images.
● Does the alternative text sufficiently describe
● Run an automated accessibility checker
and inspect alt text descriptions.
Manual
● Right click on the image and select
‘inspect element”. Look for alt, aria-label,
aria-labelledby and aria-describedby
attributes.
 images? Assistive Technology

● If the image is decorative, is the alt attribute ● Navigate to images and icons using a
blank? screen reader and listen to the
Note: empty alt text is not allowed on image links descriptions.
(since they cannot be decorative).

1.2.1: Audio- WCAG Manual

● Does video-only or audio-only content, such as
only and Video- 2.0 A
only audio clips, podcasts, slideshows, etc., have an ● Is there a link or attached document that
(Prerecorded) alternative format, such as a transcript? provides an alternative?

1.2.2: Captions WCAG Manual

● Do all videos have accurate captions?
(Prerecorded)** 2.0 A
** ● Check if a captions option is available for
videos, and listen to a few sample videos
to check for accuracy.

1.2.3: Audio WCAG Manual

● Do videos have text on the screen that is not
Description or 2.0 A
Full Text communicated through the audio track? Does the ● Watch a few sample videos on the site
Alternative video have significant visual narrative (footage and establish whether an alternative
that is not decorative)? If yes, is an alternative format is required. If yes, check if one is
format provided? available.

1.2.4: Captions WCAG ● Is live video content captioned? Manual

(Live) 2.0 AA ● Check if a captions option is available for
live video.

1.2.5: Audio WCAG ● Do videos have audio descriptions that describe Manual
Description 2.0 AA the visual content? ● Check if videos have a selectable audio
track that includes audio descriptions, or
an alternative version of the video that

2

1.3.1: Info and WCAG
● Does the page contain a proper heading
Relationships 2.0 A
structure? A proper heading structure:
o Contains an single h1 level heading per
page that identifies the overall page topic.
o Follows a hierarchical structure
o Does not contain empty headings
● Are tables marked up correctly? Correct table
markup:
o Defines column and/or row header cells
with a <th> tag.
o Identifies header scope or links headers
with data cells using ids in complex
tables. For example, if a table has divided
into sections and each section has its
own headers, there is a programmatic
association between those headers and
the related cells.
o Is not used for layout. In cases where
tables are used for layout,
role=”presentation” is used so that AT can
disregard the table structure.
● Are lists, including navigation items and carousel
slides, marked up correctly? Correct list markup
o Encases lists in a <ul> (unordered list) or
<ol> (ordered list) tag, with each item
tagged as <li>.
o Does not split lists that are arranged in
columns visually into separate lists.
includes described video.
Automated
● Run an automated accessibility checker
and inspect relevant results (tables, input
fields, lists, etc.)
Manual
● Right click on page elements and select
‘inspect element”. Inspect the markup to
see whether or not it is correctly
implemented. If you’re not sure, research
examples that you can use as a reference.
For example, the WebAIM website the
ARIA authoring practices document are
great places to start.
● Inspect the heading structure using the
Chrome HeadingsMap addon.
Assistive Technology
● Navigate through pages with a screen
reader. Is the information on the page,
such as form fields, tables, hidden content,
show/hide toggles, etc. communicated
accurately?
3
● Are form fields labeled correctly using the <label>
tag, aria-label or aria-labelledby attribute?
● Are related inputs such as groups of checkboxes
and radio buttons grouped together using a
<fieldset> tag and labeled using a <legend> tag?
● Is content that is visually hidden also hidden from
AT, for example, using either HTML hidden or
aria-hidden?
● Are show-hide toggles communicated to AT
using aria-expanded?
● Do tabs have proper ARIA markup?

● Are there autocomplete search fields, if yes, is

ARIA implemented?
● Are there custom controls (divs and spans rather
than native HTML elements)? If yes, are the
proper ARIA properties used?
● If there are carousels? Do they have proper
semantic markup?
● Is aria-live overused in a way that interferes with
the operations of the website?
● Do modal dialog windows have role=dialog”

● Are there sortable tables? If yes, is proper ARIA

implemented?

4
 ● Are there pop up elements? If yes, do they have
an aria-haspop attribute?

1.3.2: WCAG Manual

● Does the programmatic order of content match
Meaningful 2.0 A
Sequence the visual order? ● Disable CSS styles (for example in
Firefox: Tools > Web Developer Extension
> CSS > Disable Styles > Disable All
Styles.) Does the order of the content still
make sense?
Assistive Technology
● Move through the content with a screen
reader. Is the order of content that is
announced by the screen reader logical?
Does it match the visual order (note: in
some cases minor differences in the order
are ok if they make sense and don’t
impact the meaning).

1.3.3: Sensory WCAG Manual

● Are there instructions that rely on sensory
Characteristics 2.0 A
characteristics? ● Read through instructions to see if any of
them rely on sounds (e.g. the beep
indicates..), visual cues (e.g. fill out fields
marked in red) or other sensory
information.

1.3.4 WCAG ● Is it possible to view the interface in both portrait Manual

Orientation 2.1 AA and landscape modes? ● On a mobile device, switch the orientation
of the screen from portrait to landscape.
The interface should respond to both (with
the exception of interfaces that require a
particular orientation, such as a piano
keyboard being displayed only in

5
 landscape view).

1.3.5 Identify WCAG ● Do forms identify the type of each input field so Manual
Input Purpose 2.1 AA that the inputs can be autocompleted? ● Inspect the code of each input element.
Do the input fields have an autocomplete
attribute with a value that matches the
purpose of the field (e.g. given-name, cc-
number, etc.)?

1.4.1: Use of WCAG Manual

● Is colour alone used to communicate
Color 2.0 A
information? Common examples include colour ● Look through the website to see if links
used to differentiate between body text and link and other information is communicated
text, and colour used to categorized content, using only colour.
such as correct or incorrect information.

1.4.2: Audio WCAG Manual

● Is there any audio on the site that starts playing
Control 2.0 A
automatically and lasts more than 3 seconds? If
yes, is it possible to stop the audio or adjust its
volume without changing the system volume?
● If the site contains audio that plays
automatically, check if there are controls
that allow you to stop it or adjust its
volume.

1.4.3: Contrast WCAG Manual/Automated

● Are there text/background colour combinations
(Minimum) 2.0 AA
that have low contrast? The contrast requirement
at Level AA is 4.5:1 for regular sized text and 3:1
for large text (18pt+) or bold text (14pt+).
● Use a colour contrast analyzer such as
TPG Colour Contrast Analyser to check if
different combinations of text and
background colours throughout the site
meet criteria.

1.4.4: Resize WCAG Manual

● Are there any display issues when resizing only
text 2.0 AA
the text on the page to 200%? Examples include ● Increase text size to 200% using the
overlapping, obscured or cut off content. browser. Make sure that zooming in does

6
 not require horizontal scrolling, and that
you are increasing the text size alone (e.g.
in Firefox: View > Zoom > Zoom Text
Only. In Chrome, download the Zoom Text
Only extension.)

1.4.5: Images WCAG Manual

● Are there any instances where text is presented
of Text 2.0 AA
as an image? There are exception to this ● Select all content using Ctrl+A and check
criterion: for text that is embedded in images.
o If a presentation is considered essential Alternatively, disable images using the
to the content (e.g. logos) browser settings.
o If the image of text is customizable by the
user.

1.4.10 Reflow WCAG ● When content size is increased, does the content ● Increase the content size to 400% (four
2.1 AA resize responsively without requiring vertical times the default size), can you interact
scrolling? with the content without having to scroll
vertically as well as horizontally?

1.4.11 Non-text WCAG ● Are there icons or user interface components that Manual/Automated
contrast 2.1 AA have low contrast? The contrast requirement at is
3:1 or higher. ● Use a colour contrast analyzer such as
TPG Colour Contrast Analyser to check if
different combinations of text and
background colours throughout the site
meet criteria.

1.4.12 Text WCAG ● Can text spacing be adjusted

Spacing 2.1 AA Manual

Inspect the code and manually adjust the spacing

in the CSS rules. Adjust the text spacing as
follows and make sure that content is not cut off

7
 or overlap

● Line height (line spacing) to at least 1.5

times the font size;
● Spacing following paragraphs to at least 2
times the font size;
● Letter spacing (tracking) to at least 0.12
times the font size;
● Word spacing to at least 0.16 times the
font size.

Alternatively, you can use a browser extension or

bookmarklet, such as this one:
https://www.html5accessibility.com/tests/tsbookm
arklet.html

1.4.13 Content WCAG ● Is content hoverable, dismissable and persistent Manual

on Hover and 2.1 AA on both hover and focus. ● Dismissible: check that any content that
Focus appears on hover or focus can be
dismissed without shifting focus away. For
example, by pressing the Esc key.
● Hoverable: check that the content remains
visible when the use hovers not only on
the trigger, but also the content itself.
● Persistent: does the content remain on
screen until you either move focus from
the content, or dismiss it? Exception: time
sensitive content, such as a ‘busy’
message,

8
Principle 2: Operable
Success Level What to test for Testing method
Criterion

2.1.1: WCAG Manual

● Are all controls operable with a keyboard?
Keyboard 2.0 A
● Navigate through the entire page using
only TAB and Shift+TAB keys to check
that all interactive elements receive focus
and can be operated with a keyboard.

2.1.2: No WCAG Manual

● Are there any sections on the page that trap
Keyboard Trap 2.0 A
keyboard focus? ● Navigate through the entire page with a
keyboard to make sure focus does not
become trapped anywhere on the page.

2.1.4 Character WCAG ● Are there any keyboard shortcuts that use only
Key Shortcuts 2.1 A letter, number, punctuation or symbol characters
(without modifier keys such as Ctrl, Alt, etc.)? If
yes, is the user able to modify or disable the
shortcuts?
Manual
● If the interface uses keyboard shortcuts,
check that it is possible to either turn off
the shortcuts, or modify them.

2.2.1: Timing WCAG Does the site contain any time limits that are shorter Manual
Adjustable 2.0 A than 20 hours (such as getting logged out after a certain
period of time)? If yes, is it possible to extend, adjust or ● Check for any time limits on the site.
turn off the time limit? The most common example of
meeting this success criterion is an “Are you still there?”
message that allows users to indicate that they are still
using the site.
Time limits that are essential or time limits that are a
required part of a real-time event (e.g. auction) are
exceptions to this criterion.

9
2.2.2: Pause, WCAG Is there moving content on the page, such as carousels, Manual
Stop, Hide 2.0 A sliders, or animations? If yes, is it possible to stop or
hide the content? ● For all moving content on the page, check
that a mechanism exists that allows the
user to either stop or hide it.

2.3.1: Three WCAG Manual

● Is there any content that flashes more than three
Flashes or 2.0 A
Below times per second? ● Check whether the site contains flashing
Threshold content.

2.4.1: Bypass WCAG Assistive Technology

● Is there a skip-to-content link at the top of each
Blocks 2.0 A
page that allows users to bypass the navigation
and move focus to the main content?
● Navigate pages with a screen reader. Is a
“skip to main content” link announced at
the top of each page?
● Navigate the page with a keyboard. Is
there a skip to content link at the top of the
page that is either always visible or
becomes visible when a user tabs through
the site?

2.4.2: Page WCAG Manual

● Do pages have unique and descriptive
Titled 2.0 A
programmatic titles? ● Check the text that appears at the top of
the page tab in the browser or the <title>
tag within the <head> of the HTML code.
Is it unique and descriptive?

2.4.3: Focus WCAG Manual

● Does the order of focusable items follow a logical
Order 2.0 A
sequence? ● Navigate through the focusable items on
the page using the keyboard to check that
● If there are modal dialog windows, does focus
the sequence is logical.

10
 shift into the window once it’s opened and then is
constrained there until the user closes the
window?

2.4.4: Link WCAG Manual

● Is the purpose of links clear?
Purpose (In 2.0 A
Context)
● Are there images that serve as links? If yes, do
they have an alt attribute or aria-label that
describes the link destination?
● Go through the links on the page (for
example by tabbing through the page). Is
the purpose of the links clear from the link
text or the surrounding text (e.g. from the
surrounding paragraph in the case of link
text such as “Read more”), or through an
aria-label or aria-labelledby attribute?

2.4.5: Multiple WCAG Manual

● Can the content of the site be located in more
Ways 2.0 AA
than one way? ● In addition to navigation, which is usually
the primary way of locating content, can
content be found via either a search
function or a site map?

2.4.6: WCAG Manual

● Are the headings and labels on the site clear and
Headings and 2.0 AA
Labels descriptive? ● Look through the headings and labels on
the site to check if they are clear and
descriptive.

2.4.7: Focus WCAG Manual

● Is keyboard focus visible?
Visible 2.0 AA
● Navigate through the site using a
keyboard to check that focus is visible and
easy to follow.

2.5.1 Pointer WCAG ● Does the content require the use of multipoint Manual
Gestures 2.1 A touch gestures, for example pinch zoom? ● Check that wherever multipoint touch

11
 gestures are required, the same task can
be accomplished through user interface
controls. For example, in addition to pinch
zoom, +/- buttons are available to zoom in
and out.

2.5.2 Pointer WCAG ● When clicking, are events happening on a down- Manual
Cancellation 2.1 A event? Can they be undone or reversed? ● For click events, check that actions
happen when the pointer is released (up-
event), rather than when the pointer is
clicked (down-event). Alternatively,this
criterion can be met if the events can be
undone or aborted, for example by moving
the pointer away from the target, or
reversed on the up event.
Exception: some instances require action
on down events, for example playing a
digital piano keyboard.

2.5.3 Label in WCAG ● Do interface components have programmatic Manual

Name 2.1 A labels that match the visual label for the ● Inspect the code to ensure that user
component? interface components have programmatic
labels. Inspect the label, aria-label or aria-
labelled for each input, to ensure that they
match the visual label.
Automated
● Automated checkers can also be used to
see if user interface components are
missing programmatic labels. However
this check can not establish whether the
programmatic label matches the visual
label.
AT
● Use a screen reader to navigate through

12
 user interface components, does the label
that is communicated by the screen reader
match the visual label?
Tip: Use Tab/Shift+Tab to move through
interactive elements. The input name
should be read out once you land on the
component.

2.5.4 Motion WCAG ● Are there any actions that make use of motion
Actuation 2.1 A actuation, such as shaking a phone to undo
typing or tilting the screen to progress through
content. If yes, can the same actions be
performed through alternative means?
Manual
● If any events are triggered by a devices
motion, check that the event can be
performed by alternative means. For
example if an action can be undone by
shaking the phone, is there also an ‘undo’
button?

Principle 3: Understandable
Success Level What to test for Testing method
Criterion

3.1.1: WCAG Manual

● Is page language defined programmatically?
Language of 2.0 A
Page ● Inspect the HTML source code to see if
language is defined programmatically at
the very top of the page in the beginning
html tag (e.g. <html lang=”en”>)

3.1.2: WCAG Manual

● Are the sections of text that are in a language
Language of 2.0 AA
Parts that is different from the main document ● Inspect the source code of the text section
language? If yes, is the language defined for to see if the language is defined
these sections of text? programmatically.

13
3.2.1: On WCAG Manual
● Are there any changes in context, such as a new
Focus 2.0 A
window opening, focus shifting to a different ● Tab through the page to ensure that no
element, or a new page loading, that happen changes in context happen on focus.
when an element receives focus?

3.2.2: On Input WCAG Manual

● Are there inputs, such as radio buttons, select
2.0 A
menus, text fields, etc., that initiate a change of ● Fill out inputs on the site to check if any
context? For example, a form that gets changes in contexts happen without being
submitted when the last input is filled out rather initiated by the user.
than providing a “submit” button.

3.2.3: WCAG Manual

● Do navigation items, such as menu links, appear
Consistent 2.0 AA
Navigation in the same order across different page? ● Check that navigation is consistent across
pages.

3.2.4: WCAG Manual

● Are components identified inconsistently
Consistent 2.0 AA
Identification throughout the site? For example, a button says ● Check that components, such as buttons
‘search’ on one page and ‘find’ on another when and icons, are identified consistently
the two perform the same function. across pages.
Assistive Technology
● Check that components are labeled
consistently across pages.

3.3.1: Error WCAG Manual

● If errors are detected automatically (i.e. the form
Identification 2.0 A
fails to submit and is returned to the user unless
it’s filled out in a particular way), are they
identified and described to the user? For
example, if the form is returned, fields that are
● Attempt to submit an empty form. If the
form is returned with errors, check that
incorrectly filled fields are identified and
error descriptions are given.

14
 filled out incorrectly are marked and the error is
described, for example “First name is required”.

3.3.2: Labels or WCAG Manual

● In interactive forms, are labels and descriptive,
Instructions 2.0 A
identify controls and provide instructions where ● Go though any forms on site (contact,
necessary? subscribe, etc.) and check that the
headings and labels on the page make the
form and its components clear.

3.3.3: Error WCAG Manual

● If errors are detected automatically, are the error
Suggestion 2.0 AA
messages descriptive and provide suggestions
for fixing these errors? For example, if a field
requires a specific format such as DD MM YY, is
the user notified when a wrong format is
submitted?
● Leave required fields blank and try to fill
out fields that typically require a specific
format, such as email and date fields,
incorrectly. Are suggestions given when
the form is returned with errors?

3.3.4: Error WCAG This criterion can be difficult to test without

● If a form requires the user to submit financial or
Prevention 2.0 AA attempting to submit financial or legal information.
(Legal, legal information, does it allow the user to either
Financial, revers, review or confirm the submission?
Data)

15
Principle 4: Robust
Success Level What to test for Testing method
Criterion

4.1.1: Parsing WCAG Automated

● Is markup language used to its specifications?
2.0 A
● Run a few sample pages through an
HTML validator such as Nu HTML
checker. Report any errors to the
development team.

4.1.2: Name, WCAG Assistive Technology

● When user interface components are custom, is
Role, Value 2.0 A
the function (e.g. button) and state (e.g. selected) ● Use a screen reader to navigate through
specified programmatically in a way that is the site and pay attention to how custom
accurately communicated to AT? Examples of controls are communicated.
custom controls include show/hide toggles, and
Note: Many of the issues will be
inputs such as buttons and select menus that are
identified when testing Information and
created using divs and/or spans instead of
Relationships 1.3.1 criterion.
standard HTML elements.

4.1.3 Status WCAG ● Are there any status messages on the site, for Manual
Messages 2.1 A example the number of results that come up in a ● Inspect the code of the status message.
search, or the successful submission of a form? If Does it contain a role=”status” or
yes, are these communicated to assistive role=”alert”. In some instances aria-live
technologies? can also be used, however this attribute
should be used only when absolutely
necessary.
Assistive technology
● When performing actions that trigger
status messages, are these messages
communicated by the screen reader in
real time?

16
Resources
● Web Content Accessibility Guidelines 2.0

● Using NVDA to evaluate web accessibility

● Using VoiceOver to evaluate web accessibility

17