Accessibility Scan Report

Title: Preserve Chunk 2 4/6/26 Issue: #245 Date: 4/6/2026, 7:19:51 PM Duration: 44.4m URLs: 77 / 77 🖥️ Forced Colors: 75 / 77 URLs

Summary

Issues

  • By Level: A (446), AA (1267), AAA (75)
  • By Version (A & AA): WCAG 2.0 (453), WCAG 2.2 (1260)
  • By Category: axe-strict (454) & Best Practice (5) & Others (7496)
  • Total: 7955 across 56 unique rules & 5 accessibility engines

By Severity

Critical
Serious
Moderate
Minor

By Role

UX Designer
Visual Designer
Content Author
Front-End Developer

Issues

🎯 Pages with Most Errors

Focus your efforts on these pages to make the biggest impact. Click any error count to filter the rule list below. Numbers in parentheses (+N) indicate findings that cover WCAG criteria already reported by axe.
Preserve Everyday Tableware Set | Pack for 4 158
Preserve Everyday Plate | 4 Count 155
Preserve On the Go Tableware Set | Pack for 8 155
Preserve Colander | Small 159
Preserve Cutting Board | Small 158
Preserve Round Food Storage Container | Large 154
Preserve Round Food Storage Container | Small 154
Preserve Food Storage Container | Mini | Set of 4 | With Packaging 154
Preserve Kitchen Starter Set | 4 items 152
Preserve Round Food Storage Container | Small 152

🔧 Most Common Issues (ALFA)

13 rules
1260 Serious alfa SC 2.5.8 AA Motor SIA-R111: Interactive elements have a sufficient target size
75 pages affected

Rule Information

Engine: alfa

Roles: UX Designer, Visual Designer

Blocking: ⚠️ Yes (Task-Blocking)

WCAG: SC 2.5.8 AA

Disabilities affected:
Motor

Affected Pages

Who Is Affected

  • Limited Manipulation 2.2% — ~7,600,000 Americans
  • Limited Reach and Strength 5.8% — ~19,600,000 Americans

Examples

Example 1 View on Page
Target has insufficient size
Mode: light
<a href="/account">...</a>
XPath: /a
Example 2 View on Page
Target has insufficient size
Mode: light
<a href="/collections" class="nav-link">Shop</a>
XPath: /a[@class="nav-link"]
Example 3 View on Page
Target has insufficient size
Mode: light
<a href="/cart" class="CartToggle" aria-label="Cart ($0.00)" role="button">...</a>
XPath: /a[@class="CartToggle"]
Example 4 View on Page
Target has insufficient size
Mode: light
<div class="PwzrButtonBase-root-245 PwzrButton-root-216 PwzrButton-text-218 rio-swatch-border-double-6cfad332-24dc-4d83-9505-f54e66f9a1e6" tabindex="0" role="button" aria-disabled="false" aria-label="Bright Poppy Red" data-option-value="Bright Poppy Red" style="position: relative; background-color: rgb(253, 52, 29); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-245 PwzrButton-root-216 PwzrButton-text-218 rio-swatch-border-double-6cfad332-24dc-4d83-9505-f54e66f9a1e6"]
Example 5 View on Page
Target has insufficient size
Mode: light
<div class="PwzrButtonBase-root-277 PwzrButton-root-248 PwzrButton-text-250 rio-swatch-border-double-234719be-bf49-46d8-b00c-9d50c4ff79cb" tabindex="0" role="button" aria-disabled="false" aria-label="Navy" data-option-value="Navy" style="position: relative; background-color: rgb(15, 55, 126); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-277 PwzrButton-root-248 PwzrButton-text-250 rio-swatch-border-double-234719be-bf49-46d8-b00c-9d50c4ff79cb"]
134 Moderate alfa SIA-R72
71 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="h6 name_wrapper"> Shave 5 Razor System | Handle & 1 Blade ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 2 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="home__subtitle">Related</p>
XPath: /p[@class="home__subtitle"]
Example 3 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="h6 name_wrapper"> Sandwich Food Storage Container | Set of ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 4 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="h6 name_wrapper"> Shave 5 Razor System | Handle & 1 Blade ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 5 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="h6 name_wrapper"> Everyday Tableware Set | Pack for 4 ...</p>
XPath: /p[@class="h6 name_wrapper"]
82 Moderate alfa SIA-R68: Accessible name contains the visible label text
62 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The element owns no elements as required by its semantic role
Mode: light
<ul class="tabs product-tabs-title"> </ul>
XPath: /ul[@class="tabs product-tabs-title"]
Example 2 View on Page
The element owns no elements as required by its semantic role
Mode: light
<fieldset class="bsub-widget" role="radiogroup" data-bsub-widget="">...</fieldset>
XPath: /fieldset[@class="bsub-widget"]
Example 3 View on Page
The element owns no elements as required by its semantic role
Mode: light
<ul class="tabs product-tabs-title"> </ul>
XPath: /ul[@class="tabs product-tabs-title"]
Example 4 View on Page
The element owns no elements as required by its semantic role
Mode: light
<ul class="tabs product-tabs-title"> </ul>
XPath: /ul[@class="tabs product-tabs-title"]
Example 5 View on Page
The element owns no elements as required by its semantic role
Mode: light
<ul class="tabs product-tabs-title"> </ul>
XPath: /ul[@class="tabs product-tabs-title"]
75 Moderate alfa SC 1.4.6 AAA Visual SIA-R66: Text has enhanced contrast with its background
75 pages affected

Rule Information

Engine: alfa

Roles: Visual Designer

Blocking: No

WCAG: SC 1.4.6 AAA

Disabilities affected:
Visual

Affected Pages

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Without Perception of Color 4.3% — ~14,500,000 Americans

Examples

Example 1 View on Page
The highest possible contrast of the text is 4.55:1 which is below the required contrast of 7:1
Mode: light
Example 2 View on Page
The highest possible contrast of the text is 4.55:1 which is below the required contrast of 7:1
Mode: light
Example 3 View on Page
The highest possible contrast of the text is 4.55:1 which is below the required contrast of 7:1
Mode: light
Example 4 View on Page
The highest possible contrast of the text is 4.55:1 which is below the required contrast of 7:1
Mode: light
Example 5 View on Page
The highest possible contrast of the text is 4.55:1 which is below the required contrast of 7:1
Mode: light
72 Moderate alfa SIA-R73: Text spacing can be adjusted without loss of content
71 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The line height of the paragraph is less than 1.5
Mode: light
<p class="h6 name_wrapper"> Shave 5 Razor System | Handle & 1 Blade ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 2 View on Page
The line height of the paragraph is less than 1.5
Mode: light
<p class="h6 name_wrapper"> Sandwich Food Storage Container | Set of ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 3 View on Page
The line height of the paragraph is less than 1.5
Mode: light
<p class="h6 name_wrapper"> Shave 5 Razor System | Handle & 1 Blade ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 4 View on Page
The line height of the paragraph is less than 1.5
Mode: light
<p class="h6 name_wrapper"> Everyday Tableware Set | Pack for 4 ...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 5 View on Page
The line height of the paragraph is less than 1.5
Mode: light
<p class="h6 name_wrapper"> Toothbrush in Lightweight Pouch | Single ...</p>
XPath: /p[@class="h6 name_wrapper"]
64 Serious alfa SC 3.1.1 A Cognitive SIA-R2: HTML elements have a valid lang attribute
64 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

