Accessibility Scan Report

Title: Preserve Crawl Chunk 1 4/6/26 Issue: #244 Date: 4/6/2026, 6:33:50 PM Duration: 23.7m URLs: 50 / 50 🖥️ Forced Colors: 49 / 50 URLs

Summary

Issues

  • By Level: A (98), AA (483), AAA (49)
  • By Version (A & AA): WCAG 2.0 (103), WCAG 2.2 (478)
  • By Category: axe-strict (102) & Best Practice (2) & Others (2962)
  • Total: 3066 across 60 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 Bowl | 4 Count 153
Preserve Everyday Bowl | 4 Count 151
Toothbrush in Lightweight Paper Packaging - Surprise Colors | 3 Pack – Preserve 142
Preserve Medium Weight Cutlery | Knives, Forks, Spoons | 8 sets 139
Preserve Ocean Plastic Initiative (POPi) 106
Preserve Toothbrush in Lightweight Pouch | Single 166
Preserve Kids Toothbrush | Single 164
Preserve Toothbrush in Lightweight Pouch | 6-pack 156
Preserve Kids Toothbrush | Single 146
UTEC Cutting Board | Small – Preserve 102

🔧 Most Common Issues (ALFA)

12 rules
478 Serious alfa SC 2.5.8 AA Motor SIA-R111: Interactive elements have a sufficient target size
49 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
<a href="/account">...</a>
XPath: /a
Example 5 View on Page
Target has insufficient size
Mode: light
<a href="/collections" class="nav-link">Shop</a>
XPath: /a[@class="nav-link"]
49 Moderate alfa SC 1.4.6 AAA Visual SIA-R66: Text has enhanced contrast with its background
49 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
35 Moderate alfa SIA-R72
25 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"> Preserve Hoodie| Pact® | Lighter Footprin...</p>
XPath: /p[@class="h6 name_wrapper"]
Example 2 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="h6 name_wrapper"> Compostable Straws | 50 Count </p>
XPath: /p[@class="h6 name_wrapper"]
Example 3 View on Page
The text of the paragraph is uppercased
Mode: light
<p class="h6 name_wrapper"> Food Storage Set | 6 containers </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"> Small On The Go Plates | 10 Count (Discon...</p>
XPath: /p[@class="h6 name_wrapper"]
28 Moderate alfa SIA-R73: Text spacing can be adjusted without loss of content
26 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"> Preserve Hoodie| Pact® | Lighter Footprin...</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"> Compostable Straws | 50 Count </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"> Food Storage Set | 6 containers </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"> Shave 5 Razor System | Handle & 1 Blade ...</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"> Small On The Go Plates | 10 Count (Discon...</p>
XPath: /p[@class="h6 name_wrapper"]
16 Moderate alfa SIA-R113
12 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
<a href="https://cdn.shopify.com/s/files/1/2372/0029/files/2019_MacArthur_Progress_Report_FINAL.pdf?v=1596806045" target="_blank">–</a>
XPath: /a
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-14fd8e85-afb9-4201-9d72-5942ad69bf86" 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-14fd8e85-afb9-4201-9d72-5942ad69bf86"]
Example 3 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-814 PwzrButton-root-785 PwzrButton-text-787 rio-swatch-border-double-b3bbf5bb-f170-47f1-bd5c-a7af211b1a85" 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-814 PwzrButton-root-785 PwzrButton-text-787 rio-swatch-border-double-b3bbf5bb-f170-47f1-bd5c-a7af211b1a85"]
Example 4 View on Page
Target has insufficient size and spacing
Mode: light
<div class="PwzrButtonBase-root-1568 PwzrButton-root-1539 PwzrButton-text-1541 rio-swatch-border-double-02610190-1fce-45fe-acfb-9623717ec7f4" tabindex="0" role="button" aria-disabled="false" aria-label="Funky Fuchsia" data-option-value="Funky Fuchsia" style="position: relative; background-color: rgb(175, 8, 103); 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-1568 PwzrButton-root-1539 PwzrButton-text-1541 rio-swatch-border-double-02610190-1fce-45fe-acfb-9623717ec7f4"]
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-33ca1950-38be-4acc-a814-e8f3a3e88f19" 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-33ca1950-38be-4acc-a814-e8f3a3e88f19"]
16 Moderate alfa SIA-R68: Accessible name contains the visible label text
10 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
<fieldset class="bsub-widget" role="radiogroup" data-bsub-widget="">...</fieldset>
XPath: /fieldset[@class="bsub-widget"]
Example 2 View on Page
The element owns no elements as required by its semantic role
Mode: light
<ul />
XPath: /ul
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
<fieldset class="bsub-widget" role="radiogroup" data-bsub-widget="">...</fieldset>
XPath: /fieldset[@class="bsub-widget"]
11 Serious alfa SC 3.1.1 A Cognitive SIA-R2: HTML elements have a valid lang attribute
11 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 class="parallax-slider" src="//www.preserve.eco/cdn/shop/collections/collect-header3-50_bca3e9cc-2ac8-48bb-89e6-bedc57cd047f_1800x.jpg?v=1517178503" style="transform: translate3d(-222px, -78.8125px, 0px); position: absolute; height: 505px; width: 1724px; max-width: none;" />
XPath: /img[@class="parallax-slider"]
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 src="https://cdn.shopify.com/s/files/1/2372/0029/files/bcorp-icon.PNG?6054642618249289208" />
XPath: /img
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
3 Critical alfa SC 4.1.2 A Visual Motor Cognitive SIA-R11: Button elements have an accessible name
2 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://www.preserve.eco/collections/popi">...</a>
XPath: /a[@class="shogun-image-link"]
Example 2 View on Page
The link does not have an accessible name
Mode: light
<a class="shg-social-element" data-icon="facebook-square" data-link="https://www.facebook.com/preserveproducts" target="_blank" " href="https://www.facebook.com/preserveproducts" style="margin-right: 0px;">...</a>
XPath: /a[@class="shg-social-element"]
Example 3 View on Page
The link does not have an accessible name
Mode: light
<a href="#looxReviews">...</a>
XPath: /a
2 Moderate alfa Best Practice SIA-R53: Headings follow a logical hierarchy
2 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
<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
The heading skips one or more levels
Mode: light
<h3>Terms of Use</h3>
XPath: /h3
2 Moderate alfa SIA-R78: Headings of same level have text content between them
2 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
<h1>...</h1>
XPath: /h1
2 Serious alfa SC 1.4.3 AA Visual SIA-R69: Text has sufficient contrast with its background
2 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 3.24: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 2.06:1 which is below the required contrast of 4.5:1
Mode: light
1 Moderate alfa SIA-R80: ASCII art has a text alternative
1 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The line height is specified using an absolute unit
Mode: light
<p style="text-align: right; line-height: 8px;">...</p>
XPath: /p

