EVOLIZEDIGITAL RISK INTELLIGENCE
RUN FREE ASSESSMENT
RUN FREE ASSESSMENT
Public accessibility assessment

Accessibility issues detected on shadessunglasses.com

Evolize inspected 5 public pages on shadessunglasses.com and detected 29 automatically identifiable accessibility findings.

29Findings detected
7WCAG criteria affected
5Pages inspected
7 Sep 2026Assessment date

Highest detected severity: Critical · 9 high-priority findings · 100% inspected-page coverage

Most widespread issueText has insufficient colour contrastDetected on 5 inspected pages
Most affected page/products/southernpropersouthernstaplestee16 findings detected
Most represented WCAG criterionWCAG 2.4.3 — Focus Order11 detected findings

Is shadessunglasses.com your website?

Keep this assessment current and get notified when new accessibility issues are detected.

ACTIVATE MONITORINGRUN A FREE ASSESSMENT
https://

Not your website? Scan your own site →

01 · Accessibility summary

Evolize inspected 5 public pages on shadessunglasses.com and detected 29 accessibility findings. The most widespread issue was "Text has insufficient colour contrast", detected on 5 inspected pages. The most affected inspected page was "/products/southernpropersouthernstaplestee", where 16 findings were detected. The assessment identified findings mapped to 7 WCAG success criterions. The sections below prioritize the broadest issues and provide technical evidence for each detected finding.

02 · Start here

These findings combine the highest severity and broadest reach detected during this assessment.

  1. Critical

    Links lack accessible text

    WCAG 2.4.4 (A) · 1 inspected page · 1 instance
    Why this matters

    Links expose no accessible name, so screen-reader users cannot determine their destination.

    Recommended action

    This link exposes no accessible text. Add visible text that identifies its destination, or remove the link if it serves no purpose. For an icon-only link, provide an aria-label describing where it goes. The link points to /collections/luxottica.

    View technical evidence →
  2. High

    Text has insufficient colour contrast

    WCAG 1.4.3 (AA) · 5 inspected pages · 5 instances
    Why this matters

    Text and background colours do not meet the minimum contrast ratio, reducing legibility.

    Recommended action

    To improve legibility, adjust the colors of the text and background to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. This can be achieved by changing the CSS styles for the .navigation__link class to use a color combination with sufficient contrast.

    View technical evidence →
  3. High

    Text has insufficient colour contrast

    WCAG 1.4.3 (AA) · 5 inspected pages · 5 instances
    Why this matters

    Text and background colours do not meet the minimum contrast ratio, reducing legibility.

    Recommended action

    To improve readability, consider increasing the contrast between the text color and background color. This can be achieved by changing the CSS styles for the .announcement__text class or the --text-color variable to a darker or lighter shade that meets the minimum contrast ratio thresholds as per WCAG 2.1 SC 1.4.3.

    View technical evidence →
  4. High

    Interactive controls must not be nested

    WCAG 4.1.2 (A) · 5 inspected pages · 5 instances
    Why this matters

    Interactive controls must not be nested

    Recommended action

    To fix this issue, ensure that interactive controls, such as buttons, are not nested within other interactive elements. Inspect the HTML structure of the 'Open for you tab' button and remove any unnecessary interactive elements that contain it.

    View technical evidence →
  5. High

    Summary elements must have discernible text

    WCAG 4.1.2 (A) · 3 inspected pages · 3 instances
    Why this matters

    Summary elements must have discernible text

    Recommended action

    Add discernible text to the summary element, for example by adding text content to the div with class 'section-footer__title heading-font h6' or by using an aria-label attribute on the summary element.

    View technical evidence →

03 · WCAG criteria affected

CriterionNameLevelFindingsPagesReach
2.4.3Focus OrderA1144 / 5
1.4.3Contrast (Minimum)AA755 / 5
4.1.2Name, Role, ValueA555 / 5
2.1.1KeyboardA222 / 5
2.5.8Target Size (Minimum)AA255 / 5
1.2.2Captions (Prerecorded)A111 / 5
2.4.4Link Purpose (In Context)A111 / 5

Absence of a criterion here does not indicate conformance with it — only that no automatically detectable issue was found for it.

Continuous monitoring

A scan shows today's exposure. Monitoring shows what changes next.

Evolize continuously reassesses public website pages, detects newly introduced or recurring accessibility findings, and tracks remediation over time.

ACTIVATE MONITORINGSEE PRICING

04 · All detected findings

High

Text has insufficient colour contrast

