Public accessibility assessment

Accessibility issues detected on crazyyvendor.myshopify.com

Evolize inspected 5 publicly accessible pages on crazyyvendor.myshopify.com and detected 56 automatically identifiable accessibility findings. 14 findings were classified as critical or high priority. The findings map to 5 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve interactive controls are not keyboard-accessible, hidden elements can still receive keyboard focus, modal dialog does not trap keyboard focus.

56findings detected

14critical + high

5pages inspected

24 Aug 2026assessed

Independent public assessment. crazyyvendor.myshopify.com is not necessarily affiliated with or a customer of Evolize.

MONITOR THIS WEBSITE RUN A FREE ASSESSMENT

01 · Accessibility summary

02 · Priority findings

High Interactive controls are not keyboard-accessibleWCAG 2.1.1 (A) · 5 pages · 10 instances
High Interactive controls are not keyboard-accessibleWCAG 2.1.1 (A) · 5 pages · 10 instances
High Hidden elements can still receive keyboard focusWCAG 2.4.3 (A) · 5 pages · 36 instances
High Modal dialog does not trap keyboard focusWCAG 2.4.3 (A) · 5 pages · 10 instances
High Text has insufficient colour contrastWCAG 1.4.3 (AA) · 4 pages · 12 instances

03 · WCAG criteria affected

Criterion	Name	Level	Findings	Pages
1.4.3	Contrast (Minimum)	AA	31	4
2.4.3	Focus Order	A	12	5
2.1.1	Keyboard	A	6	5
2.5.8	Target Size (Minimum)	AA	5	5
1.3.1	Info and Relationships	A	2	5

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

04 · All detected findings

High

Interactive controls are not keyboard-accessible

WCAG 2.1.1 (A)40 instances5 affected pages

ComponentRef 240DNW

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.

Affected pagehttps://crazyyvendor.myshopify.com/

Elementsticky-header > header > div > details-modal > details > summary

Accessible nameSearch

Rolebutton

Markup

<summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="Search" role="button">
      <span>
        <span class="svg-wrapper"><svg fill="none" class="icon icon-search" viewBox="0 0 18 19"><path fill="currentColor" fill-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 1 1 2.85 3.5a5.784 5.784 0 0 1 8.18 8.18m.26 1.12a6.78 6.78 0 1 1 .72-.7l5.4 5.4a.5.5 0 1 1-.71.7z" clip-rule="evenodd"></path></svg>
</span>
        <span class="svg-wrapper header__icon-close"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class=…

How to fixAdd a tabindex attribute to the summary element to make it focusable by keyboard. Alternatively, consider replacing the summary element with a button element, which is inherently focusable.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

ComponentRef M9WOYH

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.

Affected pagehttps://crazyyvendor.myshopify.com/

Elementdetails#Details-menu-drawer-container > summary

Accessible nameMenu

Rolebutton

Markup

<summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="Menu" role="button" aria-expanded="false" aria-controls="menu-drawer">
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-hamburger" viewBox="0 0 18 16"><path fill="currentColor" d="M1 .5a.5.5 0 1 0 0 1h15.71a.5.5 0 0 0 0-1zM.5 8a.5.5 0 0 1 .5-.5h15.71a.5.5 0 0 1 0 1H1A.5.5 0 0 1 .5 8m0 7a.5.5 0 0 1 .5-.5h15.71a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close" viewBox="0 0 18 17"><path fill="…

How to fixTo make this control accessible, add a tabindex attribute to the summary element, or ensure that it can receive focus through other means, such as by using a native button element or adding a role="button" attribute and implementing the necessary keyboard event handling.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

ComponentRef 3KEO38

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.

Affected pagehttps://crazyyvendor.myshopify.com/

Elementdetails#Details-share_L7EKD9-template--16578927525966__featured_product_ww98kG > summary

Accessible nameShare

Rolebutton

Markup

<summary class="share-button__button" role="button" aria-expanded="false">
      <span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-share" viewBox="0 0 13 12"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.625 8.125v2.167a1.083 1.083 0 0 0 1.083 1.083h7.584a1.083 1.083 0 0 0 1.083-1.083V8.125"></path><path fill="currentColor" fill-rule="evenodd" d="M6.148 1.271a.5.5 0 0 1 .707 0L9.563 3.98a.5.5 0 0 1-.707.707L6.501 2.332 4.147 4.687a.5.5 0 1 1-.708-.707z" clip-rule="evenodd"></path><path fill="currentColor" fill-rule…