🔧 Most Common Issues (axe)

9 rules
49 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.
11 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 class="parallax-slider" src="//www.preserve.eco/cdn/shop/collections/collect-header3-50_bca3e9cc-2ac8-48bb-89e6-bedc57cd047f_1800x.jpg?v=1517178503" style="transform: translate3d(0px, -99.8125px, 0px); position: absolute; height: 374px; width: 1280px; max-width: none;">
XPath: .parallax-slider
Example 2 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 3 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 4 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
Example 5 View on Page
Images must have alternative text
Mode: light
<img src="https://cdn.shopify.com/s/files/1/2372/0029/files/gimme5-icon.PNG?157872935954425060">
XPath: .tooltip:nth-child(4) > img
18 Critical axe SC 4.1.2 A Visual Motor Cognitive label: Ensures every form input has an associated label. Without labels, screen reader users cannot understand what information a form field requires.
6 pages affected

Rule Information

Engine: axe

Roles: Front-End Developer, UX Designer

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
Form elements must have labels
Mode: light
<input name="esc_cf_t" type="text" class="esc--1337">
XPath: input[name="esc_cf_t"]
Example 2 View on Page
Form elements must have labels
Mode: light
<input type="email" class="esc--1337">
XPath: .esc--1337[type="email"]
Example 3 View on Page
Form elements must have labels
Mode: light
<input type="text" class="esc--1337">
XPath: .esc--1337[type="text"]:nth-child(3)
Example 4 View on Page
Form elements must have labels
Mode: light
<input name="esc_cf_t" type="text" class="esc--1337">
XPath: input[name="esc_cf_t"]
Example 5 View on Page
Form elements must have labels
Mode: light
<input type="email" class="esc--1337">
XPath: .esc--1337[type="email"]
10 Moderate axe aria-allowed-role
10 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: 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: 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 / 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: 4.5 / 5 star review" role="img" aria-roledescription="figure">
XPath: #looxReviewsFrame
10 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.
10 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
3 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
<a id="s-fccac842-8595-4255-b8bd-bfd4ca9356a9" class="shg-btn shg-cse shg-btn-text " href="https://www.preserve.eco/collections/preserve"> SHOP COMPOSTABLES </a>
XPath: #s-fccac842-8595-4255-b8bd-bfd4ca9356a9
Example 2 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: light
<a id="s-2b831de7-c735-4151-8ae3-96b081ff843f" class="shg-btn shg-cse shg-btn-text " href="https://www.preserve.eco/collections/popi/products/popi-toothbrush-single"> Order Now </a>
XPath: #s-2b831de7-c735-4151-8ae3-96b081ff843f
Example 3 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: light
<a id="s-31cb5dad-06fd-453e-b1e3-e8f04e60303c" class="shg-btn shg-cse shg-btn-text " href="https://www.preserve.eco/collections/popi/products/popi-shave-5-razor-system-handle-1-blade"> Order Now </a>
XPath: #s-31cb5dad-06fd-453e-b1e3-e8f04e60303c
3 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.
3 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
2 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.
2 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
<h3 class="h3 blog__article__title">Waste Warriors: POPi Partner Stepping in Where There’s No Formal Waste Collection Infrastructure</h3>
XPath: .large--one-third.grid__item:nth-child(1) > .blog__link > .blog__article.blog__article--card.blog__article--image > .blog__article__content.equalHeightColumn > h3
Example 2 View on Page
Heading levels should only increase by one
Mode: light
<h3>Terms of Use</h3>
XPath: h3:nth-child(1)
2 Moderate axe SC 4.1.2 A Visual Motor Cognitive aria-prohibited-attr
1 pages affected