WCAG 1.4.3 (AA)16 instances5 inspected pages

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Why it matters

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Recommended correction

To improve readability, consider increasing the contrast between the text color and background color. This can be achieved by changing the CSS styles for the .announcement__text class or the --text-color variable to a darker or lighter shade that meets the minimum contrast ratio thresholds as per WCAG 2.1 SC 1.4.3.

View 16 affected elements
Component · Ref LSLQTK
Affected pagehttps://shadessunglasses.com/cart
Element.announcement__text
Accessible nameFree Shipping Over $40
Markup
<div class="announcement__text">
                  Free Shipping Over $40

                  
                </div>
Affected pages/ /products/gift-card /products/southernpropersouthernstaplestee /pages/terms-of-service /cart
Component · Ref 2ED3P6
Affected pagehttps://shadessunglasses.com/pages/terms-of-service
Elementa[aria-controls="NavigationTier2-11"]
Accessible nameSale
Markup
<a href="/collections/all-swim" class="navigation__link" aria-haspopup="true" aria-expanded="false" aria-controls="NavigationTier2-11">Sale</a>
Affected pages/ /products/gift-card /products/southernpropersouthernstaplestee /pages/terms-of-service /cart
Component · Ref KPWY8Y
Affected pagehttps://shadessunglasses.com/products/gift-card
Elementa[href$="shades-sunglasses"]
Accessible nameShades Sunglasses
Markup
<a class="underline" href="/collections/shades-sunglasses">Shades Sunglasses</a>
Affected pages/products/gift-card /products/southernpropersouthernstaplestee
Component · Ref DPVFZR
Affected pagehttps://shadessunglasses.com/pages/terms-of-service
Element.ProsemirrorEditor-link
Accessible name[email removed]
Markup
<a class="ProsemirrorEditor-link" href="mailto:[email removed]">[email removed]</a>
Component · Ref WMRNWC
Affected pagehttps://shadessunglasses.com/pages/terms-of-service
Element.c-link
Accessible name[email removed]
Markup
<a class="c-link" data-stringify-link="mailto:[email removed]" data-sk="tooltip_parent" aria-haspopup="menu" href="mailto:[email removed]" target="_blank" delay="150">[email removed]</a>
Component · Ref AXFZ7M
Affected pagehttps://shadessunglasses.com/products/gift-card
Element.btn--large.add-to-cart[name="add"]
Accessible nameAdd to cart
Markup
<button class="btn btn--large add-to-cart" type="submit" name="add" data-add-to-cart-text="Add to cart" data-fsb-cart-click-listener-added="true">Add to cart</button>
Component · Ref EV82LC
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Element.opt-label--btn.text-center.opt-label:nth-child(2) > .js-value
Accessible nameSmall
Markup
<span class="js-value">Small</span>
High

Interactive controls must not be nested

WCAG 4.1.2 (A)5 instances5 inspected pages

Interactive controls must not be nested

Why it matters

Interactive controls must not be nested

Recommended correction

To fix this issue, ensure that interactive controls, such as buttons, are not nested within other interactive elements. Inspect the HTML structure of the 'Open for you tab' button and remove any unnecessary interactive elements that contain it.

View 5 affected elements
Component · Ref JGL12H
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Element.HubLauncherButton-button-zMGOT
Accessible nameOpen for you tab
Markup
<button type="button" aria-label="Open for you tab" class="HubLauncherButton-bu..." style="--kl-local-widget-co...">
Affected pages/ /products/gift-card /products/southernpropersouthernstaplestee /pages/terms-of-service /cart
High

Summary elements must have discernible text

WCAG 4.1.2 (A)5 instances5 inspected pages

Summary elements must have discernible text

Why it matters

Summary elements must have discernible text

Recommended correction

Add discernible text to the summary element, for example by adding text content to the div with class 'section-footer__title heading-font h6' or by using an aria-label attribute on the summary element.

View 5 affected elements
Component · Ref 4IJ8S9
Affected pagehttps://shadessunglasses.com/pages/terms-of-service
Elementsummary
Markup
<summary class="mobile-disclosure__title" tabindex="-1">
                  <div class="section-footer__title heading-font h6"></div>
                </summary>
Affected pages/ /pages/terms-of-service /cart
Component · Ref ASIDLD
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Element.mobile-disclosure__title
Markup
<summary class="mobile-disclosure__title" tabindex="-1">
                  <div class="section-footer__title heading-font h6"></div>
                </summary>
Affected pages/products/gift-card /products/southernpropersouthernstaplestee
High

Interactive controls are not keyboard-accessible