WCAG: SC 3.1.1 A

Disabilities affected:
Cognitive

Affected Pages

Who Is Affected

  • Limited Language, Cognitive, and Learning Abilities 4.7% — ~15,900,000 Americans

Examples

Example 1 View on Page
The image does not have an accessible name
Mode: light
<img srcset="https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/180x/ 180w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/360x/ 360w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/720x/ 720w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/900x/ 900w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/1080x/ 1080w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/1200x/ 1200w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/1920x/ 1920w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/2048x/ 2048w" sizes="100vw" src="https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/" class="shogun-image " decoding="async" loading="eager" draggable="false" />
XPath: /img[@class="shogun-image "]
Example 2 View on Page
The image does not have an accessible name
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208" />
XPath: /img
Example 3 View on Page
The image does not have an accessible name
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208" />
XPath: /img
Example 4 View on Page
The image does not have an accessible name
Mode: light
<img class="parallax-slider" src="//www.preserve.eco/cdn/shop/collections/header_37e4de39-9e36-4c16-ab90-5965a8069a81_1800x.jpg?v=1543924251" style="transform: translate3d(-796px, -78.8125px, 0px); position: absolute; height: 509px; width: 2872px; max-width: none;" />
XPath: /img[@class="parallax-slider"]
Example 5 View on Page
The image does not have an accessible name
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208" />
XPath: /img
26 Moderate alfa SIA-R113
20 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-a3ce8eb8-5d94-4fc3-a097-072c7fc8a282" tabindex="0" role="button" aria-disabled="false" aria-label="Coral" data-option-value="Coral" style="position: relative; background-color: rgb(250, 202, 196); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-a3ce8eb8-5d94-4fc3-a097-072c7fc8a282"]
Example 2 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-95fc22a4-8d0f-458a-8435-9260bbf04a1e" tabindex="0" role="button" aria-disabled="false" aria-label="Coral" data-option-value="Coral" style="position: relative; background-color: rgb(250, 202, 196); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-95fc22a4-8d0f-458a-8435-9260bbf04a1e"]
Example 3 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-1127 PwzrButton-root-1098 PwzrButton-text-1100 rio-swatch-border-double-416ed141-3cad-455d-946f-64e945fd4cd0" tabindex="0" role="button" aria-disabled="false" aria-label="Gray" data-option-value="Gray" style="position: relative; background-color: rgb(155, 155, 155); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-1127 PwzrButton-root-1098 PwzrButton-text-1100 rio-swatch-border-double-416ed141-3cad-455d-946f-64e945fd4cd0"]
Example 4 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-987 PwzrButton-root-958 PwzrButton-text-960 rio-swatch-border-double-3121e88d-be31-4168-b870-5dd7ba16999d" tabindex="0" role="button" aria-disabled="false" aria-label="Aquamarine" data-option-value="Aquamarine" style="position: relative; background-color: rgb(161, 235, 231); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-987 PwzrButton-root-958 PwzrButton-text-960 rio-swatch-border-double-3121e88d-be31-4168-b870-5dd7ba16999d"]
Example 5 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-b80909e1-2c3d-4b92-be22-befe4c5b60ee" tabindex="0" role="button" aria-disabled="false" aria-label="Coral" data-option-value="Coral" style="position: relative; background-color: rgb(250, 202, 196); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);">...</div>
XPath: /div[@class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-b80909e1-2c3d-4b92-be22-befe4c5b60ee"]
6 Critical alfa SC 4.1.2 A Visual Motor Cognitive SIA-R11: Button elements have an accessible name
6 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer, Content Author

Blocking: ⚠️ Yes (Task-Blocking)

WCAG: SC 4.1.2 A

Disabilities affected:
Visual Motor Cognitive

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Limited Manipulation 2.2% — ~7,600,000 Americans
  • Limited Reach and Strength 5.8% — ~19,600,000 Americans
  • Limited Language, Cognitive, and Learning Abilities 4.7% — ~15,900,000 Americans

Examples

Example 1 View on Page
The link does not have an accessible name
Mode: light
<a class="shogun-image-link" href="https://getshogun.com/previews/145ffeef-6ba5-4c1e-9374-4531f22da1db/5d2650612b074f004fa12c07">...</a>
XPath: /a[@class="shogun-image-link"]
Example 2 View on Page
The link does not have an accessible name
Mode: light
<a name="_ftn8" href="#_ftnref8" />
XPath: /a
Example 3 View on Page
The link does not have an accessible name
Mode: light
<a href="#looxReviews">...</a>
XPath: /a
Example 4 View on Page
The link does not have an accessible name
Mode: light
<a href="#looxReviews">...</a>
XPath: /a
Example 5 View on Page
The link does not have an accessible name
Mode: light
<a href="#looxReviews">...</a>
XPath: /a
4 Moderate alfa Best Practice SIA-R53: Headings follow a logical hierarchy
4 pages affected

Rule Information

Engine: alfa

Roles: Content Author, UX Designer

Blocking: No

WCAG: Best Practice

Examples

Example 1 View on Page
The heading skips one or more levels
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: /h5[@class="uppercase h5"]
Example 2 View on Page
The heading skips one or more levels
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: /h5[@class="uppercase h5"]
Example 3 View on Page
The heading skips one or more levels
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: /h5[@class="uppercase h5"]
Example 4 View on Page
The heading skips one or more levels
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: /h5[@class="uppercase h5"]
4 Moderate alfa SIA-R78: Headings of same level have text content between them
4 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
There is no content between this heading and the next
Mode: light
<h3 class="h3 blog__article__title">Waste Warriors: POPi Partner Stepping in Where The...</h3>
XPath: /h3[@class="h3 blog__article__title"]
Example 2 View on Page
There is no content between this heading and the next
Mode: light
<h3 class="h3 blog__article__title">Waste Warriors: POPi Partner Stepping in Where The...</h3>
XPath: /h3[@class="h3 blog__article__title"]
Example 3 View on Page
There is no content between this heading and the next
Mode: light
<h3 class="h3 blog__article__title">Waste Warriors: POPi Partner Stepping in Where The...</h3>
XPath: /h3[@class="h3 blog__article__title"]
Example 4 View on Page
There is no content between this heading and the next
Mode: light
<h3 class="h3 blog__article__title">Waste Warriors: POPi Partner Stepping in Where The...</h3>
XPath: /h3[@class="h3 blog__article__title"]
3 Serious alfa SC 1.4.3 AA Visual SIA-R69: Text has sufficient contrast with its background
3 pages affected

Rule Information

Engine: alfa

Roles: Visual Designer

Blocking: No

WCAG: SC 1.4.3 AA

Disabilities affected:
Visual

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Without Perception of Color 4.3% — ~14,500,000 Americans

Examples

Example 1 View on Page
The highest possible contrast of the text is 4.37:1 which is below the required contrast of 4.5:1
Mode: light
Example 2 View on Page
The highest possible contrast of the text is 4.28:1 which is below the required contrast of 4.5:1
Mode: light
Example 3 View on Page
The highest possible contrast of the text is 2.09:1 which is below the required contrast of 4.5:1
Mode: light
1 Moderate alfa Best Practice SIA-R85: Paragraphs of text are not all italics
1 pages affected

Rule Information

Engine: alfa

Roles: Visual Designer, Content Author

Blocking: No

WCAG: Best Practice

Examples

Example 1 View on Page
The text of the paragraph is all italic
Mode: light
<p class="small compare-at em" id="ComparePriceWrapper-product">...</p>
XPath: /p[@id="ComparePriceWrapper-product"]
1 Moderate alfa SIA-R3: lang attribute has a valid language code
1 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The element does not have a unique ID
Mode: light
<div class="grid__item large--one-third" id="productInfo-product">...</div>
XPath: /div[@id="productInfo-product"]

🔧 Most Common Issues (axe)

7 rules
308 Critical axe SC 1.1.1 A Visual image-alt: Ensures every <img> element has alternative text. Without alt text, blind users receive no information about the image's meaning or purpose.
64 pages affected

Rule Information

Engine: axe

Roles: Content Author

Blocking: ⚠️ Yes (Task-Blocking)

WCAG: SC 1.1.1 A

Disabilities affected:
Visual

Affected Pages

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans

Examples

Example 1 View on Page
Images must have alternative text
Mode: light
<img srcset="https://i.shgcdn.com..." sizes="100vw" src="https://i.shgcdn.com..." class="shogun-image " decoding="async" loading="eager" draggable="false">
XPath: img[loading="eager"]
Example 2 View on Page
Images must have alternative text
Mode: light
<img srcset="https://i.shgcdn.com..." sizes="100vw" src="https://i.shgcdn.com..." class="shogun-image " decoding="async" loading="lazy" draggable="false">
XPath: img[loading="lazy"]
Example 3 View on Page
Images must have alternative text
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208">
XPath: .tooltip:nth-child(1) > img
Example 4 View on Page
Images must have alternative text
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/usa-icon.PNG?2807102045077662897">
XPath: .tooltip:nth-child(2) > img
Example 5 View on Page
Images must have alternative text
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/recycle-icon.PNG?157872935954425060">
XPath: .tooltip:nth-child(3) > img
62 Moderate axe aria-allowed-role
62 pages affected

Rule Information

Engine: axe

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
ARIA role should be appropriate for the element
Mode: light
<ul style="display: inline-flex; margin: unset; padding: unset; text-indent: unset; list-style-type: none; gap: 2px;" aria-label="Rating icons: 4.5 / 5 star review" role="img" aria-roledescription="figure">
XPath: #looxReviewsFrame
Example 2 View on Page
ARIA role should be appropriate for the element
Mode: light
<ul style="display: inline-flex; margin: unset; padding: unset; text-indent: unset; list-style-type: none; gap: 2px;" aria-label="Rating icons: 5 / 5 star review" role="img" aria-roledescription="figure">
XPath: #looxReviewsFrame
Example 3 View on Page
ARIA role should be appropriate for the element
Mode: light
<ul style="display: inline-flex; margin: unset; padding: unset; text-indent: unset; list-style-type: none; gap: 2px;" aria-label="Rating icons: 4.5 / 5 star review" role="img" aria-roledescription="figure">
XPath: #looxReviewsFrame
Example 4 View on Page
ARIA role should be appropriate for the element
Mode: light
<ul style="display: inline-flex; margin: unset; padding: unset; text-indent: unset; list-style-type: none; gap: 2px;" aria-label="Rating icons: 4 / 5 star review" role="img" aria-roledescription="figure">
XPath: #looxReviewsFrame
Example 5 View on Page
ARIA role should be appropriate for the element
Mode: light
<ul style="display: inline-flex; margin: unset; padding: unset; text-indent: unset; list-style-type: none; gap: 2px;" aria-label="Rating icons: 5 / 5 star review" role="img" aria-roledescription="figure">
XPath: #looxReviewsFrame
62 Serious axe SC 1.3.1 A Visual Cognitive listitem: Ensures <li> elements are contained within a <ul> or <ol>. List items outside lists lose their structural meaning for screen reader users.
62 pages affected

Rule Information

Engine: axe

Roles: Content Author, Front-End Developer

Blocking: No

WCAG: SC 1.3.1 A

Disabilities affected:
Visual Cognitive

Affected Pages

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Limited Language, Cognitive, and Learning Abilities 4.7% — ~15,900,000 Americans

Examples

Example 1 View on Page
<li> elements must be contained in a <ul> or <ol>
Mode: light
<li><svg viewBox="0 0 24 24" data-lx-fill="full" role="presentation" aria-hidden="true" class="loox-icon star text-large" style="display: block; width: 1em; height: 1em;"><use href="#looxicons-rating-icon"></use></svg></li>
XPath: #looxReviewsFrame
Example 2 View on Page
<li> elements must be contained in a <ul> or <ol>
Mode: light
<li><svg viewBox="0 0 24 24" data-lx-fill="full" role="presentation" aria-hidden="true" class="loox-icon star text-large" style="display: block; width: 1em; height: 1em;"><use href="#looxicons-rating-icon"></use></svg></li>
XPath: #looxReviewsFrame
Example 3 View on Page
<li> elements must be contained in a <ul> or <ol>
Mode: light
<li><svg viewBox="0 0 24 24" data-lx-fill="full" role="presentation" aria-hidden="true" class="loox-icon star text-large" style="display: block; width: 1em; height: 1em;"><use href="#looxicons-rating-icon"></use></svg></li>
XPath: #looxReviewsFrame
Example 4 View on Page
<li> elements must be contained in a <ul> or <ol>
Mode: light
<li><svg viewBox="0 0 24 24" data-lx-fill="full" role="presentation" aria-hidden="true" class="loox-icon star text-large" style="display: block; width: 1em; height: 1em;"><use href="#looxicons-rating-icon"></use></svg></li>
XPath: #looxReviewsFrame
Example 5 View on Page
<li> elements must be contained in a <ul> or <ol>
Mode: light
<li><svg viewBox="0 0 24 24" data-lx-fill="full" role="presentation" aria-hidden="true" class="loox-icon star text-large" style="display: block; width: 1em; height: 1em;"><use href="#looxicons-rating-icon"></use></svg></li>
XPath: #looxReviewsFrame
8 Moderate axe region: Ensures all page content is contained within landmark regions. Content outside landmarks cannot be found by screen reader users navigating by landmarks.
8 pages affected

Rule Information

Engine: axe

Roles: Front-End Developer, UX Designer

Blocking: No

Examples

Example 1 View on Page
All page content should be contained by landmarks
Mode: light
<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 98.5156px, 0px); height: 254px; width: 1280px;">
XPath: .parallax-mirror
Example 2 View on Page
All page content should be contained by landmarks
Mode: light
<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 98.5156px, 0px); height: 254px; width: 1280px;">
XPath: .parallax-mirror
Example 3 View on Page
All page content should be contained by landmarks
Mode: light
<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 98.5156px, 0px); height: 254px; width: 1280px;">
XPath: .parallax-mirror
Example 4 View on Page
All page content should be contained by landmarks
Mode: light
<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 98.5156px, 0px); height: 348px; width: 1280px;">
XPath: .parallax-mirror
Example 5 View on Page
All page content should be contained by landmarks
Mode: light
<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 98.5156px, 0px); height: 348px; width: 1280px;">
XPath: .parallax-mirror
4 Serious axe SC 1.4.3 AA Visual color-contrast: Ensures text and interactive elements have sufficient contrast ratio (4.5:1 for normal text, 3:1 for large text) against their background.
2 pages affected