Rule Information

Engine: axe

Roles: Front-End Developer

Blocking: No

WCAG: SC 4.1.2 A

Disabilities affected:
Visual Motor Cognitive

Affected Pages

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
Elements must only use permitted ARIA attributes
Mode: light
<div class="html5-video-player ytp-hide-controls ytp-exp-bottom-control-flexbox ytp-modern-caption ytp-livebadge-color unstarted-mode ytp-large-width-mode" tabindex="" id="movie_player" data-version="/s/player/8c83ec2e/player_embed.vflset/en_US/base.js" aria-label="YouTube Video Player">
XPath: iframe[loading="eager"]
Example 2 View on Page
Elements must only use permitted ARIA attributes
Mode: light
<div class="html5-video-player ytp-hide-controls ytp-exp-bottom-control-flexbox ytp-modern-caption ytp-livebadge-color unstarted-mode ytp-large-width-mode" tabindex="" id="movie_player" data-version="/s/player/8c83ec2e/player_embed.vflset/en_US/base.js" aria-label="YouTube Video Player">
XPath: #s-d7ab9102-9018-450c-826c-e5d616c8d2f1 > .shogun-video.shogun-video-16x9 > .video-wrapper > .shogun-video-embed[allowfullscreen=""][title="Embedded Youtube Video"]

🔧 Most Common Issues (Equal Access)