How to fixAdd a tabindex attribute to the summary element with the share-button__button class to make it focusable by keyboard. Alternatively, replace the summary element with a native button element to ensure keyboard accessibility.

Affected pages/ /products/shoe-vendor

ComponentRef YA4ZRI

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.

Affected pagehttps://crazyyvendor.myshopify.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>

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

ComponentRef KLGP1H

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.

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementdetails#Details-Mobile-filter\.v\.availability-template--16578927493198__product-grid > summary

Accessible nameAvailability

Rolebutton

Markup

<summary class="mobile-facets__summary focus-inset" role="button" aria-expanded="false" aria-controls="FacetMobile-1-template--16578927493198__product-grid">
                          <div>
                            <span>Availability</span>
                            <span class="mobile-facets__arrow"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-arrow" viewBox="0 0 14 10"><path fill="currentColor" fill-rule="evenodd" d="M8.537.808a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L11.793 5.5H1a.5.5 0 0 1 0-1h10.793L8.646 1.354a.5.5 0 0 1-.109-.546"…

How to fixAdd a tabindex attribute to the summary element to make it focusable by keyboard. Ensure that the element can be activated using the Enter or Space key.

ComponentRef RFFXSX

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.

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementdetails#Details-filter\.v\.availability-template--16578927493198__product-grid > summary

Accessible nameAvailability (0 selected)

Rolebutton

Markup

<summary class="facets__summary caption-large focus-offset" aria-label="Availability (0 selected)" role="button" aria-expanded="false" aria-controls="Facet-1-template--16578927493198__product-grid">
                      <div>
                        <span class="facets__summary-label">Availability
</span><svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path></svg>
</div>
                    </summary>

How to fixAdd a tabindex attribute to the summary element to make it focusable by keyboard, or use a native button element instead of the summary element.

High

Hidden elements can still receive keyboard focus

WCAG 2.4.3 (A)60 instances5 affected pages

ComponentRef QDYK0L

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementa#StandardCardNoMediaLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326

Accessible nameAll Vendors Bundles Sale

Markup

<a href="/products/all-vendors-bundles" id="StandardCardNoMediaLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326" class="full-unstyled-link" aria-labelledby="StandardCardNoMediaLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326 NoMediaStandardBadge-template--16578927525966__featured_collection_V7Ryqd-7467519541326">
                All Vendors Bundles
              </a>

How to fixTo fix this issue, ensure that all interactive elements are visible when they receive keyboard focus. You can do this by adding a `display: none` or `visibility: hidden` style to the element when it's not intended to be visible, or by removing it from the tab order using the `tabindex` attribute set to `-1`. In this case, the `<a>` element with the id `StandardCardNoMediaLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326` should be made visible or removed from the tab order.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

ComponentRef VXRQZW

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementslider-component#GalleryViewer-template--16578927525966__featured_product_ww98kG > div > button:nth-of-type(1)

Accessible nameSlide left

Markup

<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="Slide left">
        <span class="svg-wrapper"><svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path></svg>
</span>
      </button>

How to fixTo fix this issue, ensure that the element is removed from the tab order when it is not visible. This can be achieved by adding the 'tabindex=-1' attribute to the element or by using JavaScript to dynamically update the 'tabindex' attribute based on the element's visibility.

Affected pages/ /products/shoe-vendor

ComponentRef CL5C7U

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementli#Slide-template--16578927525966__featured_product_ww98kG-24655298429006 > div > modal-opener > button

Accessible nameOpen media 1 in modal

Markup

<button class="product__media-toggle quick-add-hidden product__media-zoom-lightbox" type="button" aria-haspopup="dialog" data-media-id="24655298429006">
      <span class="visually-hidden">
        Open media 1 in modal
      </span>
    </button>

How to fixTo fix this issue, ensure that the element is either removed from the tab order when it's not visible or make it visible when it receives focus. This can be achieved by adding a `tabindex=-1` attribute to the element when it's hidden or by making sure the element is displayed when it's focused.

Affected pages/ /products/shoe-vendor

ComponentRef 83189C

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

Affected pagehttps://crazyyvendor.myshopify.com/cart

Elementdiv#shopify-section-template--16578927460430__cart-items > cart-items > div > div:nth-of-type(1) > a

Accessible nameContinue shopping

Markup