Rule Information

Engine: axe

Roles: Visual Designer

Blocking: No

WCAG: SC 1.4.3 AA

Disabilities affected:
Visual

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Without Perception of Color 4.3% — ~14,500,000 Americans

Examples

Example 1 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: light
<span style="color: rgb(0, 125, 204);">Our summer sale is here! <strong>30% off</strong> almost everything. Now through 8/9. Enter <strong>SUMMER30</strong> at checkout.</span>
XPath: p:nth-child(1) > span
Example 2 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: light
<strong>30% off</strong>
XPath: span > strong:nth-child(1)
Example 3 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: light
<strong>SUMMER30</strong>
XPath: strong:nth-child(2)
Example 4 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: light
<span id="ComparePrice-product">$80.00</span>
XPath: #ComparePrice-product
4 Moderate axe heading-order: Ensures heading levels are not skipped (e.g. h1→h3). Inconsistent heading hierarchy makes page structure difficult to navigate for screen reader users.
4 pages affected

Rule Information

Engine: axe

Roles: Content Author, UX Designer

Blocking: No

Examples

Example 1 View on Page
Heading levels should only increase by one
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: h5
Example 2 View on Page
Heading levels should only increase by one
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: h5
Example 3 View on Page
Heading levels should only increase by one
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: h5
Example 4 View on Page
Heading levels should only increase by one
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: h5

