NavX Design Studio

Illustration by StorySet

Evaluating Accessibility REPORT

Prepared for: Accessibility Evaluation & Universal Design

Prepared by: Franklin Navarrette

06/06/2022

http://www.stockandbarrelco.com/


Page 1 of 43

 TABLE OF CONTENTS

SUMMARY 4
Introduction 4
Project Goals 4
Scope 4
Methodology 5
EXECUTIVE SUMMARY 6
Results Summary 6
Summary Recommendations 6
BACKGROUND – DISABILITIES 7
What is a Disability? 7
Types of Disabilities 7
Prevalence of Disabilities 8
What is Accessibility? 8
BACKGROUND – WCAG 2.1 BACKGROUND AND
PRINCIPLES 9
The Web Content Accessibility Guidelines 2.1 9
AUDIT METHOD 11
RESULTS – INSPECTION 12
SUMMARY RESULTS 12
RESULTS – WCAG 2.1 CHECKPOINTS 13
PRINCIPLE 1 - PERCEIVABLE 13
PRINCIPLE 2 - OPERABLE 19
PRINCIPLE 3 - UNDERSTANDABLE 27
PRINCIPLE 4 - ROBUST 30

Page 2 of 43

 EXPERIENCE WALKTHROUGH – SUMMARY RESULTS 32

User Experience Walkthrough 32
EXPERIENCE EVALUATION - VISION 34
What Do Visitors Using Screen Readers Initially Experience? 34
EXPERIENCE EVALUATION - MOBILITY 35
What Do Visitors Using Only a Keyboard Experience? 35
RESULTS AND RECOMMENDATIONS 36
APPENDIX A - RECOMMENDED TOOLS 37
APPENDIX B - SCREENSHOTS PT. I 38
APPENDIX B - SCREENSHOTS PT. II 39
APPENDIX B - SCREENSHOTS PT. III 40
APPENDIX B - SCREENSHOTS PT. IV 41
REFERENCES 42

Page 3 of 43

 SUMMARY
Introduction
This project has been commissioned to assess the extent to which
www.stockandbarrelco.com meets the standards set by the Web Content Authoring
Guidelines (WCAG), version 2.1 (authored by the Web Accessibility Initiative (WAI), a
working group of The World Wide Web Consortium (W3C)). In addition to evaluation, this
project was to provide clear and actionable recommendations.

This report illustrates the results of three evaluation methods (automated code inspection,
manual code inspection, and experience walkthrough). Herein also lies the
recommendations necessary to bring into www.stockandbarrelco.com compliance with the
WCAG version 2.1

Below is a summary of the project goals and scope.

Project Goals
Because the WCAG is an enormous document, and the standards cover issues outside the
scope of this project, this evaluation focused on these speci c areas of web content
accessibility:

• The degree to which the site supports assistive technology (e.g., screen readers,
screen enlargement applications, etc.)

• The extent to which a user can navigate without the use of a mouse or trackpad

• The extent to which the organization and hierarchy of content allow the user to
understand the content and their current location within the website’s information
architecture.

• Captioning and transcript availability/support for audio or video synced content (if
present)

• Which pages, if any, meet color contrast standards

Scope
This evaluation covered the following areas of the site:

‣ Home Page

‣ Product Search Page

‣ Product Page

Page 4 of 43

fi


 Methodology
1. Using the program Sortsite, an automated code inspection will be conducted to
evaluate backend support for assistive technology and whether the code meets the
WCAG standards. Understanding how the underlying code supports the user
experience is a good starting point and a great way to catch issues easily missed by
human error. While this process is exhaustive, it cannot measure the quality of ALT tags,
page organization and layout, and other accessibility-related code.

2. Additionally, a manual code inspection will be conducted to evaluate any areas Sortsite
may have missed or to root out any false positives. This process will focus on issues
related to mobility and vision through a process similar to the experience walkthroughs.
For mobility issues, the site will be navigated through with only keyboard controls, and
each time a barrier is encountered, the problem will be noted and then tracked down
within the code (if possible). For vision-related issues, a screen reader will be used, and
again any barriers and poorly written or absent alternative text will be noted and found
within the code.

3. Finally, two (simulated) experience walkthroughs will tackle where code inspections fall
short - the actual experience of the user. In reality, the user’s experience of the website
can di er widely from expectations, regardless of how correct the code is at face value.
The rst experience walkthrough will be conducted as if the user has low vision by
testing magni cation/zoom capabilities. Then the website will be navigated with only a
keyboard (i.e., no mouse or trackpad) to simulate the experience of a user with mobility
impairment.

During the experience walkthroughs, the following e-commerce work ows will be
tested:
• Browsing the main page.

• Searching for or navigating to an item you’re interested in.

• Learning about the item on the product page, then adding it to your cart.

• Removing an item from your cart.

• Creating an account.

• Checkout

Page 5 of 43

fi
ff
fi
fl


 EXECUTIVE SUMMARY
Results Summary
All three methods produced evidence of accessibility issues, both locally and globally and
within the code itself, as well as the more subjective user experience.

➡ 9 WCAG 2.1 CHECKPOINT FAILURES

Found Through the Automated Code Inspection

➡ 4 WCAG 2.1 CHECKPOINT FAILURES

Found Through the Manual Code Inspection

➡ 8 ACCESSIBILITY PROBLEMS
Found Through the Experience Walkthroughs

MAJOR ISSUES INCLUDE, BUT ARE NOT LIMITED TO:

๏ Missing alternative text for nearly every image

๏ Contrast issues making certain text unreadable for users with low-vision

๏ Keyboard-only functionality not matching that of a mouse + keyboard

๏ Sequence of programmed information, including missing and skipped headings

๏ Redundant Text Links

๏ Empty links

Summary Recommendations
This audit serves as a jumping o point, and as clear justi cation for the continuation of
accessibility implementation. It is additionally recommended to use a program or service to
monitor accessibility issues frequently. As websites and guidelines alike are updated, it is
essential to stay on top of changes. In the table below (Appendix A) are some
recommendations for programs and services (both paid and free) which o er di erent levels
of accessibility auditing, monitoring and reporting.


Page 6 of 43

ff

fi
ff
ff


 BACKGROUND – DISABILITIES
What is a Disability?

dis·a·bil·i·ty
/ˌdisəˈbilədē/
noun
1. A physical or mental condition that limits a person's movements, senses, or activities.
(DISABILITY English De nition and Meaning | Lexico.Com, 2022)

Above is a de nition of “disability” from a quick google search. While in a clinical sense, this
de nition is technically correct, lacks the nuance of a greater sociological understanding.
The de nition below, from the Microsoft Inclusive Design Toolkit, more accurately accounts
for the lived experiences of people with disabilities. Here is another de nition, and the one
used to inform this project:

“Disability doesn’t have to mean a personal health condition; disabilities

are mismatched human interactions…Disability happens at the points of
interaction between a person and society. Physical, cognitive, and social
exclusion is the result of mismatched interactions.” (2016)