<a href="/collections/all" class="underlined-link">Continue shopping</a>

How to fixTo fix this issue, ensure that the 'Continue shopping' link is visible when it receives keyboard focus. This can be achieved by removing the 'display: none' or 'visibility: hidden' CSS property from the element when it is focused, or by removing the element from the tab order when it is not visible.

ComponentRef Y1D0YZ

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementform#FacetFiltersForm > div:nth-of-type(2) > facet-remove > a

Accessible nameRemove all

Rolebutton

Markup

<a href="/collections/all" class="active-facets__button-remove underlined-link" role="button">
                  <span>Remove all</span>
                </a>

How to fixTo fix this issue, ensure that the element is either visible when it receives focus or is removed from the tab order. You can achieve this by adding a `tabindex=-1` attribute to the element or by making sure it is visible when focused.

ComponentRef 3EHZRK

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementdiv#FacetsWrapperMobile > div:nth-of-type(2) > facet-remove > a

Accessible nameRemove all

Rolebutton

Markup

<a href="/collections/all" class="mobile-facets__clear underlined-link" role="button">Remove all</a>

How to fixTo fix this issue, ensure that the 'Remove all' button is either visible when it receives focus or is removed from the tab order when it's not visible. This can be achieved by setting 'display: none' or 'visibility: hidden' on the element when it's not intended to be interacted with, or by using JavaScript to dynamically update the 'tabindex' attribute to -1 when the element is hidden.

ComponentRef 1NGI92

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementinput#Filter-Price-GTE

Markup

<input class="field__input" name="filter.v.price.gte" id="Filter-Price-GTE" type="text" inputmode="decimal" placeholder="0" data-pattern="\d| |,|\." data-min="0" data-max="34.99">

How to fixKeep this element out of the tab order while its containing region is hidden — remove it from focus (for example tabindex="-1"), or apply the inert attribute to the hidden container where supported. Restore normal focusability when the region becomes visible.

ComponentRef 15YT3I

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementselect#SortBy-mobile

Accessible nameFeatured Most relevant Best selling Alphabetically, A-Z Alphabetically, Z-A Price, low to high Price, high to low Date, old to new Date, new to old

Markup

<select name="sort_by" class="select__select" id="SortBy-mobile" aria-describedby="a11y-refresh-page-message"><option value="manual">
                              Featured
                            </option><option value="most-relevant">
                              Most relevant
                            </option><option value="best-selling">
                              Best selling
                            </option><option value="title-ascending" selected="selected">
                              Alphabetically, A-Z
                            </option><option value="title-descend…

How to fixTo fix this issue, ensure that the hidden element is removed from the tab order by setting its 'tabindex' attribute to '-1' or by using CSS to set its 'display' or 'visibility' property to 'none'. Alternatively, make the element visible when it receives focus.

ComponentRef 5HWXFV

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementdiv#FacetsWrapperMobile > div:nth-of-type(2) > button

Accessible nameApply

Markup

<button type="button" class="button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">
                  Apply
                </button>

How to fixTo fix this issue, ensure that the button is removed from the tab order when it's not visible. This can be achieved by setting the 'tabindex' attribute to '-1' or by using 'display: none' or 'visibility: hidden' CSS properties when the button is not intended to be interacted with.

ComponentRef 1L9H0A

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementaside#main-collection-filters > div > div:nth-of-type(1) > facet-remove > a

Accessible nameRemove all

Rolebutton

Markup

<a href="/collections/all" class="active-facets__button-remove underlined-link" role="button">
        <span>Remove all</span>
      </a>

How to fixTo fix this issue, ensure that the element is either removed from the tab order or made visible when it receives focus. This can be achieved by adding a 'tabindex=-1' attribute to the element when it's not visible, or by making sure the element is displayed when it's focused.

ComponentRef 6U3IJP

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementinput#Filter-filter\.v\.availability-1

Markup

<input type="checkbox" name="filter.v.availability" value="1" id="Filter-filter.v.availability-1">

How to fixTo fix this issue, remove the element from the tab order by setting the 'tabindex' attribute to '-1' or by hiding it using 'display: none' or 'visibility: hidden' in CSS. Alternatively, make the element visible by adjusting its CSS styling.

High

Modal dialog does not trap keyboard focus

WCAG 2.4.3 (A)10 instances5 affected pages

ComponentRef Q5FARP

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.