🔧 Most Common Issues (Equal Access)

24 rules
1723 Moderate equalAccess style_focus_visible: An element's focused state must be visually apparent
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Check the keyboard focus indicator is visible when using CSS declaration for 'border' or 'outline'
Mode: light
<input name="q" aria-label="Search Bar" type="search" class="search-bar">
Example 2 View on Page
Check the keyboard focus indicator is visible when using CSS declaration for 'border' or 'outline'
Mode: light
<button aria-label="Search" class="btn search-btn" type="submit">
Example 3 View on Page
Check the keyboard focus indicator is visible when using CSS declaration for 'border' or 'outline'
Mode: light
<div style="position: relative; background-color: rgb(253, 52, 29); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);" data-option-value="Bright Poppy Red" aria-label="Bright Poppy Red" aria-disabled="false" role="button" tabindex="0" class="PwzrButtonBase-root-245 PwzrButton-root-216 PwzrButton-text-218 rio-swatch-border-double-bf87f4e7-d022-45c9-80ee-60dbe0df89d9">
Example 4 View on Page
Check the keyboard focus indicator is visible when using CSS declaration for 'border' or 'outline'
Mode: light
<div style="position: relative; background-color: rgb(15, 55, 126); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);" data-option-value="Navy" aria-label="Navy" aria-disabled="false" role="button" tabindex="0" class="PwzrButtonBase-root-277 PwzrButton-root-248 PwzrButton-text-250 rio-swatch-border-double-4c6d749b-403f-44fd-a5ed-f6c84e0d8f71">
Example 5 View on Page
Check the keyboard focus indicator is visible when using CSS declaration for 'border' or 'outline'
Mode: light
<div style="position: relative; background-color: rgb(232, 247, 86); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);" data-option-value="Key Lime" aria-label="Key Lime" aria-disabled="false" role="button" tabindex="0" class="PwzrButtonBase-root-309 PwzrButton-root-280 PwzrButton-text-282 rio-swatch-border-double-e236292d-16e2-4024-a41f-9d342bd37c49">
755 Moderate equalAccess element_tabbable_visible: A tabbable element must be visible on the page
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus
Mode: light
<a role="button" aria-label="Cart Toggle" class="CartToggle header-cart" href="/cart">
Example 2 View on Page
Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus
Mode: light
<a itemprop="url" href="/">
Example 3 View on Page
Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus
Mode: light
<a class="nav-link" href="/collections">
Example 4 View on Page
Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus
Mode: light
<a class="nav-link" href="/pages/overview">
Example 5 View on Page
Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus
Mode: light
<a class="nav-link" href="/pages/corporate-sales">
546 Moderate equalAccess input_label_visible: An input element must have an associated visible label
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The input element does not have an associated visible label
Mode: light
<input name="q" aria-label="Search Bar" type="search" class="search-bar">
Example 2 View on Page
The input element does not have an associated visible label
Mode: light
<button aria-label="Search" class="btn search-btn" type="submit">
Example 3 View on Page
The ‘placeholder’ is the only visible label
Mode: light
<input name="contact[email]" autocapitalize="off" autocorrect="off" aria-label="your-email@example.com" class="input-group-field" id="mail" placeholder="your-email@example.com" type="email">
Example 4 View on Page
The input element does not have an associated visible label
Mode: light
<input value="Subscribe" id="subscribe" name="subscribe" class="btn uppercase" type="submit">
Example 5 View on Page
The input element does not have an associated visible label
Mode: light
<input name="q" aria-label="Search Bar" type="search" class="search-bar">
308 Moderate equalAccess img_alt_valid
64 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The image has neither an accessible name nor is marked as decorative or redundant
Mode: light
<img draggable="false" loading="eager" decoding="async" class="shogun-image " src="https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/" sizes="100vw" srcset="https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/180x/ 180w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/360x/ 360w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/720x/ 720w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/900x/ 900w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/1080x/ 1080w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/1200x/ 1200w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/1920x/ 1920w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/2048x/ 2048w">
Example 2 View on Page
The image has neither an accessible name nor is marked as decorative or redundant
Mode: light
<img draggable="false" loading="lazy" decoding="async" class="shogun-image " src="https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/" sizes="100vw" srcset="https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/180x/ 180w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/360x/ 360w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/720x/ 720w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/900x/ 900w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/1080x/ 1080w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/1200x/ 1200w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/1920x/ 1920w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/2048x/ 2048w">
Example 3 View on Page
The image has neither an accessible name nor is marked as decorative or redundant
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208">
Example 4 View on Page
The image has neither an accessible name nor is marked as decorative or redundant
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/usa-icon.PNG?2807102045077662897">
Example 5 View on Page
The image has neither an accessible name nor is marked as decorative or redundant
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/recycle-icon.PNG?157872935954425060">
300 Moderate equalAccess text_block_heading: Blocks of text that serve as headings should be marked up as headings
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm this text 'info@preserve.eco info@preserve.eco' is used as a heading and if so, modify to use a heading element or role
Mode: light
<p>
Example 2 View on Page
Confirm this text 'FREE SHIPPING ON ALL U.S. ORDERS OVER $50!' is used as a heading and if so, modify to use a heading element or role
Mode: light
<div style="text-align: center; display: inline-block; width: 100%; color: inherit; position: relative; z-index: 1; font-size: 18px;" aria-hidden="true" id="qab_content">
Example 3 View on Page
Confirm this text 'Quantity' is used as a heading and if so, modify to use a heading element or role
Mode: light
<div id="Quantity-product" class="quantity-selector__wrapper text-center">
Example 4 View on Page
Confirm this text 'Related' is used as a heading and if so, modify to use a heading element or role
Mode: light
<p class="home__subtitle">
Example 5 View on Page
Confirm this text 'info@preserve.eco info@preserve.eco' is used as a heading and if so, modify to use a heading element or role
Mode: light
<p>
236 Moderate equalAccess element_tabbable_unobscured: A tabbable element should not be entirely obscured by overlapping content
70 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus
Mode: light
<div style="position: relative; background-color: rgb(250, 202, 196); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);" data-option-value="Coral" aria-label="Coral" aria-disabled="false" role="button" tabindex="0" class="PwzrButtonBase-root-373 PwzrButton-root-344 PwzrButton-text-346 rio-swatch-border-double-587d1cfe-b591-416f-8813-10d74d0a12d1">
Example 2 View on Page
Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus
Mode: light
<div style="position: relative; background-color: rgb(179, 235, 233); min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);" data-option-value="Neptune" aria-label="Neptune" aria-disabled="false" role="button" tabindex="0" class="PwzrButtonBase-root-405 PwzrButton-root-376 PwzrButton-text-378 rio-swatch-border-double-094e3f8a-2564-49e4-af70-ac892cc92ff8">
Example 3 View on Page
Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus
Mode: light
<div style="position: relative; background-color: rgb(17, 207, 240); background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240px%22%20height%3D%2240px%22%20fill%3D%22none%22%20viewBox%3D%220%200%20120%20120%22%20data-reactroot%3D%22%22%3E%3Cpath%20fill%3D%22rgba(17%2C%20207%2C%20240%2C%201)%22%20d%3D%22M0%200H120V120H0z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22rgba(200%2C%20235%2C%2017%2C%201)%22%20d%3D%22M40%200H120V120H40z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22rgba(229%2C%2022%2C%20125%2C%201)%22%20d%3D%22M80%200H120V120H80z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); background-size: cover; background-position: center center; background-repeat: no-repeat; min-width: 40px; width: 40px; height: 40px; outline: none; box-sizing: border-box; border: 3px solid rgb(220, 220, 220);" data-option-value="Surprise Me!" aria-label="Surprise Me!" aria-disabled="false" role="button" tabindex="0" class="PwzrButtonBase-root-437 PwzrButton-root-408 PwzrButton-text-410 rio-swatch-border-double-6fd7d4c4-f753-450b-8c62-2d40afaaea4b">
Example 4 View on Page
Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus
Mode: light
<a href="/account">
Example 5 View on Page
Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus
Mode: light
<input name="q" aria-label="Search Bar" type="search" class="search-bar">
212 Moderate equalAccess aria_role_redundant: ARIA role is redundant with the native role of the element
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The explicitly-assigned ARIA role "main" is redundant with the implicit role of the element <main>
Mode: light
<main role="main" class="main-content">
Example 2 View on Page
The explicitly-assigned ARIA role "contentinfo" is redundant with the implicit role of the element <footer>
Mode: light
<footer itemtype="http://schema.org/Organization" itemscope="" data-section-type="footer" data-section-id="footer" role="contentinfo" class="site-footer-wrapper">
Example 3 View on Page
The explicitly-assigned ARIA role "main" is redundant with the implicit role of the element <main>
Mode: light
<main role="main" class="main-content">
Example 4 View on Page
The explicitly-assigned ARIA role "navigation" is redundant with the implicit role of the element <nav>
Mode: light
<nav aria-label="breadcrumbs" role="navigation" class="breadcrumb">
Example 5 View on Page
The explicitly-assigned ARIA role "contentinfo" is redundant with the implicit role of the element <footer>
Mode: light
<footer itemtype="http://schema.org/Organization" itemscope="" data-section-type="footer" data-section-id="footer" role="contentinfo" class="site-footer-wrapper">
204 Moderate equalAccess element_attribute_deprecated: Deprecated HTML attributes should not be used
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The HTML attribute(s) "http-equiv" is deprecated for the <meta> element in HTML 5
Mode: light
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
Example 2 View on Page
The HTML attribute(s) "http-equiv" is deprecated for the <meta> element in HTML 5
Mode: light
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
Example 3 View on Page
The HTML attribute(s) "align" is deprecated in HTML 5
Mode: light
<div align="left">
Example 4 View on Page
The HTML attribute(s) "frameborder, scrolling" is deprecated for the <iframe> element in HTML 5
Mode: light
<iframe style="overflow: hidden; height: 1955px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1955px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512376587?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 5 View on Page
The HTML attribute(s) "http-equiv" is deprecated for the <meta> element in HTML 5
Mode: light
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
124 Moderate equalAccess aria_form_label_unique
62 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Multiple elements with "form" role do not have unique labels
Mode: light
<form class="product-form-product product-form" data-section="product" id="AddToCartForm-{{ section.id }" enctype="multipart/form-data" method="post" action="/cart/add">
Example 2 View on Page
Multiple elements with "form" role do not have unique labels
Mode: light
<form class="contact-form" accept-charset="UTF-8" id="contact_form" action="/contact#contact_form" method="post">
Example 3 View on Page
Multiple elements with "form" role do not have unique labels
Mode: light
<form class="product-form-product product-form" data-section="product" id="AddToCartForm-{{ section.id }" enctype="multipart/form-data" method="post" action="/cart/add">
Example 4 View on Page
Multiple elements with "form" role do not have unique labels
Mode: light
<form class="contact-form" accept-charset="UTF-8" id="contact_form" action="/contact#contact_form" method="post">
Example 5 View on Page
Multiple elements with "form" role do not have unique labels
Mode: light
<form class="product-form-product product-form" data-section="product" id="AddToCartForm-{{ section.id }" enctype="multipart/form-data" method="post" action="/cart/add">
82 Moderate equalAccess aria_child_valid
62 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The element with role "list" does not own any child element with any of the following role(s): "listitem"
Mode: light
<ul class="tabs product-tabs-title">
Example 2 View on Page
The element with role "radiogroup" owns the child element with the role "graphics-document" that is not one of the allowed role(s): "radio"
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 3 View on Page
The element with role "list" does not own any child element with any of the following role(s): "listitem"
Mode: light
<ul class="tabs product-tabs-title">
Example 4 View on Page
The element with role "list" does not own any child element with any of the following role(s): "listitem"
Mode: light
<ul class="tabs product-tabs-title">
Example 5 View on Page
The element with role "list" does not own any child element with any of the following role(s): "listitem"
Mode: light
<ul class="tabs product-tabs-title">
75 Moderate equalAccess style_color_misuse: Color must not be used as the only visual means of conveying information
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<link media="all" type="text/css" rel="stylesheet" href="//www.preserve.eco/cdn/shop/t/40/assets/style.scss.css?v=31266567418381038671774644541">
Example 2 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<style type="text/css">
Example 3 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<style type="text/css">
Example 4 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<style type="text/css">
Example 5 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<style type="text/css">
75 Moderate equalAccess style_highcontrast_visible: Elements must be visible in Windows High Contrast mode
75 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<link media="all" type="text/css" rel="stylesheet" href="//www.preserve.eco/cdn/shop/t/40/assets/style.scss.css?v=31266567418381038671774644541">
Example 2 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<style type="text/css">
Example 3 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<style type="text/css">
Example 4 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<style type="text/css">
Example 5 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<style type="text/css">
62 Moderate equalAccess frame_src_valid: The src value of the frame must not be empty
62 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1955px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1955px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512376587?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 2 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1724px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1724px" src="https://loox.io/widget/4JZEXBcfNh/reviews/3750152470580?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 3 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1349px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1349px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512370187?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 4 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1762px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1762px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512360907?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 5 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1535px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1535px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512364235?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
62 Moderate equalAccess aria_complementary_labelled: Each element with a complementary role must have an accessible name
62 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Element with "complementary" role does not have a label
Mode: light
<aside class="grid page-margin">
Example 2 View on Page
Element with "complementary" role does not have a label
Mode: light
<aside class="grid page-margin">
Example 3 View on Page
Element with "complementary" role does not have a label
Mode: light
<aside class="grid page-margin">
Example 4 View on Page
Element with "complementary" role does not have a label
Mode: light
<aside class="grid page-margin">
Example 5 View on Page
Element with "complementary" role does not have a label
Mode: light
<aside class="grid page-margin">
60 Moderate equalAccess element_id_unique: Element IDs must be unique within a page
59 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The <input> element has the id "" that is empty
Mode: light
<input mm-step="1" step="1" mm-stock-max="NaN" mm-min="1" data-submit="" id="" name="quantity" pattern="[0-9]*" aria-label="quantity" data-id="" min="1" value="1" class="js-qty__num QuantityInput" type="text">
Example 2 View on Page
The <input> element has the id "" that is empty
Mode: light
<input mm-step="1" step="1" mm-stock-max="NaN" mm-min="1" data-submit="" id="" name="quantity" pattern="[0-9]*" aria-label="quantity" data-id="" min="1" value="1" class="js-qty__num QuantityInput" type="text">
Example 3 View on Page
The <input> element has the id "" that is empty
Mode: light
<input mm-step="1" step="1" mm-stock-max="NaN" mm-min="1" data-submit="" id="" name="quantity" pattern="[0-9]*" aria-label="quantity" data-id="" min="1" value="1" class="js-qty__num QuantityInput" type="text">
Example 4 View on Page
The <input> element has the id "" that is empty
Mode: light
<input mm-step="1" step="1" mm-stock-max="NaN" mm-min="1" data-submit="" id="" name="quantity" pattern="[0-9]*" aria-label="quantity" data-id="" min="1" value="1" class="js-qty__num QuantityInput" type="text">
Example 5 View on Page
The <input> element has the id "" that is empty
Mode: light
<input mm-step="1" step="1" mm-max="10" max="10" mm-stock-max="NaN" mm-min="1" data-submit="" id="" name="quantity" pattern="[0-9]*" aria-label="quantity" data-id="" min="1" value="1" class="js-qty__num QuantityInput" type="text">
59 Moderate equalAccess label_ref_valid
59 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The value "Quantity" of the 'for' attribute is not the 'id' of a valid element
Mode: light
<label class="quantity-selector uppercase" for="Quantity">
Example 2 View on Page
The value "Quantity" of the 'for' attribute is not the 'id' of a valid element
Mode: light
<label class="quantity-selector uppercase" for="Quantity">
Example 3 View on Page
The value "Quantity" of the 'for' attribute is not the 'id' of a valid element
Mode: light
<label class="quantity-selector uppercase" for="Quantity">
Example 4 View on Page
The value "Quantity" of the 'for' attribute is not the 'id' of a valid element
Mode: light
<label class="quantity-selector uppercase" for="Quantity">
Example 5 View on Page
The value "Quantity" of the 'for' attribute is not the 'id' of a valid element
Mode: light
<label class="quantity-selector uppercase" for="Quantity">
58 Moderate equalAccess text_sensory_misuse: Instructions must not rely solely on sensory characteristics
34 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm the user instruction is still understandable without the word(s) 'Round, Large'
Mode: light
<span>
Example 2 View on Page
Confirm the user instruction is still understandable without the word(s) 'Round, Large'
Mode: light
<h1 class="h2" itemprop="name">
Example 3 View on Page
Confirm the word(s) 'screw-top' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<span>
Example 4 View on Page
Confirm the user instruction is still understandable without the word(s) 'big, pocket-sized'
Mode: light
<span>
Example 5 View on Page
Confirm the user instruction is still understandable without the word(s) 'Round'
Mode: light
<span>
18 Moderate equalAccess aria_keyboard_handler_exists
18 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Verify the <fieldset> element with "radiogroup" role has keyboard access
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 2 View on Page
Verify the <fieldset> element with "radiogroup" role has keyboard access
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 3 View on Page
Verify the <fieldset> element with "radiogroup" role has keyboard access
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 4 View on Page
Verify the <fieldset> element with "radiogroup" role has keyboard access
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 5 View on Page
Verify the <fieldset> element with "radiogroup" role has keyboard access
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
18 Moderate equalAccess widget_tabbable_exists
18 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Component with "radiogroup" role does not have a tabbable element
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 2 View on Page
Component with "radiogroup" role does not have a tabbable element
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 3 View on Page
Component with "radiogroup" role does not have a tabbable element
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 4 View on Page
Component with "radiogroup" role does not have a tabbable element
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
Example 5 View on Page
Component with "radiogroup" role does not have a tabbable element
Mode: light
<fieldset data-bsub-widget="" role="radiogroup" class="bsub-widget">
8 Moderate equalAccess text_quoted_correctly
8 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: " x 11.5"
Mode: light
<li>
Example 2 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: " x 11.5"
Mode: light
<li>
Example 3 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: " × 9"
Mode: light
<li>
Example 4 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: " × 9"
Mode: light
<li>
Example 5 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: " x 10"
Mode: light
<li>
6 Moderate equalAccess a_text_purpose: Link text must identify the purpose of the link
6 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a href="https://getshogun.com/previews/145ffeef-6ba5-4c1e-9374-4531f22da1db/5d2650612b074f004fa12c07" class="shogun-image-link">
Example 2 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a href="#_ftnref8" name="_ftn8">
Example 3 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a href="#looxReviews">
Example 4 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a href="#looxReviews">
Example 5 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a href="#looxReviews">
4 Moderate equalAccess text_contrast_sufficient: Contrast ratio of text against its background must meet minimum requirements
3 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Text contrast of 4.37 with its background is less than the WCAG AA minimum requirements for text of size 18px and weight of 400
Mode: light
<span style="color: rgb(0, 125, 204);">
Example 2 View on Page
Text contrast of 4.37 with its background is less than the WCAG AA minimum requirements for text of size 18px and weight of 700
Mode: light
<strong>
Example 3 View on Page
Text contrast of 4.28 with its background is less than the WCAG AA minimum requirements for text of size 16px and weight of 400
Mode: light
<a style="box-sizing: border-box; color: #0280c6;" href="https://www.preserveproducts.com/explore/preserve-compostables">
Example 4 View on Page
Text contrast of 2.09 with its background is less than the WCAG AA minimum requirements for text of size 14.4px and weight of 400
Mode: light
<span id="ComparePrice-product">
3 Moderate equalAccess aria_id_unique
3 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The 'id' "" "" specified for the ARIA property 'aria-labelledby' value is not valid
Mode: light
<div aria-haspopup="listbox" aria-labelledby=" " role="button" tabindex="0" class="PwzrSelect-root-212 PwzrSelect-select-213 PwzrSelect-selectMenu-216 PwzrSelect-outlined-215 PwzrInputBase-input-248 PwzrOutlinedInput-input-232">
Example 2 View on Page
The 'id' "" "" specified for the ARIA property 'aria-labelledby' value is not valid
Mode: light
<div aria-haspopup="listbox" aria-labelledby=" " role="button" tabindex="0" class="PwzrSelect-root-212 PwzrSelect-select-213 PwzrSelect-selectMenu-216 PwzrSelect-outlined-215 PwzrInputBase-input-248 PwzrOutlinedInput-input-232">
Example 3 View on Page
The 'id' "" "" specified for the ARIA property 'aria-labelledby' value is not valid
Mode: light
<div aria-haspopup="listbox" aria-labelledby=" " role="button" tabindex="0" class="PwzrSelect-root-212 PwzrSelect-select-213 PwzrSelect-selectMenu-216 PwzrSelect-outlined-215 PwzrInputBase-input-248 PwzrOutlinedInput-input-232">
1 Moderate equalAccess list_markup_review
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Verify this is a list and if so, modify to use proper HTML elements for the list
Mode: light
<h2>