25 rules
564 Moderate equalAccess style_focus_visible: An element's focused state must be visually apparent
49 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
<input name="q" aria-label="Search Bar" type="search" class="search-bar">
Example 4 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 5 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">
491 Moderate equalAccess element_tabbable_visible: A tabbable element must be visible on the page
49 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">
235 Moderate equalAccess input_label_visible: An input element must have an associated visible label
49 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">
127 Moderate equalAccess text_block_heading: Blocks of text that serve as headings should be marked up as headings
49 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 '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 4 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 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>
109 Moderate equalAccess aria_role_redundant: ARIA role is redundant with the native role of the element
49 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 "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 5 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">
103 Moderate equalAccess element_tabbable_unobscured: A tabbable element should not be entirely obscured by overlapping content
24 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
<a href="/account">
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
<input name="q" aria-label="Search Bar" type="search" class="search-bar">
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
<button aria-label="Search" class="btn search-btn" type="submit">
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="https://www.isri.org/recycling-commodities/economy">
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
<a target="_blank" href="https://www.epa.gov/smm/recycling-economic-information-rei-report">
72 Moderate equalAccess element_attribute_deprecated: Deprecated HTML attributes should not be used
49 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) "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 4 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 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">
49 Moderate equalAccess style_color_misuse: Color must not be used as the only visual means of conveying information
49 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
<link media="all" type="text/css" rel="stylesheet" href="//www.preserve.eco/cdn/shop/t/40/assets/style.scss.css?v=31266567418381038671774644541">
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">
49 Moderate equalAccess style_highcontrast_visible: Elements must be visible in Windows High Contrast mode
49 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
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
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">
49 Moderate equalAccess img_alt_valid
11 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 style="transform: translate3d(-85px, -54.075px, 0px); position: absolute; height: 284px; width: 970px; max-width: none;" src="//www.preserve.eco/cdn/shop/collections/collect-header3-50_bca3e9cc-2ac8-48bb-89e6-bedc57cd047f_1800x.jpg?v=1517178503" class="parallax-slider">
Example 2 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 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/usa-icon.PNG?2807102045077662897">
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/recycle-icon.PNG?157872935954425060">
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/gimme5-icon.PNG?157872935954425060">
23 Moderate equalAccess text_sensory_misuse: Instructions must not rely solely on sensory characteristics
17 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm the word(s) 'lower' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<p>
Example 2 View on Page
Confirm the word(s) 'top' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<p>
Example 3 View on Page
Confirm the user instruction is still understandable without the word(s) 'little'
Mode: light
<p style="text-align: center;">
Example 4 View on Page
Confirm the word(s) 'below' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<p>
Example 5 View on Page
Confirm the word(s) 'below' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<strong>
20 Moderate equalAccess aria_form_label_unique
10 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">
16 Moderate equalAccess text_contrast_sufficient: Contrast ratio of text against its background must meet minimum requirements
4 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The foreground text and its background color are both detected as #ffffff. Verify the text meets the WCAG AA requirements for minimum contrast
Mode: light
<h2>
Example 2 View on Page
The foreground text and its background color are both detected as #ffffff. Verify the text meets the WCAG AA requirements for minimum contrast
Mode: light
<strong>
Example 3 View on Page
The foreground text and its background color are both detected as #ffffff. Verify the text meets the WCAG AA requirements for minimum contrast
Mode: light
<p style="text-align: center;">
Example 4 View on Page
The foreground text and its background color are both detected as #ffffff. Verify the text meets the WCAG AA requirements for minimum contrast
Mode: light
<span style="color: null;">
Example 5 View on Page
Text contrast of 3.24 with its background is less than the WCAG AA minimum requirements for text of size 14px and weight of 400
Mode: light
<a href="https://www.preserve.eco/collections/preserve" class="shg-btn shg-cse shg-btn-text " id="s-fccac842-8595-4255-b8bd-bfd4ca9356a9">
16 Moderate equalAccess aria_child_valid
10 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 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 2 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>
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 "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">
12 Moderate equalAccess frame_src_valid: The src value of the frame must not be empty
11 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 loading="eager" title="Embedded Youtube Video" allowfullscreen="" src="https://www.youtube.com/embed/iw7r6eWCP5A?start=0&end=0&autoplay=0&loop=0&rel=1" class="shogun-video-embed">
Example 2 View on Page
Verify <frame> content is accessible
Mode: light
<iframe loading="lazy" title="Embedded Youtube Video" allowfullscreen="" src="https://www.youtube.com/embed/zXd5RZ2vBDs?start=0&end=0&autoplay=0&loop=0&rel=1" class="shogun-video-embed">
Example 3 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1743px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1743px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512362251?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 4 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 1896px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="1896px" src="https://loox.io/widget/4JZEXBcfNh/reviews/12512363403?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
Example 5 View on Page
Verify <frame> content is accessible
Mode: light
<iframe style="overflow: hidden; height: 898px; width: 100%; box-shadow: unset; outline: unset; color-scheme: none;" margin="0" scrolling="no" frameborder="0" width="100%" height="898px" src="https://loox.io/widget/4JZEXBcfNh/reviews/7843342385395?h=1775493605806" title="Reviews widget" id="looxReviewsFrame">
10 Moderate equalAccess label_ref_valid
10 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">
10 Moderate equalAccess element_id_unique: Element IDs must be unique within a page
10 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" mm-max="5" max="5" 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" mm-max="20" max="20" 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-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">
10 Moderate equalAccess aria_complementary_labelled: Each element with a complementary role must have an accessible name
10 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">
8 Moderate equalAccess aria_keyboard_handler_exists
8 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Verify the <input> element with "combobox" role has keyboard access
Mode: light
<input autocomplete="off" autocapitalize="off" autocorrect="off" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" name="q" aria-label="Search Bar" type="search" class="search-bar snize-input-style">
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 <input> element with "combobox" role has keyboard access
Mode: light
<input autocomplete="off" autocapitalize="off" autocorrect="off" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" name="q" aria-label="Search Bar" type="search" class="search-bar snize-input-style">
5 Moderate equalAccess widget_tabbable_exists
5 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

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">
4 Moderate equalAccess a_text_purpose: Link text must identify the purpose of the link
2 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://www.preserve.eco/collections/popi" class="shogun-image-link">
Example 2 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a style="margin-right: 0px;" href="https://www.facebook.com/preserveproducts" target="_blank" " data-link="https://www.facebook.com/preserveproducts" data-icon="facebook-square" class="shg-social-element">
Example 3 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a style="margin-right: 0px;" href="https://www.instagram.com/preserveproducts/" target="_blank" " data-link="https://www.instagram.com/preserveproducts/" data-icon="instagram" class="shg-social-element">
Example 4 View on Page
Hyperlink has no link text, label or image with a text alternative
Mode: light
<a href="#looxReviews">
3 Moderate equalAccess aria_role_valid
3 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The ARIA role 'combobox' is not valid for the element <input>
Mode: light
<input autocomplete="off" autocapitalize="off" autocorrect="off" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" name="q" aria-label="Search Bar" type="search" class="search-bar snize-input-style">
Example 2 View on Page
The ARIA role 'combobox' is not valid for the element <input>
Mode: light
<input autocomplete="off" autocapitalize="off" autocorrect="off" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" name="q" aria-label="Search Bar" type="search" class="search-bar snize-input-style">
Example 3 View on Page
The ARIA role 'combobox' is not valid for the element <input>
Mode: light
<input autocomplete="off" autocapitalize="off" autocorrect="off" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" name="q" aria-label="Search Bar" type="search" class="search-bar snize-input-style">
2 Moderate equalAccess heading_markup_misuse: Heading markup should be used only for headings, not for formatting
2 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Verify that the heading element is a genuine heading
Mode: light
<h3 class="h3 blog__article__title">
Example 2 View on Page
Verify that the heading element is a genuine heading
Mode: light
<h1>
1 Moderate equalAccess table_headers_exists
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Table has no headers identified
Mode: light
<table style="width: 500px;" cellspacing="1" cellpadding="1" border="0">
1 Moderate equalAccess text_quoted_correctly
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: " x 10"
Mode: light
<li>