Affected pagehttps://crazyyvendor.myshopify.com/

Elementsticky-header > header > div > details-modal > details > div

Accessible nameSearch

Roledialog

Markup

<div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="Search">
      <div class="modal-overlay"></div>
      <div class="search-modal__content search-modal__content-bottom" tabindex="-1"><predictive-search class="search-modal__form" data-loading-text="Loading..."><form action="/search" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input class="search__input field__input" id="Search-In-Modal" type="search" name="q" value="" placeholder="Search" role="combobox" aria-expanded="false" aria-owns="pred…

How to fixTo fix this issue, ensure that the modal dialog traps keyboard focus by setting the 'tabindex' attribute of the modal container to '-1' and making sure that all focusable elements within the modal have a 'tabindex' attribute greater than or equal to 0. Additionally, use JavaScript to prevent focus from escaping the modal by listening for the 'focusout' event and moving focus back to the first focusable element within the modal if necessary.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

High

Text has insufficient colour contrast

WCAG 1.4.3 (AA)256 instances4 affected pages

ComponentRef US1FWD

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

Affected pagehttps://crazyyvendor.myshopify.com/pages/contact

Elementa[title=""]

Accessible nameCrazy Vendor

Markup

<a href="/" title="">Crazy Vendor</a>

How to fixTo improve the accessibility of the affected pages, increase the contrast between the text color and background color of the elements. This can be achieved by adjusting the CSS styles to ensure a minimum contrast ratio of 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold).

Affected pages/ /pages/contact /collections/all /products/shoe-vendor

ComponentRef JE010T

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

Affected pagehttps://crazyyvendor.myshopify.com/pages/contact

Element.footer__copyright > small:nth-child(1)

Markup

<small class="copyright__content">© 2026, <a href="/" title="">Crazy Vendor</a></small>

How to fixTo improve accessibility, increase the contrast between the text color and background color. Consider using a color contrast analyzer tool to determine a suitable color combination that meets the WCAG 2.1 minimum contrast ratio thresholds.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor

ComponentRef 7MP3NI

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element.footer-block__heading

Accessible nameSubscribe to our emails

Markup

<h2 class="footer-block__heading inline-richtext">Subscribe to our emails</h2>

How to fixIncrease the contrast between the text color and background color of the element with the class 'footer-block__heading inline-richtext' to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.

Affected pages/ /collections/all /products/shoe-vendor

ComponentRef 90YPQ2

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

Affected pagehttps://crazyyvendor.myshopify.com/products/shoe-vendor

Element#CardLink--7528682324046

Accessible nameClothing Vendor Sale

Markup

<a href="/products/denim-tears-vendor?pr_prod_strat=jac&pr_rec_id=ae0c24bb9&pr_rec_pid=7528682324046&pr_ref_pid=7879492730958&pr_seq=uniform" id="CardLink--7528682324046" class="full-unstyled-link" aria-labelledby="CardLink--7528682324046 Badge--7528682324046">

How to fixTo improve accessibility, adjust the text and background colors to meet the minimum contrast ratio of 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). Consider using a color contrast analyzer tool to find suitable color combinations.

Affected pages/ /collections/all /products/shoe-vendor

ComponentRef EAEC7B

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element.newsletter-form__field-wrapper > .field > .field__label

Accessible nameEmail

Markup

<label class="field__label" for="NewsletterForm--sections--16578927984718__footer">
                      Email
                    </label>

How to fixTo improve readability, increase the contrast between the text color and background color of the label element with class 'field__label'. Consider using a color contrast analyzer tool to find a suitable combination that meets the minimum contrast ratio thresholds.

Affected pages/ /collections/all /products/shoe-vendor

ComponentRef B6517Q

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#NewsletterForm--sections--16578927984718__footer

Markup

<input id="NewsletterForm--sections--16578927984718__footer" type="email" name="contact[email]" class="field__input" value="" aria-required="true" autocorrect="off" autocapitalize="off" autocomplete="email" placeholder="Email" required="">

How to fixTo improve accessibility, adjust the color scheme of the form to ensure sufficient contrast between the text and background colors. Aim for a contrast ratio of at least 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). Consider using a color contrast analyzer tool to find suitable colors.

Affected pages/ /collections/all /products/shoe-vendor

ComponentRef E5RALF

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

Affected pagehttps://crazyyvendor.myshopify.com/products/shoe-vendor

Element