🔧 Most Common Issues (AccessLint)

5 rules
310 Moderate accesslint text-alternatives/img-alt
64 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Image element missing alt attribute.
Mode: light
<img srcset="https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/180x/ 180w,https://i.shgcdn.com/a986db53-eec7-47a9-8774-b99477c663c4/-/resize/360x/ 360w,https://i.shgcdn.com/a986db53-e...
XPath: #s-858eb633-1ae4-4a92-9cd5-7a7ba2035422 > div:nth-of-type(1) > div > img
Example 2 View on Page
Image element missing alt attribute.
Mode: light
<img srcset="https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/180x/ 180w,https://i.shgcdn.com/85968a7b-bbcb-4e4f-8d02-94f6dff32565/-/resize/360x/ 360w,https://i.shgcdn.com/85968a7b-b...
XPath: #s-0772ec8f-b3d3-4309-9e90-bb81dc183a02 > div:nth-of-type(1) > div > img
Example 3 View on Page
Image element missing alt attribute.
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208">
XPath: div:nth-of-type(2) > div:nth-of-type(1) > img
Example 4 View on Page
Image element missing alt attribute.
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/usa-icon.PNG?2807102045077662897">
XPath: div:nth-of-type(2) > img
Example 5 View on Page
Image element missing alt attribute.
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/recycle-icon.PNG?157872935954425060">
XPath: div:nth-of-type(3) > img
90 Moderate accesslint landmarks/region
75 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Content is not contained within a landmark region.
Mode: light
<div class="hidden shg-lightbox"><span class="shg-lightbox-close">×</span><div class="shg-lightbox-nav shg-nav-left hidden"></div><div class="shg-lightbox-content"> <div class="shg-lightbox-image-co...
XPath: #shave-5-systems > div:nth-of-type(4)
Example 2 View on Page
Content is not contained within a landmark region.
Mode: light
<div id="AjaxifyModal" class="ajaxcart ajaxcart--modal"><button type="button" class="ajaxcart__close" title="Close Cart">Close Cart</button> <div id="AjaxifyCart" class="ajaxcart__content" role=...
XPath: #AjaxifyModal
Example 3 View on Page
Content is not contained within a landmark region.
Mode: light
<div id="AjaxifyModal" class="ajaxcart ajaxcart--modal"><button type="button" class="ajaxcart__close" title="Close Cart">Close Cart</button> <div id="AjaxifyCart" class="ajaxcart__content" role=...
XPath: #AjaxifyModal
Example 4 View on Page
Content is not contained within a landmark region.
Mode: light
<div id="AjaxifyModal" class="ajaxcart ajaxcart--modal"><button type="button" class="ajaxcart__close" title="Close Cart">Close Cart</button> <div id="AjaxifyCart" class="ajaxcart__content" role=...
XPath: #AjaxifyModal
Example 5 View on Page
Content is not contained within a landmark region.
Mode: light
<div id="AjaxifyModal" class="ajaxcart ajaxcart--modal"><button type="button" class="ajaxcart__close" title="Close Cart">Close Cart</button> <div id="AjaxifyCart" class="ajaxcart__content" role=...
XPath: #AjaxifyModal
7 Moderate accesslint distinguishable/color-contrast
5 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Insufficient color contrast ratio of 4.37:1 (required 4.5:1).
Mode: light
<span style="color: rgb(0, 125, 204);">Our summer sale is here! <strong>30% off</strong> almost everything. Now through 8/9. Enter <strong>SUMMER30</strong> at checkout.</span>
XPath: p:nth-of-type(1) > span
Example 2 View on Page
Insufficient color contrast ratio of 4.37:1 (required 4.5:1).
Mode: light
<strong>30% off</strong>
XPath: span > strong:nth-of-type(1)
Example 3 View on Page
Insufficient color contrast ratio of 4.37:1 (required 4.5:1).
Mode: light
<strong>SUMMER30</strong>
XPath: span > strong:nth-of-type(2)
Example 4 View on Page
Insufficient color contrast ratio of 4.28:1 (required 4.5:1).
Mode: light
<a href="https://www.preserveproducts.com/explore/preserve-compostables" style="box-sizing: border-box; color: #0280c6;">here</a>
XPath: p:nth-of-type(2) > a[href="https://www.preserveproducts.com/explore/preserve-compostables"]
Example 5 View on Page
Insufficient color contrast ratio of 1.96:1 (required 4.5:1).
Mode: light
<span id="AddToCartText-product">Out of Stock</span>
XPath: #AddToCartText-product
4 Moderate accesslint navigable/heading-order
4 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Heading level 5 skipped from level 2. Use h3 instead.
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: div > h5
Example 2 View on Page
Heading level 5 skipped from level 2. Use h3 instead.
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: div > h5
Example 3 View on Page
Heading level 5 skipped from level 2. Use h3 instead.
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: div > h5
Example 4 View on Page
Heading level 5 skipped from level 2. Use h3 instead.
Mode: light
<h5 class="uppercase h5">Tags</h5>
XPath: div > h5