🔧 Most Common Issues (AccessLint)

7 rules
71 Moderate accesslint landmarks/region
49 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: #overview > 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 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: #plastics-with-a-purpose > div:nth-of-type(4)
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
50 Moderate accesslint text-alternatives/img-alt
12 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 class="parallax-slider" src="//www.preserve.eco/cdn/shop/collections/collect-header3-50_bca3e9cc-2ac8-48bb-89e6-bedc57cd047f_1800x.jpg?v=1517178503" style="transform: translate3d(0px, -99.8125px,...
XPath: div:nth-of-type(1) > img
Example 2 View on Page
Image element missing alt attribute.
Mode: light
<img class="shg-lightbox-image">
XPath: div:nth-of-type(6) > div:nth-of-type(2) > 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
18 Moderate accesslint labels-and-names/form-label
6 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Form element has no accessible label.
Mode: light
<input name="esc_cf_t" type="text" class="esc--1337">
XPath: div:nth-of-type(1) > input[name="esc_cf_t"]
Example 2 View on Page
Form element has no accessible label.
Mode: light
<input type="email" class="esc--1337">
XPath: div:nth-of-type(1) > input:nth-of-type(2)
Example 3 View on Page
Form element has no accessible label.
Mode: light
<input type="text" class="esc--1337">
XPath: div:nth-of-type(1) > input:nth-of-type(3)
Example 4 View on Page
Form element has no accessible label.
Mode: light
<input name="esc_cf_t" type="text" class="esc--1337">
XPath: div:nth-of-type(1) > input[name="esc_cf_t"]
Example 5 View on Page
Form element has no accessible label.
Mode: light
<input type="email" class="esc--1337">
XPath: div:nth-of-type(1) > input:nth-of-type(2)
9 Moderate accesslint distinguishable/color-contrast
3 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Insufficient color contrast ratio of 3.24:1 (required 4.5:1).
Mode: light
<a id="s-fccac842-8595-4255-b8bd-bfd4ca9356a9" class="shg-btn shg-cse shg-btn-text " href="https://www.preserve.eco/collections/preserve"> SHOP COMPOSTABLES </a>
XPath: #s-fccac842-8595-4255-b8bd-bfd4ca9356a9
Example 2 View on Page
Insufficient color contrast ratio of 2.06:1 (required 4.5:1).
Mode: light
<a id="s-2b831de7-c735-4151-8ae3-96b081ff843f" class="shg-btn shg-cse shg-btn-text " href="https://www.preserve.eco/collections/popi/products/popi-toothbrush-single"> Order Now </a>
XPath: #s-2b831de7-c735-4151-8ae3-96b081ff843f
Example 3 View on Page
Insufficient color contrast ratio of 2.06:1 (required 4.5:1).
Mode: light
<a id="s-31cb5dad-06fd-453e-b1e3-e8f04e60303c" class="shg-btn shg-cse shg-btn-text " href="https://www.preserve.eco/collections/popi/products/popi-shave-5-razor-system-handle-1-blade"> Order Now...
XPath: #s-31cb5dad-06fd-453e-b1e3-e8f04e60303c
Example 4 View on Page
Insufficient color contrast ratio of 3.32:1 (required 4.5:1).
Mode: light
<a id="s-dfc4472e-5a47-4824-8aaf-653e2c9f6ddf" class="shg-btn shg-cse " href="https://www.preserve.eco/pages/contact-us-online-order"> Online Orders </a>
XPath: #s-dfc4472e-5a47-4824-8aaf-653e2c9f6ddf
Example 5 View on Page
Insufficient color contrast ratio of 3.32:1 (required 4.5:1).
Mode: light
<a id="s-d2ef0af8-dc4e-470c-b667-a48b245a10b3" class="shg-btn shg-cse " href="https://www.preserve.eco/pages/contact-us-marketing-partnerships-donations"> Marketing Partnerships &amp; Donations ...
XPath: #s-d2ef0af8-dc4e-470c-b667-a48b245a10b3
2 Moderate accesslint navigable/heading-order
2 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Heading level 3 skipped from level 1. Use h2 instead.
Mode: light
<h3 class="h3 blog__article__title">Waste Warriors: POPi Partner Stepping in Where There’s No Formal Waste Collection Infrastructure</h3>
XPath: div:nth-of-type(1) > a > div > div:nth-of-type(2) > h3
Example 2 View on Page
Heading level 3 skipped from level 1. Use h2 instead.
Mode: light
<h3>Terms of Use</h3>
XPath: div > h3:nth-of-type(1)
1 Moderate accesslint labels-and-names/frame-title-unique
1 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Frame title is not unique. Use a distinct title for each frame.
Mode: light
<iframe class="shogun-video-embed" src="https://www.youtube.com/embed/zXd5RZ2vBDs?start=0&amp;end=0&amp;autoplay=0&amp;loop=0&amp;rel=1" allowfullscreen="" title="Embedded Youtube Video" loading="lazy...
XPath: #s-d7ab9102-9018-450c-826c-e5d616c8d2f1 > div > div > iframe

🔧 Most Common Issues (QualWeb)

7 rules
49 Moderate qualweb QW-ACT-R30: The complete visible text content of the test target neither matches or is contained within its accessible name.
49 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
49 Moderate qualweb QW-ACT-R76: Element has contrast ratio lower than minimum.
49 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
48 Moderate qualweb QW-ACT-R28: The test target has unlisted required states or properties.
48 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
11 Moderate qualweb QW-ACT-R37: Element has contrast ratio lower than minimum.
11 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
11 Moderate qualweb QW-ACT-R17: The test target doesn't have an accessible name.
11 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
6 Moderate qualweb QW-ACT-R16: The test target accessible name doesn't exist 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 accessible name doesn't exist or it's empty ('').
Mode: light
Example 2 View on Page
The test target accessible name doesn't exist or it's empty ('').
Mode: light
Example 3 View on Page
The test target accessible name doesn't exist or it's empty ('').
Mode: light
Example 4 View on Page
The test target accessible name doesn't exist or it's empty ('').
Mode: light
Example 5 View on Page
The test target accessible name doesn't exist or it's empty ('').
Mode: light
2 Moderate qualweb QW-ACT-R12: The test target doesn't have an accessible name, or it's empty ('').
2 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