WCAG 2.1.1 (A)3 instances2 inspected pages

A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.

Why it matters

A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.

Recommended correction

Add a tabindex to the element or ensure it has focusable semantics, and remove the aria-hidden attribute to make the control accessible to keyboard and switch users.

View 3 affected elements
Component · Ref J12IPX
Affected pagehttps://shadessunglasses.com/cart
Elementdiv#dynamic-checkout-cart > shopify-accelerated-checkout-cart > div > ul > li:nth-of-type(1) > div
Rolebutton
Markup
<div class="wallet-cart-button wallet-cart-button__skeleton" role="button" disabled="" aria-hidden="true">&nbsp;</div>
Component · Ref NEFXIV
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Elementa#more-payment-options-link
Accessible nameMore payment options
Rolelink
Markup
<a class="shopify-payment-button__more-options" id="more-payment-options-link" role="link" aria-disabled="true">More payment options</a>
High

Modal dialog does not trap keyboard focus

WCAG 2.4.3 (A)1 instance1 inspected page

An open modal leaves the content behind it keyboard-focusable, so keyboard and screen reader users can tab out of the dialog into hidden page content.

Why it matters

An open modal leaves the content behind it keyboard-focusable, so keyboard and screen reader users can tab out of the dialog into hidden page content.

Recommended correction

To fix this issue, ensure that the modal dialog traps keyboard focus. This can be achieved by setting the `tabindex` attribute to `-1` on the modal container and ensuring that all focusable elements within the modal have a `tabindex` attribute greater than or equal to `0`. Additionally, you can use JavaScript to manually manage focus and prevent it from escaping the modal.

View 1 affected element
Component · Ref RB4YYZ
Affected pagehttps://shadessunglasses.com/
Elementhtml > body > div:nth-of-type(14) > div > div:nth-of-type(2)
Accessible namePOPUP Form
Roledialog
Markup
<div role="dialog" aria-modal="true" aria-label="POPUP Form" class="needsclick  kl-private-reset-css-Xuajs1" data-kl-scroll-locking-modal="true" style="display: flex; z-index: 90000; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: clip auto; background-color: rgba(20, 20, 20, 0.6); animation-timing-function: ease; animation-play-state: running; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.35s; animation-name: klaviyo-fadein;"><div class="needsclick  kl-private-res…
Medium

ARIA attributes have invalid values

WCAG 4.1.2 (A)45 instances5 inspected pages

ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.

Why it matters

ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.

Recommended correction

Verify that the aria-controls attribute references an existing element in the DOM. Ensure that the referenced element has an ID that matches the value of the aria-controls attribute. Update the aria-controls attribute to reference a valid ID or remove it if it's not necessary.

View 45 affected elements
Component · Ref 349Z3B
Affected pagehttps://shadessunglasses.com/products/gift-card
Elementa[aria-controls="NavigationTier2-6"]
Accessible nameWomen
Markup
<a href="/collections/womens" class="navigation__link" aria-haspopup="true" aria-expanded="false" aria-controls="NavigationTier2-6">Women</a>
Affected pages/ /products/gift-card /products/southernpropersouthernstaplestee /pages/terms-of-service /cart
Medium

Touch targets are too small

WCAG 2.5.8 (AA)10 instances5 inspected pages

Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.

Why it matters

Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.

Recommended correction

Increase the size of the touch target to at least 24x24 pixels to make it easier for users to activate by touch. Consider adding sufficient space around the element if it cannot be resized.

View 10 affected elements
Component · Ref A31HDA
Affected pagehttps://shadessunglasses.com/pages/terms-of-service
Element.HubLauncherButton-messageContent-AfWf6
Accessible nameWelcome to Shades! 👋 How can we help you today?
Rolebutton
Markup
<div role="button" tabindex="0" class="HubLauncherButton-messageContent-AfWf6">
Affected pages/ /products/gift-card /products/southernpropersouthernstaplestee /pages/terms-of-service /cart
Component · Ref VP040Z
Affected pagehttps://shadessunglasses.com/products/gift-card
Element.HubLauncherButton-button-zMGOT
Accessible nameOpen for you tab
Markup
<button type="button" aria-label="Open for you tab" class="HubLauncherButton-bu..." style="--kl-local-widget-co...">
Affected pages/ /products/gift-card /products/southernpropersouthernstaplestee /pages/terms-of-service /cart
Medium

Hidden elements can still receive keyboard focus

WCAG 2.4.3 (A)33 instances4 inspected pages

An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

Why it matters

An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

Recommended correction