.grid__item:nth-child(1) > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price.price--on-sale > .price__container > .price__sale > .price-item--sale.price-item--last.price-item

Accessible name$11.99 USD

Markup

<span class="price-item price-item--sale price-item--last">
          $11.99 USD
        </span>

How to fixTo improve the accessibility of this page, consider increasing the contrast between the text color and the background color. A minimum contrast ratio of 4.5:1 for normal text is recommended. You can achieve this by adjusting the CSS styles for the .price-item class to use a darker or lighter color for the text or background.

Affected pages/collections/all /products/shoe-vendor

ComponentRef Y58THZ

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementshop-follow-button,.text-button-large

Markup

<span class="cursor-pointer whitespace-nowrap pr-3 font-sans text-button-large transition-colors text-white">

How to fixTo improve the accessibility of the text, consider increasing the contrast between the text color and the background color. This can be achieved by using a darker or lighter background color, or by using a higher contrast text color. A contrast ratio of at least 4.5:1 for normal text is recommended.

Affected pages/ /products/shoe-vendor

ComponentRef VYN3CF

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

Affected pagehttps://crazyyvendor.myshopify.com/products/shoe-vendor

Element

.grid__item:nth-child(1) > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price.price--on-sale > .price__container > .price__sale > span:nth-child(2) > s

Accessible name$19.99 USD

Markup

<s class="price-item price-item--regular">
              
                $19.99 USD
              
            </s>

How to fixTo improve accessibility, consider adjusting the text color or background color to meet the minimum contrast ratio of 4.5:1 for normal text. This can be achieved by using a color contrast analyzer tool to find a suitable color combination.

Affected pages/collections/all /products/shoe-vendor

ComponentRef T2Z4Q8

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

Affected pagehttps://crazyyvendor.myshopify.com/products/shoe-vendor

Element.related-products__heading

Accessible nameYou may also like

Markup

<h2 class="related-products__heading inline-richtext h2">
        You may also like
      </h2>

How to fixTo improve accessibility, consider increasing the contrast between the text color and background color of the 'You may also like' heading. This can be achieved by changing the CSS styles for the .related-products__heading class to use a color combination with a higher contrast ratio.

ComponentRef KN6CTJ

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#NoMediaStandardBadge-template--16578927525966__featured_collection_V7Ryqd-7467519541326

Accessible nameSale

Markup

<span id="NoMediaStandardBadge-template--16578927525966__featured_collection_V7Ryqd-7467519541326" class="badge badge--bottom-left color-scheme-4">Sale</span>

How to fixTo improve accessibility, consider increasing the contrast between the text color and background color of the 'Sale' badge. This can be achieved by changing the CSS styles for the '.badge' and '.badge--bottom-left' classes to use a higher contrast color scheme. For example, use a darker or lighter background color, or change the text color to a higher contrast option.

Affected pages/ /collections/all /products/shoe-vendor

ComponentRef XSQB4C

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementshop-follow-button,.cursor-pointer

Markup

<span class="cursor-pointer whitespace-nowrap pr-3 font-sans text-button-large transition-colors text-white">

How to fixTo fix this issue, adjust the colors used for the text and background to meet the minimum contrast ratio of 4.5:1 for normal text. Consider using a color contrast analyzer tool to find suitable color combinations.

ComponentRef GQ8C1A

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#Quantity-template--16578927525966__featured_product_ww98kG

Markup

<input class="quantity__input" type="number" name="quantity" id="Quantity-template--16578927525966__featured_product_ww98kG" data-cart-quantity="0" data-min="1" min="1" step="1" value="1" form="product-form-template--16578927525966__featured_product_ww98kG">

How to fixIncrease the contrast between the text color and background color of the quantity input field to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.

Affected pages/ /products/shoe-vendor

ComponentRef NWW2EY

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementshopify-payment-terms[variant-id="41785656901710"],.font-bold

Markup

<span class="font-bold">$35.00</span>

How to fixTo improve the accessibility of this text, consider increasing the contrast between the text color and the background color. This can be achieved by changing the CSS styles for the element with the class 'font-bold' to use a color with sufficient contrast. For example, you can use a tool to select a color that meets the minimum contrast ratio thresholds as defined by the Web Content Accessibility Guidelines (WCAG 2.1).

ComponentRef MEM9MY

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#Slide-template--16578927525966__featured_collection_V7Ryqd-1 > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price.price--on-sale > .price__container > .price__sale > .price-item--sale.price-item--last.price-item

