Manual accessibility testing

protocol
for images
This document provides guidance on manual accessibility testing for images. It is
meant to provide your teams with a working knowledge on how to conduct basic
accessibility testing that will enable them to find some of the most prevalent issues
that can impact user experience for people with disabilities.

NOTE: This document is not meant to provide an exhaustive list of every

single possible test that a tester can do. Rather, it highlights some of the most
important aspects to consider, so your testers can build a solid foundation with
accessibility using testing techniques that will be consistent with the web
accessibility testing protocols used at Simply Accessible.

Each requirement maps to the appropriate success criterion from WCAG 2.0, and it
also links to a particular browser-based testing tool where appropriate.

Images
The following requirements need to be tested for when looking at potential image
issues.

Informative images are described with a text equivalent

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate every informative image, and validate
that it provides an alt text value. Also look for informative images that do not get a
tooltip (background images).

Log an issue for each situation where an informative image (with or without a
tooltip) is not provided with an alt text value.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 Informative images provide meaningful equivalent text

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate every informative image, and validate
that it provides an alt text value that provides useful and meaningful content.

Log an issue for each situation where an informative image is provided with an alt
text value that does not provide information that will be meaningful to the user (like
filler words such as spacer, or information such as the images filename), or no alt
text value is present at all.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Text equivalents for informative images are both clear and informative

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate every image that conveys information,
and validate that it provides an alt text value that conveys the same information as
the image itself. Also look for informative images that do not get a tooltip
(background images).

Log an issue for each situation where an informative image (with or without a
tooltip) is not provided with an alt text value that is descriptive of the information
displayed in the image.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Images primarily conveying function use the alt text value to describe their
purpose, rather than what they look like

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate all images that function as link content,
button content, or provide another function, and validate that each one provides an
alt text value that conveys information about the images purpose rather than what
the image looks like. Also look for functional images that do not get a tooltip
(background images).

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 Log an issue for each situation where a functional image (with or without a tooltip)
is not provided with an alt text value that is descriptive of the images purpose.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

No important images needing text equivalents are placed as CSS background

images

Using the Web Developer toolbar, go to the Images tab and select the Hide
Background Images option. All images embedded as background images are
removed from the page. Identify whether any important information is lost as a
result of running this test.

Log an issue for each image conveying information that is embedded using CSS.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Icons that convey information are used the same way site-wide

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate all icons that are intended to provide
information to users. Verify that these icons are used consistently across the page,
and consistently with how they are used elsewhere on the site.

Log an issue for each situation where an information icon is used in a way that is
inconsistent with use elsewhere on the site.

Success Criterion: 3.2.4 Consistent Identification (level AA)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

The alt text used for images with text in them and/or representing text
includes all relevant text found in the image

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate every image that has text in it, and
validate that it provides an alt text value that provides useful and meaningful
content in relation to the text of the image.

Log an issue for each situation where an informative image that contains text is
provided with an alt text value that does not provide equivalent information that

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 will be meaningful to the user.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

"Null" alt attributes (using alt="") are used for decorative images which do
not provide information

Using the Web Developer toolbar, go to the Images tab and select the Outline
Images with Empty Alt Attributes option. All images that have an alt attribute with
an empty value will display a border. Locate every image that has an empty alt
value, and validate that the image does not provides useful and meaningful content
to the user.

Log an issue for each situation where a decorative image has an alt text value that
is not empty, or an alt attribute is not present.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Null alt attributes (using alt="") are used for images that are already
described in text in adjacent page content

Using the Web Developer toolbar, go to the Images tab and select the Outline
Images with Empty Alt Attributes option. All images that have an alt attribute with
an empty value will display a border. Locate every image that has an empty alt
value, and validate that if the image conveys information, that information is
provided in adjacent text on the page.

Log an issue for each situation where an informational image has an alt text value
that is empty where there is not adjacent text that provides the images
information.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Adjacent linked images and text links pointing to the same URL are merged
into single links

Using the Web Developer toolbar, go to the Information tab and select the View
Link Information option. A list of all the links available in the page is displayed.
Locate every situation where two links pointing to the exact same URL follow one
another, and validate whether they are adjacent in the content.

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 Log an issue for every situation where you can identify a pair of identical, adjacent
links with one image link and one text link.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Images that are changed or replaced using JavaScript have alt text values
that are updated as the images change

Locate every image that is dynamically updated in the page, either as a result of
user interaction, or a specific functionality or behaviour. Using the Web Developer
toolbar, go to the Images tab and select the Display Alt Attributes option. The alt
text value of each foreground image is displayed. Make sure the alt text value of
dynamically updated images changes as the images change.