🔧 Most Common Issues (QualWeb)

7 rules
75 Moderate qualweb QW-ACT-R30: The complete visible text content of the test target neither matches or is contained within its accessible name.
75 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The complete visible text content of the test target neither matches or is contained within its accessible name.
Mode: light
Example 2 View on Page
The complete visible text content of the test target neither matches or is contained within its accessible name.
Mode: light
Example 3 View on Page
The complete visible text content of the test target neither matches or is contained within its accessible name.
Mode: light
Example 4 View on Page
The complete visible text content of the test target neither matches or is contained within its accessible name.
Mode: light
Example 5 View on Page
The complete visible text content of the test target neither matches or is contained within its accessible name.
Mode: light
75 Moderate qualweb QW-ACT-R76: Element has contrast ratio lower than minimum.
75 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 2 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 3 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 4 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 5 View on Page
Element has contrast ratio lower than minimum.
Mode: light
71 Moderate qualweb QW-ACT-R28: The test target has unlisted required states or properties.
71 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The test target has unlisted required states or properties.
Mode: light
Example 2 View on Page
The test target has unlisted required states or properties.
Mode: light
Example 3 View on Page
The test target has unlisted required states or properties.
Mode: light
Example 4 View on Page
The test target has unlisted required states or properties.
Mode: light
Example 5 View on Page
The test target has unlisted required states or properties.
Mode: light
64 Moderate qualweb QW-ACT-R17: The test target doesn't have an accessible name.
64 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The test target doesn't have an accessible name.
Mode: light
Example 2 View on Page
The test target doesn't have an accessible name.
Mode: light
Example 3 View on Page
The test target doesn't have an accessible name.
Mode: light
Example 4 View on Page
The test target doesn't have an accessible name.
Mode: light
Example 5 View on Page
The test target doesn't have an accessible name.
Mode: light
60 Moderate qualweb QW-ACT-R37: Element has contrast ratio lower than minimum.
60 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 2 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 3 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 4 View on Page
Element has contrast ratio lower than minimum.
Mode: light
Example 5 View on Page
Element has contrast ratio lower than minimum.
Mode: light
6 Moderate qualweb QW-ACT-R12: The test target doesn't have an accessible name, or it's empty ('').
6 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The test target doesn't have an accessible name, or it's empty ('').
Mode: light
Example 2 View on Page
The test target doesn't have an accessible name, or it's empty ('').
Mode: light
Example 3 View on Page
The test target doesn't have an accessible name, or it's empty ('').
Mode: light
Example 4 View on Page
The test target doesn't have an accessible name, or it's empty ('').
Mode: light
Example 5 View on Page
The test target doesn't have an accessible name, or it's empty ('').
Mode: light
2 Moderate qualweb QW-ACT-R25: The `aria-expanded` property is neither inherited nor supported by the `role` searchbox.
2 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The `aria-expanded` property is neither inherited nor supported by the `role` searchbox.
Mode: light
Example 2 View on Page
The `aria-expanded` property is neither inherited nor supported by the `role` searchbox.
Mode: light