Accessible name$34.99 USD

Markup

<span class="price-item price-item--sale price-item--last">
          $34.99 USD
        </span>

How to fixIncrease the contrast between the text color and the background color of the price element to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors.

ComponentRef M79DS3

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#price-template--16578927525966__featured_product_ww98kG > .price--large.price--show-badge.price > .price__container > .price__sale > .price-item--sale.price-item--last.price-item

Accessible name$9.99 USD

Markup

<span class="price-item price-item--sale price-item--last">
          $9.99 USD
        </span>

How to fixTo improve accessibility, adjust the color scheme to ensure a minimum contrast ratio of 4.5:1 between the text color and background color for normal text. Consider using a color contrast analyzer tool to determine the optimal colors. For the given HTML element <span class="price-item price-item--sale price-item--last"> $9.99 USD </span>, verify the colors used and adjust as necessary to meet the contrast requirement.

ComponentRef 22FX73

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#price-template--16578927525966__featured_product_ww98kG > .price--large.price--show-badge.price > .price__container > .price__sale > span:nth-child(2) > s

Accessible name$14.99 USD

Markup

<s class="price-item price-item--regular">
              
                $14.99 USD
              
            </s>

How to fixTo improve accessibility, increase the contrast between the text color and the background color. Consider using a color contrast analyzer tool to determine the optimal colors. For example, you can change the text color to a darker or lighter shade, or adjust the background color to improve the contrast ratio.

ComponentRef OU2UFB

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#Details-share_L7EKD9-template--16578927525966__featured_product_ww98kG > summary

Accessible nameShare

Rolebutton

Markup

<summary class="share-button__button" role="button" aria-expanded="false">

How to fixIncrease the contrast between the text color and background color of the share button to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to determine the optimal colors.

ComponentRef 8N25H7

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#ProductSubmitButton-template--16578927525966__featured_product_ww98kG > span

Accessible nameAdd to cart

Markup

<span>Add to cart
</span>

How to fixAdjust the color scheme to ensure a minimum contrast ratio of 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). Consider using a color contrast analyzer tool to find suitable colors.

ComponentRef O88C4J

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#Quantity-Form-template--16578927525966__featured_product_ww98kG > .quantity__label.form__label

Accessible nameQuantity (0 in cart)

Markup

<label class="quantity__label form__label" for="Quantity-template--16578927525966__featured_product_ww98kG">

How to fixIncrease the contrast between the text color and background color of the 'Quantity' label to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to determine the optimal colors.

ComponentRef 4IHK83

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#price-template--16578927525966__featured_product_ww98kG > .price--large.price--show-badge.price > .price__badge-sale.badge.color-scheme-4

Accessible nameSale

Markup

<span class="badge price__badge-sale color-scheme-4">
        Sale
      </span>

How to fixTo improve the legibility of the text, consider increasing the contrast between the text color and the background color. You can achieve this by using a color with a higher contrast ratio, such as a darker or lighter shade, depending on the background color. For example, you can change the text color to a deeper shade or the background color to a lighter shade. Ensure that the contrast ratio meets the minimum requirements of WCAG 2.1 SC 1.4.3.

ComponentRef FSESAV

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementa[href$="earphones-supplier"]

Accessible nameView full details

Markup

<a href="/products/earphones-supplier" class="link product__view-details animate-arrow">

How to fixTo improve the accessibility of this element, consider adjusting the text color or background color to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online tools to help determine the contrast ratio and select suitable colors.

ComponentRef I54L5S

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element#ProductInfo-template--16578927525966__featured_product_ww98kG > .product__title.h1

Accessible nameEarphones Supplier

Markup

<h2 class="product__title h1">Earphones Supplier
</h2>

How to fixTo improve readability, consider increasing the contrast between the text color and background color of the element with class 'product__title h1'. This can be achieved by adjusting the CSS styles to use a darker or lighter color for the text or background, ensuring a minimum contrast ratio of 4.5:1 for normal text.

ComponentRef 2KL3T2

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#Slide-template--16578927525966__featured_collection_V7Ryqd-1 > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price.price--on-sale > .price__container > .price__sale > span:nth-child(2) > s

Accessible name$59.99 USD

Markup

<s class="price-item price-item--regular">
              
                $59.99 USD
              
            </s>