To fix this issue, ensure that the hidden radio input is removed from the tab order by setting its 'tabindex' attribute to '-1' or by using CSS to set its 'display' property to 'none'. Alternatively, make the element visible by removing the 'visually-hidden' class.

View 33 affected elements
Component · Ref KYE32L
Affected pagehttps://shadessunglasses.com/products/gift-card
Elementinput#product-form-template--22850865430753__main-1-opt-1
Markup
<input type="radio" class="opt-btn visually-hidden focus-label js-option" name="product-form-template--22850865430753__main-1-option" id="product-form-template--22850865430753__main-1-opt-1" value="$25.00" data-value-id="398734262497" data-variant-id="753142971" required="">
Affected pages/products/gift-card /products/southernpropersouthernstaplestee
Component · Ref NBWTB4
Affected pagehttps://shadessunglasses.com/cart
Elementdiv:nth-of-type(2) > div > div > div:nth-of-type(2) > div:nth-of-type(2) > a
Accessible nameContinue shopping
Markup
<a class="continue-shopping underline block lightly-spaced-row-above" href="">Continue shopping</a>
Affected pages/ /cart
Component · Ref MB0TCW
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Elementdiv#ProductInfo-template--22850865430753__main > div:nth-of-type(9) > a
Accessible nameView details
Markup
<a class="more" href="/products/southernpropersouthernstaplestee">
          <span class="beside-svg underline">View details</span>
          <span class="icon--small icon-natcol has-ltr-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-chevron-right" aria-hidden="true" focusable="false" role="presentation"><path d="m9 18 6-6-6-6"></path></svg></span>
        </a>
Affected pages/products/gift-card /products/southernpropersouthernstaplestee
Component · Ref WYQF83
Affected pagehttps://shadessunglasses.com/
Elementdiv#section-id-template--22850865070305__16359276425da8ce46 > slide-show > div:nth-of-type(2) > div:nth-of-type(1) > button:nth-of-type(2)
Accessible nameLoad slide 2 of 6
Markup
<button class="page-btn" data-index="1" aria-controls="slideshow-template--22850865070305__16359276425da8ce46" aria-current="true">
              <span class="visually-hidden">Load slide 2 of 6</span>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="page-btn__circle">
                <circle class="page-btn__fg-circle" cx="12" cy="12" r="6"></circle>
                <circle class="page-btn__bg-circle" cx="12" cy="12" r="6"></circle>
              </svg>
            </button>
Component · Ref C7GJFD
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Elementdiv#multi-variant-info > carousel-slider > div > ul > li:nth-of-type(2) > a
Accessible nameSouthern Proper - Southern Staples T-Shirt Navy Front
Markup
<a class="thumbnail thumbnail--media-image" href="//shadessunglasses.com/cdn/shop/products/20330_navy.jpg?v=1571439768&amp;width=5000"><div class="img-ar img-ar--contain" style="--aspect-ratio: 0.83">
<img src="//shadessunglasses.com/cdn/shop/products/20330_navy.jpg?v=1571439768&amp;width=664" alt="Southern Proper - Southern Staples T-Shirt Navy Front" width="664" height="800" sizes="65px" srcset="//shadessunglasses.com/cdn/shop/products/20330_navy.jpg?v=1571439768&amp;width=81 65w, //shadessunglasses.com/cdn/shop/products/20330_navy.jpg?v=1571439768&amp;width=162 130w" class="theme-img"></div…
Component · Ref 8K58HG
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Elementdiv#slider-template--22850865430753__main > div > div:nth-of-type(1) > a
Accessible nameLoad image 1 in gallery view
Markup
<a class="block show-gallery" href="//shadessunglasses.com/cdn/shop/products/20330_navy_back.jpg?v=1571439768&amp;width=5000" aria-label="Load image 1 in gallery view"><div id="FeaturedMedia-template--22850865430753__main-10310025264-wrapper" class="product-media-wrapper" data-media-id="template--22850865430753__main-10310025264" tabindex="-1">
  
      <div class="product-media product-media--image"><div class="img-ar img-ar--contain" style="--aspect-ratio: 0.83">
<img src="//shadessunglasses.com/cdn/shop/products/20330_navy_back.jpg?v=1571439768&amp;width=664" alt="Southern Proper - Southern…
Component · Ref Z1T049
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Elementdiv#multi-variant-info > div > carousel-slider > div:nth-of-type(2) > button:nth-of-type(2)
Accessible nameNext
Markup
<button type="button" class="slider-nav__btn slider-nav__btn--style-2 has-ltr-icon" name="next" aria-controls="slider-template--22850865430753__main">
                <span class="visually-hidden">Next</span>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-chevron-right" aria-hidden="true" focusable="false" role="presentation"><path d="m9 18 6-6-6-6"></path></svg>
              </button>