Log an issue for each situation where an image changes, but the alt text value
remains the same.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 Any change of context for an image also updates its text equivalent to
represent the change

Locate every image that is dynamically updated in the page, either as a result of
user interaction, or a specific functionality or behaviour. Using the Web Developer
toolbar, go to the Images tab and select the Display Alt Attributes option. The alt
text value of each foreground image is displayed. Make sure the dynamically
updated alt text value of images remains descriptive of the images displayed.

Log an issue for each situation where a change of context change the meaning of
an image, but the alt text value remains the same.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Alternate text for icons, image buttons, or other navigational elements

clearly describes the destination or action

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate all call-to-action images (those that form
the content of icons, buttons, or links), and validate that each one provides an alt
text value that conveys information about the call-to-actions destination or
purpose. Also look for call-to-action images that do not get a tooltip (background
images).

Log an issue for each situation where a call-to-action image (with or without a
tooltip) is not provided with an alt text value that is descriptive of the call-to-
actions destination or purpose.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

The page contains no direct links to image files

Using the Web Developer toolbar, go to the Information tab and select the View
Link Information option. A list of all the links available in the page is displayed.

Log an issue for each situation where a URL points directly to an image file format
(png, svg, jpg, , jpeg, gif, tiff, bmp, etc).

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 Alt attributes are used for all areas of an image map

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate every part of any image map, and
validate that it provides an alt text value that provides useful and meaningful
content.

Log an issue for each situation where a part of an image map is provided with an alt
text value that does not provide information that will be meaningful to the user (like
filler words such as spacer, or information such as the images filename), or no alt
text value is present at all.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Alternate means of accessing CAPTCHA information are provided (i.e. audio

CAPTCHA, logical question, etc.)

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate CAPTCHA images and validate that they
provide an alt text value that matches the content of the CAPTCHA.

Additionally, locate options for solving the CAPTCHA without being able to see the
image or access the alt text. Look for options to play an audio file, check a box, fill
out a math problem, or other means. If the CAPTCHA has interactive controls, also
perform the Keyboard verifications included here. If the CAPTCHA includes form
elements, such as text fields or checkboxes, also perform the Form verifications
included here.

Log an issue for each situation where a CAPTCHA image is present with an alt text
value that does not provide information that will be meaningful to the user (like
filler words such as spacer, or information such as the images filename), or no alt
text value is present at all.

Log an issue if there is no additional accessible way to solve the CAPTCHA.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Images that flash or blink do not do so for more than 3 times per second

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 For flashing or blinking graphics, using a stopwatch or timer, count the number of
times a graphic flashes or blinks for a number of seconds. Calculate the number of
blinks per second.

Log an issue if a graphic blinks more than 3 times per second.

Success Criterion: 2.3.3 - Three Flashes or Below Threshold (level A)

Tool used: Stopwatch or timer

Charts, graphs, and infographics do not rely on colour alone to convey

information

Navigate to the chart, graph, or infographic. Examine how information is conveyed

with colour. Locate any information that is shown that relies on a colour alone to
indicate size, importance, a specific value, etc.

Success Criterion: 1.4.1 - Use of Colour (level A)

Tool used: None

Log an issue if the graphic provides information that is only conveyed with colour
without a label, a pattern, or another way of distinguishing values and meanings.

The purpose of complex images (charts, graphs, infographics, diagrams) is

briefly described using a descriptive alt text value

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate alt values for complex images and verify
that a brief description of the purpose of the graphic is included as an alt value.

Log an issue for each situation where a complex image has no alt attribute, a very
long alt attribute, or an alt attribute that does not provide a short description of the
images content.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

The full description of complex images is provided through the longdesc

attribute or adjacent text

Navigate to the chart, graph, or infographic. Using the browser Web Inspector,
examine the complex images attributes. Verify if a longdesc attribute is provided,
and if it points to a URL. Verify that the URL is correct, and that the information
provided at that URL sufficiently describes the content of the graphic. Alternately,

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.
 verify that there is a text description of the graphic provided adjacent to the graphic
on the original page.

Log an issue for each situation where a complex image has no longdesc or an
adjacent description provided.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Inspector (any browser)

The alt text value of images and linked images does not replicate any
information that is already being conveyed by screen reader technology

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. All images embedded as foreground images will display a tooltip
with their respective alt text values. Locate every informative image, and validate
that its alt text is not the same as information provided in regular text on the page.

Log an issue for each situation where an image duplicates content that is provided
elsewhere on the page.

Success Criterion: 1.1.1 - Non-text Content (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: hello@simplyaccessible.com.