How to fixTo improve accessibility, adjust the text color and background color to meet the minimum contrast ratio of 4.5:1 for normal text. Consider using a color contrast analyzer tool to find suitable colors.

ComponentRef 62G059

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#product-form-template--16578927525966__featured_product_ww98kG > .product-form__buttons > .shopify-payment-button[data-shopify="payment-button"] > shopify-accelerated-checkout > more-payment-options-link > .shopify-payment-button__more-options[href="#"]

Accessible nameMore payment options

Markup

<a class="shopify-payment-button__more-options" id="more-payment-options-link" href="#">More payment options</a>

How to fixTo improve accessibility, consider increasing the contrast between the text color and background color of the 'More payment options' link. A minimum contrast ratio of 4.5:1 for normal text is recommended. You can achieve this by adjusting the CSS styles for the element with the id 'more-payment-options-link'.

ComponentRef 07IUUB

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element.button--secondary.button[href$="all"]

Accessible nameShop all

Markup

<a href="/collections/all" class="button button--secondary">Shop all</a>

How to fixTo improve the accessibility of this element, consider adjusting the colors used for the text and background to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online tools to calculate the contrast ratio and select colors that meet this requirement.

ComponentRef RI3CHF

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element.banner__heading

Accessible nameBest Vendor Links

Markup

<h2 class="banner__heading inline-richtext hxl">
              Best Vendor Links
            </h2>

How to fixTo improve the accessibility of this element, consider adjusting the text color or background color to meet the minimum contrast ratio of 4.5:1 for normal text. A color contrast analyzer tool can help determine the optimal colors.

ComponentRef 7CXMAA

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element

#ProductInfo-template--16578927525966__featured_product_ww98kG > .product__text.caption-with-letter-spacing.inline-richtext

Accessible nameInstant Email Delivery

Markup

<p class="product__text inline-richtext caption-with-letter-spacing">Instant Email Delivery</p>

How to fixTo improve readability, increase the contrast between the text color and the background color. Consider using a color contrast analyzer tool to determine a suitable color combination that meets the minimum contrast ratio thresholds.

ComponentRef WC0V9R

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementa[href$="feature"]

Accessible nameView all products in the feature collection

Markup

<a href="/collections/feature" class="button" aria-label="View all products in the feature collection">
          View all
        </a>

How to fixTo improve text legibility, increase the contrast between the text color and background color of the 'View all' link. Consider using a color contrast analyzer tool to determine a suitable color combination that meets the minimum contrast ratio thresholds.

ComponentRef CLTHQJ

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementshopify-payment-terms[variant-id="41785656901710"],#shopify-installments-content

Markup

<span id="shopify-installments-content" data-testid="shopify-installments-content">

How to fixTo improve accessibility, consider adjusting the text color or background color to meet the minimum contrast ratio of 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). Use online tools to test and select suitable color combinations.

ComponentRef 16OI0A

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

Affected pagehttps://crazyyvendor.myshopify.com/

Element.title

Accessible nameFeatured collection

Markup

<h2 class="title inline-richtext h1 scroll-trigger animate--slide-in scroll-trigger--offscreen">
          Featured collection
        </h2>

How to fixTo improve readability, adjust the color of the text or background to meet the minimum contrast ratio of 4.5:1 for normal text. Consider using a color contrast analyzer tool to find a suitable combination.

Medium

Navigation regions are not distinguishable

WCAG 1.3.1 (A)20 instances5 affected pages

ComponentRef HCGSUK

The page has multiple navigation landmarks but they lack accessible names, so screen reader users cannot tell them apart.

Affected pagehttps://crazyyvendor.myshopify.com/cart

Elementdiv#menu-drawer > div > div > nav

Accessible nameHome Catalog Contact

Markup

<nav class="menu-drawer__navigation">
            <ul class="menu-drawer__menu has-submenu list-menu" role="list"><li><a id="HeaderDrawer-home" href="/" class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
                      Home
                    </a></li><li><a id="HeaderDrawer-catalog" href="/collections/all" class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
                      Catalog
                    </a></li><li><a id="HeaderDrawer-contact" href="/pages/contact" class="menu-drawer__menu-item list-menu__item link link--text focus-…

How to fixAdd an accessible name to the navigation region using 'aria-label' or 'aria-labelledby' attribute to distinguish it from other navigation regions on the page.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

ComponentRef OXHX51

The page has multiple navigation landmarks but they lack accessible names, so screen reader users cannot tell them apart.