Types of Disabilities
Disabilities can be permanent or temporary and can be visible or invisible. The more we
learn about disabilities, the more our de nitions broaden, making it di cult to de nitively
classify them all. The independent news source, Disabled-World.com, o ers this
explanation:

“Classi cations of disability also recognize the role of physical and social
environmental factors in a ecting disability outcomes. Disabilities can
impact people in di erent ways, even when one person has the same type
of disability as another person. Some disabilities may be hidden, known as
invisible disability. There are many types of disabilities… (2022)

Disability can be broken down into a number of broad sub-categories, which

include the following 8 main types of disability (2022):

• Mobility/Physical
• Hearing

• Spinal Cord (SCI)

• Cognitive/Learning

• Head Injuries (TBI)

• Psychological

• Vision • Invisible

Page 7 of 43

fi
fi
fi
fi
ff
fi
ff
fi

ffi
fi
ff

fi


 Prevalence of Disabilities
According to the CDC, in the United States alone, it is estimated that:

• 24.8% of the population over the age of 18 has a disability (2020)

• This amounts to over 64 million people (2020)

What is Accessibility?
Below is the de nition of Accessibility used by the U.S. Department of Education:
“Accessible means a person with a disability is a orded the opportunity to
acquire the same information, engage in the same interactions, and enjoy
the same services as a person without a disability in an equally e ective
and equally integrated manner, with substantially equivalent ease of use.
The person with a disability must be able to obtain the information as fully,
equally and independently as a person without a disability” (Staat, 2013).


Page 8 of 43

fi

ff

ff


 BACKGROUND – WCAG 2.1 BACKGROUND AND
PRINCIPLES

The Web Content Accessibility Guidelines 2.1

While the idea of accessibility in digital content has become mainstream, its proper
implementation is less common. In many cases, websites are inaccessible without the
knowledge of their creators. The Web Content Accessibility Guidelines (WCAG) 2.1
provide guidance for evaluating how a website serves all of its users, including users with
disabilities.

“The Web Content Accessibility Guidelines (WCAG) 2.1 de nes how to

make Web content more accessible to people with disabilities.
Accessibility involves a wide range of disabilities, including visual, auditory,
physical, speech, cognitive, language, learning, and neurological
disabilities.” (WCAG 2.1 at a Glance, 2022)

At rst glance, the WCAG can be overwhelming to most readers not heavily versed in both
accessibility and web design. Though the entire document covers essential information,
there are four principles that ground it. These four principles o er a much more digestible
framework to understand the WCAG:

Perceivable: Information and user interface components must be presentable to users in

ways they can perceive.

‣ Provide text alternatives for non-text content.

‣ Provide captions and other alternatives for multimedia.

‣ Create content that can be presented in di erent ways, including by assistive

technologies, without losing meaning.

‣ Make it easier for users to see and hear content.

Operable: User interface components and navigation must be operable.

‣ Make all functionality available from a keyboard.

‣ Give users enough time to read and use content.

‣ Do not use content that causes seizures or physical reactions.

‣ Help users navigate and nd content.

‣ Make it easier to use inputs other than keyboard.

Page 9 of 43

fi

fi
ff
fi
ff


 Understandable: Information and the operation of user interface must be understandable.

‣ Make text readable and understandable.

‣ Make content appear and operate in predictable ways.

‣ Help users avoid and correct mistakes.

Robust: Content must be robust enough that it can be interpreted by a wide variety of user
agents, including assistive technologies.

‣ Maximize compatibility with current and future user tools.

(WCAG 2.1 at a Glance, 2022)

While the above principles inform the WCAG, there are speci c tiers organized within each
principle to which content much conform. These tiers are categorized into three levels: A,
AA, and AAA, with each subsequent tier necessitating more stringent requirements. A more
in-depth exposition of these tiers are described below:

“WCAG 2.1 guidelines are categorized into three di erent conformance levels (Level A,
Level AA, and Level AAA) based on the impact they have on design or visual presentation of
the pages in order to meet the needs of di erent individuals and di erent situations.
Conformance levels must be met in full and conformance at higher levels indicates
conformance at lower levels:

• Level A — The lowest and easiest level of conformance to obtain. Level A sets a
minimum level of accessibility and does not achieve broad accessibility for many
situations.

• Level AA — The mid-range and most common level of conformance to obtain. Level
AA is the recommended conformance for all web-based information.

• Level AAA — The highest and hardest level of conformance to obtain. It’s not
recommended to strive for full AAA compliance as it is not possible to satisfy all Level
AAA Success Criteria for some content.”

(The C2 Group & Genevieve Nelson, 2018)

Page 10 of 43

ff
ff
fi
ff


 AUDIT METHOD

1. Automated code inspection: Using the SortSite, the website’s code was scraped and
the program delivered a report for each page detailing respective failures according to
WCAG 2.1 guidelines. This report will be used in the table within the Results -
Inspection and WCAG 2.1 Checkpoints section below.

2. Manual code inspection: Each page was inspected manually by testers to assess
accessibility issues that SortSite may have missed or cannot gauge such as the quality
of ALT tags and eld labels, or the order of items selected through keyboard navigation.
These ndings are detailed in the table within the Results - Inspection and WCAG 2.1
Checkpoints section below.

3. Experience walkthrough (2x): During the experience walkthroughs, the following e-

commerce work ows will be tested:

• Browsing the main page.

• Searching for or navigating to an item you’re interested in.

• Learning about the item on the product page, then adding it to your cart.

• Removing an item from your cart.

• Creating an account.

• Checkout

A. Walkthrough 1 - Low vision/blindness: The tester assumes the role of a person

with low vision and uses the browser and/or operating system’s magni cation/zoom
capabilities

B. Walkthrough 2 - Mobility: The tester assumes the role of a person who cannot use
a mouse or trackpad, and uses only a keyboard to navigate all three pages.

Page 11 of 43

fi
fl
fi

fi


 RESULTS – INSPECTION
SUMMARY RESULTS
AUTOMATED & MANUAL CODE INSPECTION

All three pages tested (Home Page, Search Results Page, and Product Page) failed the
majority of checkpoints. These failures were discovered through both the manual and
automated code inspection.

Major issues include, but are not limited to:

๏ Missing alternative text for nearly every image

๏ Contrast issues making certain text unreadable for users with low-vision

๏ Keyboard-only functionality not matching that of a mouse + keyboard

๏ Sequence of programmed information, including missing and skipped headings

๏ Redundant Text Links

๏ Empty links

The full results of the manual and automated code inspection are available in detail in the
table below.

Page 12 of 43

 RESULTS – WCAG 2.1 CHECKPOINTS
PRINCIPLE 1 - PERCEIVABLE
Information and user interface components must be presentable to users in ways they can
perceive.

Guideline 1.1 – Text Alternatives