Component · Ref J20PS4
Affected pagehttps://shadessunglasses.com/cart
Elementbutton#update-cart
Accessible nameCheckout
Markup
<button type="submit" class="btn btn--large" id="update-cart" name="checkout">Checkout</button>
Component · Ref UN43EI
Affected pagehttps://shadessunglasses.com/cart
Elementdiv > div:nth-of-type(2) > div:nth-of-type(2) > div > span > button
Accessible nameUpdate cart
Markup
<button type="submit" name="update">Update cart</button>
Component · Ref VPL9IR
Affected pagehttps://shadessunglasses.com/cart
Elementtextarea#note
Markup
<textarea id="note" name="note"></textarea>
Medium

IDs used in ARIA and labels must be unique

WCAG 4.1.2 (A)1 instance1 inspected page

IDs used in ARIA and labels must be unique

Why it matters

IDs used in ARIA and labels must be unique

Recommended correction

Ensure that all IDs used in ARIA attributes and labels are unique within the document. Update the id attribute of the element with the value "slider-template--22850865430753__main" to a unique value.

View 1 affected element
Component · Ref NMBNMN
Affected pagehttps://shadessunglasses.com/products/southernpropersouthernstaplestee
Element.media-gallery__inner > .main-image > carousel-slider[role="region"][aria-roledescription="Carousel"][aria-label=""] > .slider[aria-atomic="true"][aria-live="polite"]
Accessible nameSouthern Proper - Southern Staples T-Shirt Navy Back
Markup
<div class="slider slider--no-scrollbar" id="slider-template--22850865430753__main" aria-live="polite" aria-atomic="true">
Low

Video may be missing captions

WCAG 1.2.2 (A)3 instances1 inspected page

A video element has no captions or subtitles track. Whether captions are needed depends on the audio content and requires manual review.

Why it matters

A video element has no captions or subtitles track. Whether captions are needed depends on the audio content and requires manual review.

Recommended correction

Add captions or subtitles to the video to ensure users with hearing impairments can access the audio content.

View 3 affected elements
Component · Ref EWNGF2
Affected pagehttps://shadessunglasses.com/
Elementvideo#video-1-insta-feed
Markup
<video class="" muted="" loop="" playsinline="" id="video-1-insta-feed" preload="none" src="https://scontent.cdninstagram.com/o1/v/t2/f2/m86/AQPZquYGXv7ALV6NN9m19LdKFmpGYIwIY6FdtyVDMENTbjnslYZ09_tOgzeXI11Wx6Cwxn-h4jU47A_lasQggoW8-CiSg2GbjX-Hdrg.mp4?_nc_cat=105&amp;_nc_sid=5e9851&amp;_nc_ht=scontent.cdninstagram.com&amp;_nc_ohc=FLYJ0ZUKOioQ7kNvwFxKZT_&amp;efg=eyJ2ZW5jb2RlX3RhZyI6Inhwdl9wcm9ncmVzc2l2ZS5JTlNUQUdSQU0uQ0xJUFMuQzMuNzIwLmRhc2hfYmFzZWxpbmVfMV92MSIsInhwdl9hc3NldF9pZCI6MzQzNzQyMTM3MzA4NDQ4OCwiYXNzZXRfYWdlX2RheXMiOjIsInZpX3VzZWNhc2VfaWQiOjEwMDk5LCJkdXJhdGlvbl9zIjozMCwidXJsZ2VuX3NvdXJjZSI…

05 · Most affected inspected pages

06 · About this assessment

Evolize inspects publicly accessible website pages using automated browser-based testing and deterministic accessibility rules. Automated testing can identify many reproducible technical issues but cannot determine complete WCAG or legal compliance.

  • Publicly accessible surfaces only — no credentials, private systems, or source-code access.
  • Findings apply to the pages and states successfully inspected; automated analysis may not detect every issue.
  • Results reflect the site at the scan date and may have changed since.

Evolize provides digital risk intelligence and does not provide legal advice, certify compliance, or guarantee that litigation will not occur. Methodology · Security · Example assessment

07 · Continuous monitoring

This public report captures one assessment. Evolize monitoring rescans the website, detects new and recurring findings, tracks changes over time and verifies corrections.

ACTIVATE MONITORINGSEE PRICING

Is information in this report inaccurate or outdated? Request a correction or removal.