Affected pagehttps://crazyyvendor.myshopify.com/cart

Elementdiv#shopify-section-sections--16578928017486__header > sticky-header > header > nav

Accessible nameHome Catalog Contact

Markup

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list"><li><a id="HeaderMenu-home" href="/" class="header__menu-item list-menu__item link link--text focus-inset">
            <span>Home</span>
          </a></li><li><a id="HeaderMenu-catalog" href="/collections/all" class="header__menu-item list-menu__item link link--text focus-inset">
            <span>Catalog</span>
          </a></li><li><a id="HeaderMenu-contact" href="/pages/contact" class="header__menu-item list-menu__item link link--text focus-inset">
            <span>Contact</span>
          </a></li><…

How to fixAdd an accessible name to the navigation region using the 'aria-label' or 'aria-labelledby' attribute, so screen reader users can distinguish between multiple navigation landmarks.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

Medium

Touch targets are too small on mobile

WCAG 2.5.8 (AA)39 instances5 affected pages

ComponentRef R5PWO

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

Affected pagehttps://crazyyvendor.myshopify.com/cart

Elementdiv#cart-notification > div:nth-of-type(3) > button

Accessible nameContinue shopping

Markup

<button type="button" class="link button-label">Continue shopping</button>

How to fixIncrease this <button>'s rendered area to at least 24 × 24 CSS pixels, or provide sufficient spacing from adjacent targets. Prefer increasing padding on the existing control (for example the button or link) rather than adding a separate non-interactive wrapper. Observed size: 147 × 20 CSS pixels; required minimum: 24 × 24 CSS pixels.

Affected pages/ /pages/contact /collections/all /products/shoe-vendor /cart

ComponentRef U2YUR8

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

Affected pagehttps://crazyyvendor.myshopify.com/cart

Elementfooter > div:nth-of-type(2) > div:nth-of-type(2) > div > small:nth-of-type(1) > a

Accessible nameCrazy Vendor

Markup

<a href="/" title="">Crazy Vendor</a>

How to fixIncrease the size of the touch target to at least 24x24 pixels to make it easier for users to activate by touch. Consider adding padding or increasing the font size of the interactive element.

Affected pages/ /pages/contact /products/shoe-vendor /cart

ComponentRef O6KWWM

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

Affected pagehttps://crazyyvendor.myshopify.com/

Elementa#CardLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326

Accessible nameAll Vendors Bundles Sale

Markup

<a href="/products/all-vendors-bundles" id="CardLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326" class="full-unstyled-link" aria-labelledby="CardLink-template--16578927525966__featured_collection_V7Ryqd-7467519541326 Badge-template--16578927525966__featured_collection_V7Ryqd-7467519541326">
              All Vendors Bundles
            </a>

Affected pages/ /collections/all /products/shoe-vendor

ComponentRef WEU71U

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementinput#Filter-filter\.v\.availability-mobile-1

Markup

<input class="mobile-facets__checkbox" type="checkbox" name="filter.v.availability" value="1" id="Filter-filter.v.availability-mobile-1">

How to fixIncrease the size of the touch target to at least 24x24px to make it easier for users to activate by touch. Consider adding padding or increasing the size of the checkbox element with the class 'mobile-facets__checkbox'.

ComponentRef WEUB76

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

Affected pagehttps://crazyyvendor.myshopify.com/collections/all

Elementinput#Filter-filter\.v\.availability-mobile-2

Markup

<input class="mobile-facets__checkbox" type="checkbox" name="filter.v.availability" value="0" id="Filter-filter.v.availability-mobile-2" disabled="">

How to fixIncrease the size of the touch target to at least 24x24px to make it easier for users to activate by touch.

05 · Pages inspected

/40 findings High
/collections/all29 findings High
/products/shoe-vendor24 findings High
/pages/contact10 findings High
/cart10 findings High

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.

MONITOR THIS WEBSITE SEE PRICING

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

Accessibility issues detected on crazyyvendor.myshopify.com

01 · Accessibility summary

02 · Priority findings

03 · WCAG criteria affected

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

04 · All detected findings

Interactive controls are not keyboard-accessible

Hidden elements can still receive keyboard focus

Modal dialog does not trap keyboard focus

Text has insufficient colour contrast

Navigation regions are not distinguishable

Touch targets are too small on mobile

05 · Pages inspected

06 · About this assessment

07 · Continuous monitoring

Other public accessibility assessments