Provide text alternatives for any non-text content so that it can be changed into other forms
people need, such as large print, braille, speech, symbols or simpler language.
Checkp Lev Pass /
oint Description Page el Fail Elaboration And Techniques For Achieving Conformance

1.1.1
Non-text Content - Home A Fail
AUTOMATED INSPECTION

Provide text alternatives Page

for any non-text content G196: Using a text alternative on one item within a group of images
Failure so that it can be changed Search that describes all items in the group
1 into other forms people Page

Section 508 (2017) A 1.1.1

need, such as large print,

braille, speech, symbols Product ➡ Problem: Using the same alt text on adjacent images results in
or simpler language. Page
screen readers stuttering as the same text is read out twice.

➡ Solution: Use alt='' for the subsequent adjacent images, or

change the redundant alt text.

Location in Code:

Home Page: line 2793

Search Page: line 2788

Product Page: line 3715

See Fig.s 1 & 2 in Appendix B

1.1.1
Non-text Content - Home A Fail
MANUAL INSPECTION

Provide text alternatives Page

for any non-text content F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to
Failure so that it can be changed Search represent text without providing a text alternative
2 into other forms people Page

➡ Problem: Images do not provide descriptive alternate text (ALT text)

need, such as large print,

braille, speech, symbols Product ➡ Solution: Use accurate image descriptions in alt text elds

or simpler language. Page

Location (Found During Manual Inspection)

Home Page: All images missing Alt Text

Search Page: All images missing Alt Text

Product Page: All images missing Alt Text

See Fig.s 1 & 2 in Appendix B

Page 13 of 43

fi

 Guideline 1.2 – Time-based Media

Provide alternatives for time-based media.

Checkpoi Pass / Elaboration And Techniques For Achieving
nt Description Page Level Fail Conformance

n/a Checkpoints under this guideline N/A -- N/A N/A - No time based media
were not tested – no time-based
media present.

Guideline 1.3 Adaptable

Create content that can be presented in di erent ways (for example simpler layout) without
Checkpoi Pass / Elaboration And Techniques For Achieving
nt Description Page Level Fail Conformance

1.3.1 Info and Relationships - Home A Fail AUTOMATED INSPECTION

Information, structure, and Page

relationships conveyed through F87: Failure of Success Criterion 1.3.1 due to inserting
presentation can be non-decorative content by using :before and :after
programmatically determined or Search pseudo-elements and the 'content' property in CSS
are available in text. Page

Section 508 (2017) A F87

➡ Problem: Content inserted with CSS is not available

Product to people who turn o style sheets, and is not read by
Page some screen readers.

content: 'XS,S,M,L,XL'
➡ Solution: Move the content from CSS to the HTML
page so that all users can see it.

✓ For more information see Su cient Techniques 1.3.1

Location in Code:
Home Page: line 3

Search Page: line 3

Product Page: line 3

See Fig 2 in Appendix B

Page 14 of 43

ff
ffi

ff


 1.3.2 Meaningful Sequence - When Home A Fail MANUAL INSPECTION

the sequence in which content is Page

presented a ects its meaning, a F49: Failure of Success Criterion 1.3.2 due to using an
correct reading sequence can HTML layout table that does not make sense when
be programmatically Search linearized

determined. Page

➡ Problem: When using keyboard controls, the labels in

the global navigation do not read in the expected
order (right-to-left)

Product
Page ➡ Solution: Use code to match tabbing order to visual
order (See C27: Making the DOM order match the
visual order for more info.

✓ For more information see Su cient Techniques 1.3.2

Location (Found During Manual Inspection)

Home Page: Global Navigation

Search Page: Global Navigation

Product Page: Global Navigation

See Experience Walkthrough 2

1.3.3 Sensory Characteristics - Home
Instructions provided for Page
items that otherwise rely only on sensory information to
understanding and operating
content do not rely solely on
A Pass Pass - Site successfully provides textual identi cation of
be understood (See Su cient Techniques G96 for more
information)

sensory characteristics of Search

components such as shape, Page

size, visual location, orientation,

or sound.
Product
Page

1.3.4 Orientation - Content does not Home AA Pass Pass - Content is responsive to orientation changes
restrict its view and operation to Page

a single display orientation, such

as portrait or landscape, unless
a speci c display orientation is Search
essential. Page

Product
Page

1.3.5 Identify Input Purpose - The Home AA Pass Pass - Site successfully identi es input purposes

purpose of each input eld Page

collecting information about the

user can be programmatically
determined when:
Search
Page

• The input eld serves a

purpose identi ed in the
Input Purposes for User
Product
Interface Components
Page
section; and

• The content is implemented

using technologies with
support for identifying the
expected meaning for form
input data.

Page 15 of 43

fi
fi
ff
fi
fi
ffi
ffi
fi
fi


 Guideline 1.4 – Distinguishable

Make it easier for users to see and hear content including separating foreground from 

background.
Checkpoi Pass / Elaboration And Techniques For Achieving
nt Description Page Level Fail Conformance

1.4.1 Color is not used as the only Home A Fail MANUAL INSPECTION

visual means of conveying Page

information, indicating an action, F73: Failure of Success Criterion 1.4.1 due to creating
prompting a response, or links that are not visually evident without color vision

distinguishing a visual element. Search

➡ Problem: “Contact Page” link in footer is a low
Page

contrast orange against white, with no other

indicators (i.e. underline or bolded text) that it is a
link

Product
Page ➡ Solution:
๏ Fix color contrast (See G14: Ensuring that
information conveyed by color di erences is also
available in text), and

๏ Use standard link indicators - Link underlines or

some other non-color visual distinction are
required (See G111: Using color and pattern)

✓ For more information see Su cient Techniques

1.4.1

Location (Found During Manual Inspection)

Home Page: Contact Page link in footer

Search Page: Contact Page link in footer

Product Page: Contact Page link in footer

See Fig. 4 in Appendix B

1.4.2 If any audio on a Web page plays N/A A N/A Pass - Checkpoints under this guideline were not
automatically for more than 3 tested – no audio media present.
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.

Page 16 of 43

ffi
ff


 Checkpoi Pass / Elaboration And Techniques For Achieving
nt Description Page Level Fail Conformance

1.4.3 The visual presentation of text Home AA Fail AUTOMATED INSPECTION

and images of text has a contrast Page

ratio of at least 4.5:1, except for F83: Failure of Success Criterion 1.4.3 and 1.4.6 due
the following:
to using background images that do not provide
Search sufficient contrast with foreground text (or images of
Page
text)
Large Text
Section 508 (2017) AA 1.4.3

Large-scale text and images of

Product
large-scale text have a contrast ➡ Problem: Some users nd it hard to read light gray
Page
ratio of at least 3:1;
text on a white background, dark gray text on a
black background and white text on a red
background.

Incidental
➡ Solution: Ensure that text and background colors
Text or images of text that are have enough contrast
part of an inactive user interface
component, that are pure ๏ The contrast ratio should be 3.0 or more for 18
point text, or larger

decoration, that are not visible to

anyone, or that are part of a ๏ The contrast ratio should be 3.0 or more for 14
picture that contains signi cant point bold text, or larger

other visual content, have no ๏ The contrast ratio should be 4.5 or more for all
contrast requirement.
other text

✓ For more information see Su cient Techniques

Logotypes 1.4.3

Text that is part of a logo or brand

Location in Code
name has no contrast
requirement. Home Page: line 3219 3249 3264 3327 3531 ...

Search Page: lines 2978 2979 2980 2981 3531 ...

Product Page: 2978 2979 2980 2981 3531

Color Contrast Detail

Home Page:
The text color to background color contrast ratio after
composition is NOT 4.5:1

• Ex. Line 1079: Shows white text against an image that

contains too much white in background with a contrast
ratio of 1.31:1

Product Search Page:

The text color to background color contrast ratio after
composition is NOT 4.5:1

• Ex. Line 1456: “Contact Page” link in footer is orange

against white with a contrast ratio of 3.53:1

Product Page:
The text color to background color contrast ratio after
composition is NOT 4.5:1

• Ex. Line 1041: Breadcrumb links are light grey against white
with a contrast ratio of 2.84:1

NOTE: The automated code inspection produced some false

positives due to the text being displayed on images not
recognized by the inspection program. The program
compared the text to the background (white) behind the
images and CSS styles, however the user would not see that
text against the true, white background when viewing the
page. If CSS style sheets are removed, text is automatically
converted to black against the white background.

See Figs. 3-5 in Appendix B

Page 17 of 43

fi
fi
ffi


 Checkpoi Pass / Elaboration And Techniques For Achieving
nt Description Page Level Fail Conformance

1.4.4 Except for captions and images Home A Pass Pass - Text is responsive and can be resized
of text, text can be resized Page
without assistive technology up to 200 percent
without assistive technology up without loss of content or functionality.
to 200 percent without loss of
content or functionality. Search
Page

Product
Page

1.4.5 If the technologies being used N/A A N/A N/A - No Images of text present

can achieve the visual

presentation, text is used to
convey information rather than
images of text except for the
following:

Customizable

The image of text can be visually

customized to the user's
requirements;

Essential

A particular presentation of text is

essential to the information being
conveyed.

Page 18 of 43



 PRINCIPLE 2 - OPERABLE
User interface components and navigation must be operable.

Guideline 2.1 – Keyboard Accessible

Make all functionality available from a keyboard.

Checkp Le Pass /
oint Description Page vel Fail Elaboration And Techniques For Achieving Conformance

2.1.1 Keyboard - All functionality Product A Fail MANUAL INSPECTION

of the content is operable Page

through a keyboard F54: Failure of Success Criterion 2.1.1 due to using only pointing-
interface without requiring device-speci c event handlers (including gesture) for a function

speci c timings for

Success Criterion: 2.1.1 Keyboard & 2.1.2 No Keyboard Trap

individual keystrokes,
except where the ➡ Problem: When using text cursor navigation, cursor does not
underlying function select certain elements

requires input that

➡ Solution: SCR20 Using both keyboard and other device-speci c
depends on the path of
functions

the user's movement and

not just the endpoints. ✓ For more information see Su cient Techniques 2.1.1

Location (Found During Manual Inspection)

Product Page: Quantity box and “Add to Cart” button

See Fig. 6 in Appendix B

Page 19 of 43

fi
fi
ffi
fi

 2.1.2 No Keyboard Trap - If Search A Fail MANUAL INSPECTION

keyboard focus can be Page

moved to a component of F10: Failure of Success Criterion 2.1.2 and Conformance Requirement
Product
the page using a keyboard 5 due to combining multiple content formats in a way that traps users
Page

interface, then focus can inside one format type

be moved away from that

Success Criterion: 2.1.1 Keyboard & 2.1.2 No Keyboard Trap

component using only a

keyboard interface, and, if ➡ Problem- When using text cursor navigation:

it requires more than

๏ user can enter the content (Filters) using the keyboard, but
unmodi ed arrow or tab
cannot exit the content using the keyboard (Search Page)

keys or other standard exit

methods, the user is ๏ cursor does not select certain elements (Product Page)

advised of the method for

➡ Solution- Use one of the following mechanisms: 

moving focus away.

๏ Ensuring that the keyboard function for advancing focus within
content (commonly the tab key) exits the subset of the content
after it reaches the nal navigation location.

๏ Providing a keyboard function to move the focus out of the

subset of the content. Be sure to document the feature in an
accessible manner within the subset.

๏ If the technology used in the subset of the content natively

provides a "move to parent" keyboard command, documenting
that command before the user enters the plug-in so they know
how to get out again.

✓ For more information see Su cient Techniques 2.1.2

Location (Found During Manual Inspection)

Search Page: “Sort By:” and “Tags:” lter options

Product Page: Quantity box and “Add to Cart” button

See Fig. 7 in Appendix B

2.1.4 Character Key Shortcuts - Home A Pass Pass - No issues with Character Key Shortcuts
If a keyboard shortcut is Page

implemented in content
using only letter (including
upper- and lower-case Product
letters), punctuation, Search
number, or symbol Page

characters, then at least

one of the following is true:

Product
• Turn o : A mechanism
Page
is available to turn the
shortcut o ;

• Remap: A mechanism
is available to remap
the shortcut to use one
or more non-printable
keyboard characters
(e.g. Ctrl, Alt, etc);

• Active only on focus:

The keyboard shortcut
for a user interface

Page 20 of 43

ff
fi
ff
fi
ffi
fi


 Guideline 2.2 – Enough Time

Provide users enough time to read and use content.

Checkp Lev Pass /

oint Description Page el Fail Elaboration And Techniques For Achieving Conformance

N/A Checkpoints under this N/A A N/A N/A - No time based content
guideline were not tested –
no time-based media
present.

Guideline 2.3 – Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

Checkp Lev Pass /

oint Description Page el Fail Elaboration And Techniques For Achieving Conformance

2.3.1 Web pages do not contain N/A A N/A N/A - This checkpoint was not tested – no ashes present.
anything that flashes more
than three times in any
one second period, or the
flash is below the general
flash and red flash
thresholds.

Guideline 2.4 – Navigable

Provide ways to help users navigate, nd content, and determine where they are.

Checkp Lev Pass /

oint Description Page el Fail Elaboration And Techniques For Achieving Conformance

2.4.1 Bypass Blocks - A Home A Pass While the page technically passes this checkpoint, it is recommended
mechanism is available to Page
to address 2.4.6 (Headings and Labels) because many users of
bypass blocks of content assistive technology utilize headings and labels elements to navigate.

that are repeated on

A proper heading structure and/or identi cation of page regions/
multiple Web pages. Search
landmarks may be considered a su cient technique. -https://
Page

webaim.org/standards/wcag/checklist#sc2.4.1

Product
Page

Page 21 of 43

ffi
fi
fl
fi


 2.4.2 Page Titled - Web pages Home A Pass Pass - Web pages have descriptive and informative page titles.
have titles that describe Page

topic or purpose.

Search
Page

Product
Page

2.4.3 Focus Order - If a Web Home A Fail MANUAL INSPECTION

page can be navigated Page

sequentially and the F44: Failure of Success Criterion 2.4.3 due to using tabindex to create
navigation sequences a tab order that does not preserve meaning and operability

a ect meaning or Search

➡ Problem: When using Mouse Keys (Mac OS), Tabs do not follow
operation, focusable Page

expected order (i.e. top left to bottom right)

components receive focus

in an order that preserves ➡ Solution: Su cient Techniques include:

meaning and operability. Product

• G59: Placing the interactive elements in an order that
Page
follows sequences and relationships within the content

• Giving focus to elements in an order that follows sequences

and relationships within the content using the following
technique:

‣ C27: Making the DOM order match the visual

order

• Changing a Web page dynamically using the following

techniques:

‣ SCR27: Reordering page sections using the

Document Object Model

✓ For more information see Su cient Techniques 2.4.4

Location (Found During Manual Inspection)

All Pages: Global Navigation

See Experience Walkthrough 2

Page 22 of 43

ff
ffi
ffi


 2.4.4
Link Purpose (In Context) - Home A Fail AUTOMATED INSPECTION

The purpose of each link Page

can be determined from F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not
Failure the link text alone or from providing an accessible name for an image which is the only content in
1 the link text together with Search a link

its programmatically Page

Section 508 (2017) A F89

determined link context,

except where the purpose ➡ Problem: Each a element must contain text or an img with an alt
of the link would be Product attribute.

ambiguous to users in Page

general. ➡ Solution:
• Add text between the a element start and end tags

• Add an aria-label attribute

• Add an aria-labelled by attribute

• Add an img alt attribute if the link contains an img element

✓ For more information see Su cient Techniques 2.4.4

Location in Code:
Home Page: line 2803 2809 2815 3038 3048 …

Search Page: line 2994 3012

Product Page: line 3724 3730 3736 4195 4217 ...

See Fig. 8 in Appendix B

2.4.4
Link Purpose (In Context) - Home A Fail AUTOMATED INSPECTION

The purpose of each link Page

Failure can be determined from F63: Failure of Success Criterion 2.4.4 due to providing link context
2 the link text alone or from only in content that is not related to the link
the link text together with
Section 508 (2017) A F63

its programmatically
determined link context, ➡ Problem: Link uses general text like 'Click Here' with no
except where the purpose surrounding text explaining link purpose.

of the link would be

Link text: Read more Read more Read more

ambiguous to users in
general. ➡ Solution: Screen reader users use text around links to help
understand what the link does. If the link text is very general, and
there's no surrounding text, there's no way to work out what the link
does. Either:

• use a descriptive link label (which helps all users), or

• add an aria-label or aria-describedby to the link (which

helps screen reader users)

✓ For more information see Su cient Techniques 2.4.4

Location in Code:
Home Page: line 3249 3264 3279

See Fig. 5 in Appendix B

Page 23 of 43

ffi
ffi


 2.4.4
Link Purpose (In Context) - Home A Fail MANUAL INSPECTION

The purpose of each link Page

Failure can be determined from Redundant link - Adjacent links go to the same URL
3 the link text alone or from
➡ Problem: When adjacent links go to the same location (such as a
the link text together with Search
linked product image and an adjacent linked product name that go
its programmatically Page

to the same product page) this results in additional navigation and

determined link context,
repetition for keyboard and screen reader users.

except where the purpose

of the link would be Product ➡ Solution: G91: Providing link text that describes the purpose of a
ambiguous to users in Page link

general.
✓ For more information see Su cient Techniques 2.4.4

Location (Found During Manual Inspection)

Home Page: 17 Redundant links
Search Page: 11 Redundant links
Product Page: 8 Redundant links
See Experience Walkthrough 1

2.4.5 Multiple ways - More than Home AA Pass Pass - Multiple ways to locate a web page exist.
one way is available to Page

locate a Web page within

a set of Web pages except
where the Web Page is the Search
result of, or a step in, a Page

process.

Product
Page

Page 24 of 43

ffi


 2.4.6 Headings and Labels - Home AA Fail MANUAL INSPECTION

Headings and Labels Page

A heading contains no content.

➡ Problem(s):

Search
• Empty heading labels - Keyboard and screen readers will read
Page

this heading (with no information) and user may become

confused.

Product • Skipped heading levels - Assistive technology users may

Page become or experience di culty navigating when heading levels
are skipped.

➡ Solution:
• Remove empty heading, or

• At text to describe heading (if element is necessary)

✓ For more information, see su cient techniques for 2.4.6

Locations (Found During Manual Inspection)

Empty Heading Label
• All Pages: Hidden in the footer on all pages

Skipped heading levels

‣ Home Page: line 1143

<h4…>No.54 | 'Natural Oak' Minimalist Leather Wallet</a></h4>

‣ Search Page: line 1048

<h4…>No.54 | 'Natural Oak' Minimalist Leather Wallet</a></h4>

‣ Product Page: line unable to locate line # 


below is code snippet:
<a href="/products/no-52-chestnut-vertical-leather-wallet?
pr_prod_strat=copurchase&amp;pr_rec_id=4cb288a64&amp;pr_rec_pid=1977487
130694&amp;pr_ref_pid=10212127630&amp;pr_seq=uniform">No.52 | 'Chestnut'
Vertical Leather Wallet</a>

See Experience Walkthrough 1

2.4.7 Focus Visible - Any Home AA Pass Pass - Keyboard indicator is visible.
keyboard operable user Page

interface has a mode of

operation where the
keyboard focus indicator Search
is visible. Page

Product
Page

Guideline 2.5 – Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.
Pass / Elaboration And Techniques For
Checkpoint Description Page Level Fail Achieving Conformance

Page 25 of 43

ffi
ffi

 2.5.1 Pointer Gestures N/A A N/A N/A - No path-based gestures.
All functionality that uses multipoint or
path-based gestures for operation can be
operated with a single pointer without a
path-based gesture, unless a multipoint
or path-based gesture is essential.

2.5.2 Pointer Cancellation Home A Pass Pass- Pointer cancellations are

Page
triggered on the Up-Event activation or
For functionality that can be operated
completion.

using a single pointer, at least one of the

following is true:

Search
No Down-Event Page

The down-event of the pointer is not used

to execute any part of the function;

Product
Abort or Undo
Page
Completion of the function is on the up-
event, and a mechanism is available to
abort the function before completion or to
undo the function after completion;

Up Reversal
The up-event reverses any outcome of
the preceding down-event;

Essential
Completing the function on the down-
event is essential.

2.5.3 Label In Name Home A Pass Pass - Most controls are accompanied
Page
by a visible text label. Those same
For user interface components with labels
controls have a programmatic name,
that include text or images of text, the
also known as the Accessible Name.
name contains the text that is presented
Search Components without a visible text label
visually.
Page
still contain programmatic names (i.e.
Account, Search, and Cart Icons).

Product
Page

2.5.4 Motion Actuation

N/A A N/A N/A - No motion activated content
Functionality that can be operated by present.
device motion or user motion can also be
operated by user interface components
and responding to the motion can be
disabled to prevent accidental actuation,
except when:

Supported Interface

The motion is used to operate

functionality through an accessibility
supported interface;

Essential

The motion is essential for the function

and doing so would invalidate the activity.

Page 26 of 43



 PRINCIPLE 3 - UNDERSTANDABLE
Information and the operation of user interface must be understandable.

Guideline 3.1 – Readable

Make text content readable and understandable.

Checkpo Pass /
int Description Page Level Fail Elaboration And Techniques For Achieving Conformance

3.1.1 Language of Page - The Home Page

A Pass Pass - The default human language of each Web page can be
default human language programmatically determined.
of each Web page can
be programmatically Search Page

determined.

Product
Page

3.1.2 Language of Parts - The Home Page

AA Pass Pass - Screen reader is able to read all all labels and header
human language of each and, body text.
passage or phrase in the
content can be Search Page

programmatically
determined except for
proper names, technical Product
terms, words of Page
indeterminate language,
and words or phrases
that have become part of
the vernacular of the
immediately surrounding
text.

Guideline 3.2 – Predictable

Make Web pages appear and operate in predictable ways.

Checkp Lev Pass /

oint Description Page el Fail Elaboration And Techniques For Achieving Conformance

3.2.1 On Focus - When any Home A Pass Pass - Focus doesn’t initiate change of context
component receives Page

focus, it does not initiate

a change of context.
Search
Page

Product
Page

3.2.2 On Output - Changing Home A Pass Pass - User interface setting changes does not change context
the setting of any user Page

interface
component does not
automatically cause Search
a change of Page

context unless the user

has been advised of the
behavior before using the Product
component. Page

Page 27 of 43

 3.2.3 Consistent Navigation - Home AA Pass Pass - Navigation is consistent on all pages
Navigational Page

mechanisms that are

repeated on
multiple Web Search
pages within a set of Page

Web pages occur in
the same relative
order each time they are Product
repeated, unless a Page
change is initiated by the
user.

3.2.4 Consistent Identification Home AA Pass Pass - components are consistent

- Components that have Page

the same
functionality within a set
of Web pages are Search
identified consistently. Page

Product
Page

Guideline 3.3 – Input Assistance

Help users avoid and correct mistakes.

Checkp Lev Pass /

oint Description Page el Fail Elaboration And Techniques For Achieving Conformance

3.3.1 Error Identi cation - If an N/A A N/A N/A - No errors found to test Error Identi cation
input error is automatically
detected, the item that is
in error is identi ed and
the error is described to
the user in text.

3.3.2 Labels or Instructions - Home A Pass Pass - Inputs are labeled (i.e. “Quantity” for quantity box”
Labels or instructions are Page

provided when content

requires user input.

Search
Page

Product
Page

3.3.3 Error Suggestion - If an N/A AA N/A N/A - No errors found to test Error Suggestion
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.

Page 28 of 43

fi
fi
fi


 3.3.4 Error Prevention (Legal, N/A AA N/A Pages tested did not cover legal or nancial data, however the
Financial, Data) - For Web checkout page does meet this criteria.
pages that cause legal
commitments or nancial
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:

• Reversible:
Submissions are
reversible.

• Checked: Data
entered by the user is
checked for input
errors and the user is
provided an
opportunity to correct
them.

• Con rmed: A
mechanism is
available for reviewing,
con rming, and
correcting information
before nalizing the
submission.

Page 29 of 43

fi
fi
fi
fi
fi


 PRINCIPLE 4 - ROBUST
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents,
including assistive technologies.
Guideline 4.1 – Compatible
Maximize compatibility with current and future user agents, including assistive
technologies.
Checkp
oint Description
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.
4.1.2
Name, Role, Value - For Home A Fail
all user interface
Failure components (including but
1 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 noti cation of changes
to these items is available
to user agents,
including assistive
technologies.
fi
ffi
ffi


Le Pass
Page vel / Fail Elaboration And Techniques For Achieving Conformance
Home A Fail AUTOMATED INSPECTION
Page
F77: Failure of Success Criterion 4.1.1 due to duplicate values of
type ID
Search
Section 508 (2017) A 4.1.1 HTML5
Page
➡ Problem: Duplicate id - the same ID is used on more than one
element.
Product
Page id=pi-paint0_linear id=pi-paint0_linear id=pi-
paint1_linear id=pi-paint1_linear
➡ Solution: Ensure that all values of type ID are unique in the Web
page
✓ More information can be found in Su cient Techniques for
Success Criterion 4.1.2
Location in Code:
Home Page: line 1516 1516 1517 1517
Search Page: line 1508 1508 1509 1509
Product Page: line 1320 1320 1321 1321
AUTOMATED INSPECTION
Page
F68: Failure of Success Criterion 4.1.2 due to a user interface control
not having a programmatically determined name
Search
Section 508 (2017) A 4.1.2
Page
➡ Problem: This button element is empty and has no accessible
name.
Product
Page ➡ Solution:
• Add text between the button start and end tags
• Add a title attribute
• Add an aria-labelled by attribute
• Add an img alt attribute if the button contains an img element
✓ More information can be found in Su cient Techniques for
Success Criterion 4.1.2
Location in Code:
Home Page: line 3338
Search Page: line 3338
Product Page: line 4338
Page 30 of 43
 4.1.2
Name, Role, Value - For Search A Fail AUTOMATED INSPECTION

all user interface Page

Failure components (including but F68: Failure of Success Criterion 4.1.2 due to a user interface control
2 not limited to: form not having a programmatically determined name
elements, links and
Section 508 (2017) A 4.1.2

components generated by
scripts), ➡ Problem: HTML form control has no accessible name.

the name and role can
➡ Solution:
be programmatically
• Use a label element with the for attribute set to the ID of the
determined; states,
form control

properties, and values that

• Wrap a label element around the form control

can be set by the user can

• Add a title attribute

be programmatically set;
• Add an aria-label attribute

and noti cation of changes

• Add an aria-labelledby attribute

to these items is available

to user agents, ✓ More information can be found in Su cient Techniques for
including assistive Success Criterion 4.1.2
technologies.
Location in Code:
Search Page: line 2994 3012

4.1.2
Name, Role, Value - For Home A Fail AUTOMATED INSPECTION

all user interface Page

Failure components (including but F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not
3 not limited to: form providing an accessible name for an image which is the only content
elements, links and Search in a link

components generated by Page

Section 508 (2017) A F89

scripts),
the name and role can ➡ Problem: Each a element must contain text or an img with an alt
be programmatically Product attribute.

determined; states, Page

properties, and values that ➡ Solution:
can be set by the user can • Add text between the a element start and end tags

be programmatically set;
and noti cation of changes • Add an aria-label attribute

to these items is available • Add an aria-labelled by attribute

to user agents,
including assistive • Add an img alt attribute if the link contains an img element

technologies.
✓ More information can be found in Su cient Techniques for
Success Criterion 4.1.2 Location in Code:

Home Page: line 2803 2809 2815 3038 3048 …

Search Page: line 2994 3012

Product Page: line 3724 3730 3736 4195 4217 …

See Fig. 8 in Appendix B

4.1.3 Status Messages - In Home AA Pass No status messages encountered, however, ARIA roles are de ned in
content implemented using Page
code.

markup languages, status
✓ More information can be found in Su cient Techniques for
messages can
Success Criterion 4.1.3
be programmatically Search
determined through role or Page
Note: Other techniques may also be su cient if they meet the
properties such that they success criterion. See Understanding Techniques.

can be presented to the

user by assistive Product
technologies without Page

receiving focus.

Page 31 of 43

fi
fi
ffi
ffi
ffi
ffi
fi


 EXPERIENCE WALKTHROUGH – SUMMARY RESULTS
User Experience Walkthrough
ASSISTIVE TECHNOLOGIES

After attempting to use Stock and Barrel Co. website with a screen reader (MacOS
VoiceOver) and via keyboard navigation (using both MacOS’ native navigation accessibility
features and Google Chromes “Cursor Navigation” feature), it has been determined that
users employing screen reader technology or use alternate devices to the traditional
pointing devices (e.g. a mouse or trackpad) are not able to experience the website in an
equal manner to non-assistive technology users. That is, many necessary accessibility
checkpoints have not been followed, and therefore create a strenuous and frustrating
experience for users with disabilities.

Severe issues were encountered during the experience portion of the accessibility audit that
may lead to potential customers abandoning the website due to accessibility barriers. The
critical and severe issues are summarized in the table below and elaborated on in
subsequent pages.

Accessibility
Issue Severity Location & Description Why This Happened
Vision: Critical - All Pages: Creators/Editors of the site either did not enter
Images Missing Visitor The only alternate text present is for the logo alternative text, or purposely used
Alternative Text
cannot in the topmast portion of the page. All other placeholders.
continue
images contain empty alternate text fields.

The screenreader either skipped over images,

or read the url for images, creating a very
unpleasant experience for the user.

Vision: Critical - All Pages: Similar to alternate text (above), buttons must
Buttons Missing Visitor Some buttons are missing alternative text be labeled with text by the coders of the site.
Alternative Text cannot causing screen reader to read out URL. User
continue
cannot continue without context as to what
the button is for.

Mobility: Missing Critical - • Search Results Page: When using text The code is missing an escape hatch for the
functionality when Visitor cursor navigation, cursor becomes stuck in elements that require focus. The coder must
using Keyboard-only cannot the “Sort By” box implement a way for the user to leave an
continue
navigation element once they have entered it. In this case,
it makes it impossible for a user to move
forward.

Vision: Severe All Pages: Similar to alternate text and button labels
Empty links Visitor Some links are missing text, causing screen (above), links must be labeled with text to
may not reader to stutter or read url text. Link text is convey meaning and purpose. This can be
be able to
important to convey function and purpose to done by the coder, or an editor if a CMS is
continue
user. being used.

Page 32 of 43

 Accessibility
Issue Severity Location & Description Why This Happened
Mobility: Missing Severe • Product Page: When using text cursor Certain elements that require focus cannot be
functionality when Visitor navigation (Google Chrome), cursor does activated without the use of a cursor. The
using Keyboard-only may not not select Quantity box and “Add to Cart” coder must implement a way for the user to
be able to
navigation button enter (and leave) the elements.
continue

Vision: Redundant Text Severe Home Page: Similar to alternate text and button labels
Links Visitor Subfeatures on home page include several (above), links must be labeled with text to
may not links to different locations, but are labeled with convey meaning and purpose AND each link
be able to
the same text (“Read More”) causing must have unique text so the user is able to
continue
confusing to screen reader user trying to discern between them. This can be done by
select link.
the coder, or an editor if a CMS is being used.

Vision + Mobility: Minor All Pages • Headings should always be followed

Sequence of Visitor • Several locations throughout: Skipped sequentially. Headings convey information
information may heading levels cause confusion for screen hierarchy and should not be chosen for
encounter
reader users utilizing headings to visual style.

difficulty
but can understand sequence of information

• Global Navigation:
• The programmer sequence of elements on
continue
• Screen reader -labels are not read in the page do not match the visual
the expected order
sequence.
• Keyboard - tabbing does not occur
in the expected order causing
frustration when navigating

• Footer: Empty headings cause confusion

for screen reader users utilizing headings
to understand sequence of information

Vision + Mobility: Minor All Pages: The development team should remove
Redundant and empty Visitor All pages of the site contain slue of empty and redundant or unnecessary elements (likely
elements. may redundant elements that cause the screen leftover from a template utilized for the sight).

encounter
reader to read out redundant text or explain
difficulty
but can unnecessary elements. These elements must Any necessary elements should be clearly and
continue be tabbed through, which causes user fatigue concisely labeled.
and unnecessary cognitive load to parse
through the “junk” to find useful information.

Page 33 of 43

 EXPERIENCE EVALUATION - VISION
What Do Visitors Using Screen Readers Initially Experience?

Video of Walkthrough w/ VoiceOver

Click image to view video online in browser

Page 34 of 43

 EXPERIENCE EVALUATION - MOBILITY
What Do Visitors Using Only a Keyboard Experience?

Video Walkthrough w/ Google Chrome Text Cursor Navigation

Click image to view video in browser

Page 35 of 43




 RESULTS AND RECOMMENDATIONS

The results above clearly show how these accessibility issues severely impact the user
experience for people with disabilities. Ignoring these issues means ignoring the essential
needs of these potential customers.

The good news is that these issues have clear solutions, many of which have been
diligently outlined above in detail. Bringing this audit to the Stock and Barrel Co.
development team to begin implementing these changes within the code of the site is the
rst step, but certainly not the last. While the xes above can guarantee that
stockandbarrelco.com will pass the WCAG 2.1 guidelines, they do not, however guarantee
a substantially improved user experience. To truly understand the experience of users with
disabilities, it is invaluable to run accessibility usability studies with users who have these
disabilities. Although the experience walkthroughs give a snapshot of what that experience
may be like for the user, it is essential to conduct studies with actual users that simulated
studies cannot mimic.

This audit serves as a jumping o point, and as clear justi cation for the continuation of
accessibility implementation. It is additionally recommended to use a program or service to
monitor accessibility issues frequently. As websites and guidelines alike are updated, it is
essential to stay on top of changes. In the table below (Appendix A) are some
recommendations for programs and services (both paid and free) which o er di erent levels
of accessibility auditing, monitoring and reporting. 


Page 36 of 43

fi
ff
fi
fi

ff
ff


 APPENDIX A - RECOMMENDED TOOLS

Name Cost Type Services o ered

WAVE by WebAim Free (Plugin)/Paid (API) Plugin, API Online checker, hosted
service, server installation

SiteImprove Paid Cloud Based Full Suite: accessibility,

browser compatibility,
broken links, legal
compliance, search
optimization, usability and
web standards
compliance, etc.

SortSite (Program used Paid (Free Trial) API Web Crawler: accessibility,
for this audit) browser compatibility,
broken links, legal
compliance, search
optimization, usability and
web standards
compliance

EqualWeb Free (Plugin)/Paid (API) Plugin, API, Automated Audits, Reports, Tools,
Services Training, Monitoring,
Consulting

Google’s Accessibility Open Source Plugin Accessibility tool w/ 17

Developer Tools built-in audit rules +
sidebar pane with
debugging info. 

This table represents a handful of the many tools available to companies small and large,
both paid and free. With such a wide range of available tools and resources, there is no
longer an excuse to ignore accessibility. For more recommended tools, see 30 Best Web
Accessibility Checking Tools for Compliance in 2021.

Page 37 of 43

ff

 APPENDIX B - SCREENSHOTS PT. I
Fig. 1 Product Page



Failure of 1.1.1: Missing Alt Text

Fig. 2 Home Page

Failure of:

1.3.1 CSS styling (Top Left)

1.1.1 Redundant Alt Text (logo) & Missing alt text (picture below nav bar)

Page 38 of 43

 APPENDIX B - SCREENSHOTS PT. II

Fig. 3 Home Page (Subfeature)

Failure of 1.4.3: white text against an image that contains too much white in background
with a contrast ratio of 1.31:1

Fig. 4 Footer Contact Page Link

Criteria Failure

1.4.1 Contact Page needs additional link indicator


1.4.3 Orange against white with a contrast ratio
of 3.53:1

Page 39 of 43





 APPENDIX B - SCREENSHOTS PT. III
Fig 5: All Pages

Failure of 1.4.3: Orange links on white background fall below contrast requirements

Fig. 6 Product Page

Fig. 7 Search Results Page

Failure of 2.1.2: “Sort By:”

and “Tags:” lter
Failure of 2.1.2: Stuck in Quantity Box

Page 40 of 43

fi

 APPENDIX B - SCREENSHOTS PT. IV

FIG. 8 HOME PAGE SUBFEATURES

Failure of 2.4.4: Links lack alternative text

Page 41 of 43





 REFERENCES
Anderson, A.-M. (2019, August 20). Do Ethics Really Matter To Today’s Consumers? Forbes; Forbes.
https://www.forbes.com/sites/theyec/2019/08/20/do-ethics-really-matter-to-todays-consumers/?
sh=6fc398282d0e

CDC. (2020). Disability and Health Data System (DHDS) | NCBDDD | CDC. Centers for Disease Control and
Prevention. https://dhds.cdc.gov/

Disability and Health Data System (DHDS) | NCBDDD | CDC. (2020). Centers for Disease Control and
Prevention. https://dhds.cdc.gov

Ebook Customizable Isometric Illustrations | Amico Style. (n.d.). Storyset | Customize, Animate and
Download Illustration for Free. Retrieved May 25, 2022, from https://storyset.com/illustration/ebook/
amico

How to Meet WCAG (Quickref Reference). (n.d.). World Wide Web Consortium (W3C). Retrieved June 9,
2022, from https://www.w3.org/WAI/WCAG21/quickref/?
showtechniques=121%2C122%2C123%2C124%2C125%2C126%2C127%2C128%2C129%2C131%
2C132%2C133%2C134%2C141%2C142%2C143%2C144%2C145%2C1410%2C1411%2C1412%2
C1413%2C211%2C212%2C214%2C221%2C222%2C231%2C241%2C242%2C243%2C244%2C24
5%2C246%2C247%2C252%2C253%2C254%2C311%2C312%2C321%2C322%2C323%2C324%2
C411%2C412%2C413%2C251#text-alternatives

Martin, J. (2021, January 27). FutureBrand | 2021 positivity: consumers are making more…. FutureBrand.
https://www.futurebrand.com/news/2021/2021-positivity-we-are-making-more-environmentally-
friendly-sustainable-and-ethical-purchases

Mintel Press Team. (2015, November 18). 56% of Americans stop buying from brands they believe are
unethical | Mintel.com. Mintel; Mintel. https://www.mintel.com/press-centre/social-and-lifestyle/56-of-
americans-stop-buying-from-brands-they-believe-are-unethical

Stock and Barrel | Handcrafted Leather Goods Made in the USA. (n.d.). Stock and Barrel. Retrieved June 9,
2022, from https://www.stockandbarrelco.com/

The C2 Group, & Genevieve Nelson, G. (2018, August 22). WCAG 2.1 Guidelines Explained with Examples |
by The C2 Group | The C2 Group | Medium. Medium; The C2 Group. https://medium.com/c2-group/
wcag-2-1-guidelines-explained-with-examples-5c7c5d8b69eb

Vick, C. (2021, January 27). 30 Best Web Accessibility Checking Tools for Compliance in 2021  |
Crownpeak. Digital Experience Platform & Enterprise CMS | Crownpeak. https://www.crownpeak.com/
blog/web-accessibility/30-best-web-accessibility-checking-tools-for-compliance-in-2021

Vu, M., Launey, K., & Egan, J. (2022, January 1). The Law on Website and Mobile Accessibility Continues to
Grow at a Glacial Pace Even as Lawsuit Numbers Reach All-Time Highs. American Bar Association.
https://www.americanbar.org/groups/law_practice/publications/law_practice_magazine/2022/jf22/vu-
launey-egan/
#:~:text=The%20Lawsuit%20Explosion,New%20York%2C%20Florida%20and%20California.

WCAG 2.1 at a Glance. (2022). W3C Web Accessibility Initiative (WAI). https://www.w3.org/WAI/standards-
guidelines/wcag/glance/

Web Content Accessibility Guidelines (WCAG) 2.1. (n.d.). World Wide Web Consortium (W3C). Retrieved
June 9, 2022, from https://www.w3.org/TR/WCAG21/

Page 42 of 43





 WebAIM: WebAIM’s WCAG 2 Checklist. (n.d.). WebAIM: Web Accessibility In Mind. Retrieved June 9, 2022,
from https://webaim.org/standards/wcag/checklist#sc1.4.3

Wilson, M. (2020, July 17). Study: Most websites fail to comply with ADA accessibility requirements | Chain
Store Age. Chain Store Age. https://chainstoreage.com/study-most-websites-fail-comply-ada-
accessibility-requirements

Page 43 of 43