Public accessibility assessment

Accessibility issues detected on thehathive.com

Evolize inspected 5 publicly accessible pages on thehathive.com and detected 23 automatically identifiable accessibility findings. 6 findings were classified as critical or high priority. The findings map to 10 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve links lack accessible text, hidden elements can still receive keyboard focus, images lack text alternatives.

23findings detected
6critical + high
5pages inspected
13 Aug 2026assessed

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

https://

01 · Accessibility summary

Evolize inspected 5 publicly accessible pages on thehathive.com and detected 23 automatically identifiable accessibility findings. 6 findings were classified as critical or high priority. The findings map to 10 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve links lack accessible text, hidden elements can still receive keyboard focus, images lack text alternatives.

02 · Priority findings

03 · WCAG criteria affected

CriterionNameLevelFindingsPages
1.4.3Contrast (Minimum)AA73
1.3.1Info and RelationshipsA45
1.2.2Captions (Prerecorded)A21
2.1.1KeyboardA25
2.4.3Focus OrderA25
2.4.4Link Purpose (In Context)A21
4.1.2Name, Role, ValueA25
1.1.1Non-text ContentA11
2.2.2Pause, Stop, HideA15
3.3.2Labels or InstructionsA12

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 rescans public websites, detects newly introduced or recurring accessibility issues, tracks remediation and verifies fixes.

04 · All detected findings

Critical

Links lack accessible text

WCAG 2.4.4 (A)4 instances1 affected page
ComponentRef KBIWRZ

Links expose no accessible name, so their destination is unknown to screen reader users.

Affected pagehttps://thehathive.com/
Element.grid-item--width-66.grid-item--text-center.grid-item--media-fit-cover > .grid-item__inner > .grid-item__link-overlay
Markup
<a class="grid-item__link-overlay" href="/products/wide-brim-veil-bridal-hat"></a>
How to fixAdd text to the links, or use the 'aria-label' attribute to provide a text description of the link's destination.
ComponentRef DZ96NZ

Links expose no accessible name, so their destination is unknown to screen reader users.

Affected pagehttps://thehathive.com/
Element.grid-item__link-overlay[href$="hat-collections"]
Markup
<a class="grid-item__link-overlay" href="/pages/hat-collections"></a>
How to fixAdd text to these links, even if it's just a brief description of where the link goes, or use the 'aria-label' attribute to provide a text description for screen readers.
High

Hidden elements can still receive keyboard focus

WCAG 2.4.3 (A)50 instances5 affected pages
ComponentRef 4SX7SD

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://thehathive.com/
Elementul#currency-list-header > li:nth-of-type(1) > a
Accessible nameAfghanistan (AFN ؋)
Markup
<a class="disclosure-list__option no-transition fs-body-75" href="#" data-value="AF" data-disclosure-option="">
                    <span class="flag-icon flag-icon-af"></span>

                    <span class="disclosure-list__option-label">Afghanistan (AFN
                      ؋)</span></a>
How to fixEnsure that all interactive elements are visible when they receive focus, or remove them from the tab order if they are not meant to be interacted with. Consider using 'display: none' or 'visibility: hidden' to remove the element from the tab order, or use 'tabindex=-1' to remove it from the tab order while keeping it visible for screen readers.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
ComponentRef 28ANXM

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://thehathive.com/
Elementdiv#shopify-section-sections--21363358498965__announcement-bar > div > div:nth-of-type(1) > div > div:nth-of-type(1) > button
Accessible namePrevious
Markup
<button class="slider-nav-button slider-nav-button-prev" title="Previous">
            <span class="icon icon-new icon-chevron ">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.875 7.438 12 17.563 22.125 7.438" stroke="currentColor" stroke-width="2"></path></svg>
</span>

          </button>
How to fixRemove the hidden button from the tab order by setting the 'tabindex' attribute to '-1' or by making the button visible when it is focused.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
High

Images lack text alternatives

WCAG 1.1.1 (A)1 instance1 affected page
ComponentRef T7K0UB

Informative images have no alternative text, so their meaning is unavailable to people using assistive technology.

Affected pagehttps://thehathive.com/
Elementvideo > img
Markup
<img src="//thehathive.com/cdn/shop/files/preview_images/ebedfa2511684a9f82b4bef402431727.thumbnail.0000000000_1800x.jpg?v=1778647925">
How to fixAdd an 'alt' attribute to the image element with a descriptive text that conveys the image's meaning or purpose. For example: <img src='image.jpg' alt='Description of the image'>
High

Interactive controls are not keyboard-accessible

WCAG 2.1.1 (A)1 instance1 affected page
ComponentRef 8T0L19

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://thehathive.com/products/lightpinkfascinatorwithveil
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>
How to fixAdd focusable semantics or a tabindex to the 'More payment options' link to ensure it can receive keyboard focus.
Medium

Content sits outside any landmark region

WCAG 1.3.1 (A)5 instances5 affected pages
ComponentRef GG640N

Meaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.

Affected pagehttps://thehathive.com/
Elementdiv:nth-of-type(1) > div > div:nth-of-type(2) > div > div:nth-of-type(1) > p
Accessible nameFree standard shipping within the United States!
Markup
<p>Free standard shipping within the United States!</p>
How to fixTo fix this, ensure that all meaningful content is wrapped within appropriate landmark elements (e.g., <header>, <nav>, <main>, <footer>, <aside>) to improve accessibility for users of assistive technologies.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
Medium

Navigation regions are not distinguishable

WCAG 1.3.1 (A)20 instances5 affected pages
ComponentRef Z34N2D

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

Affected pagehttps://thehathive.com/
Elementheader > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > nav
Accessible nameSHOP Ready to Wear Fascinators Ready to wear Derby Hats Designer Fascinators Designer Derby Hats Bowties Toddler & Kids Hat ORDER A CUSTOM HAT CONTACT MEET YOUR DESIGNER
Markup
<nav class="header__links header__links-primary" data-navigation="" style="--submenu-item-height: 59px;">

<ul class="header__links-list fs-navigation-base">
  

    

    <li data-submenu-parent=""><!-- if top level item is a link, render a clickable anchor link --><a class="navigation__submenu-trigger fs-navigation-base no-transition" data-link="" data-parent="" data-dropdown-trigger="" aria-haspopup="true" aria-expanded="false" aria-controls="shop-menu-0" href="/collections">
          <span class="link-hover">
            SHOP
          </span>
          <span class="header__links-icon">
 …
How to fixAdd an 'aria-label' or 'aria-labelledby' attribute to each navigation region to provide a unique and descriptive name. This will allow screen readers to announce the name of each navigation region, making it easier for users to navigate the page.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
ComponentRef GWMGKD

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

Affected pagehttps://thehathive.com/
Elementdiv#shopify-section-sections--21363358498965__header > header > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > nav
Accessible nameCurrency United States (USD $) Afghanistan (AFN ؋) Åland Islands (EUR €) Albania (ALL L) Algeria (DZD د.ج) Andorra (EUR €) Angola (USD $) Anguilla (XCD $) Antigua & Barbuda (XCD $) Argentina (USD $) Armenia (AMD դր.) Aruba (AWG ƒ) Ascension Island (SHP £) Australia (AUD $) Austria (EUR €) Azerbaijan (AZN ₼) Bahamas (BSD $) Bahrain (USD $) Bangladesh (BDT ৳) Barbados (BBD $) Belarus (USD $) Belgium (EUR €) Belize (BZD $) Benin (XOF Fr) Bermuda (USD $) Bhutan (USD $) Bolivia (BOB Bs.) Bosnia & Herzegovina (BAM КМ) Botswana (BWP P) Brazil (USD $) British Indian Ocean Territory (USD $) British Virgin Islands (USD $) Brunei (BND $) Bulgaria (EUR €) Burkina Faso (XOF Fr) Burundi (BIF Fr) Cambodia (KHR ៛) Cameroon (XAF CFA) Canada (CAD $) Cape Verde (CVE $) Caribbean Netherlands (USD $) Cayman Islands (KYD $) Central African Republic (XAF CFA) Chad (XAF CFA) Chile (USD $) China (CNY ¥) Christmas Island (AUD $) Cocos (Keeling) Islands (AUD $) Colombia (USD $) Comoros (KMF Fr) Congo - Brazzaville (XAF CFA) Congo - Kinshasa (CDF Fr) Cook Islands (NZD $) Costa Rica (CRC ₡) Côte d’Ivoire (XOF Fr) Croatia (EUR €) Curaçao (ANG ƒ) Cyprus (EU…[truncated by Evolize: exceeded D1 value limit]
Markup
<nav class="header__cross-border fs-body-50" data-secondary-navigation="">
      <form method="post" action="/localization" id="localization_form" accept-charset="UTF-8" class="disclosure-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="_method" value="put"><input type="hidden" name="return_to" value="/"><div class="disclosure-form__inner"><div class="disclosure-form__item">
          <h2 class="visually-hidden" id="currency-heading-header">
            Currency
          </h2>

…
How to fixAdd a unique and descriptive accessible name to each navigation landmark using the 'aria-label' or 'aria-labelledby' attribute.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
ComponentRef I6JIU9

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

Affected pagehttps://thehathive.com/
Elementsection > div:nth-of-type(2) > div > div > div > div
Accessible nameSHOP SHOP Ready to Wear Fascinators Ready to wear Derby Hats Designer Fascinators Designer Derby Hats Bowties Toddler & Kids Hat ORDER A CUSTOM HAT CONTACT MEET YOUR DESIGNER Register / Login
Rolenavigation
Markup
<div class="drawer-menu__main" data-main="" role="navigation">
            <div class="drawer-menu__links-wrapper animation--drawer-menu-item" style="--delay-offset-multiplier: 0;">
              <ul class="drawer-menu__primary-links" data-depth="0" data-primary-container="true">
                <li class="
      drawer-menu__item
      
      
    " data-list-item="">
    <a data-item="parent" class="drawer-menu__link no-transition" href="/collections" data-link="primary" aria-haspopup="true" aria-expanded="false">
      <div class="drawer-menu__link-title">
        
        

        <span c…
How to fixAdd a unique and descriptive accessible name to each navigation region using the 'aria-label' or 'aria-labelledby' attribute, ensuring that screen readers can announce the purpose of each navigation section.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
Medium

Carousel has no accessible controls

WCAG 2.1.1 (A)5 instances5 affected pages
ComponentRef 6DO7LZ

A carousel/slider exposes no previous/next or pause controls, so keyboard and assistive-technology users cannot navigate or stop it. Requires manual review of the specific widget.

Affected pagehttps://thehathive.com/
Elementdiv#shopify-section-sections--21363358498965__announcement-bar > div > div:nth-of-type(2)
Accessible nameFree standard shipping within the United States! Life isn’t perfect, but your hat can be!
Markup
<div class="swiper" data-slider="" data-autoplay-enabled="true" data-autoplay-delay="4000">
      <div class="swiper-wrapper">
        <div class="announcement-bar__item ff-body fs-body-50 swiper-slide" data-slide="" data-index="0"><div class="announcement-bar__item-inner announcement-bar__item-inner-mobile-only" inert=""><p>Free standard shipping within the United States!</p>
</div><div class="announcement-bar__item-inner announcement-bar__item-inner-desktop-only"><p>Life isn’t perfect, but your hat can be!</p>
</div>
      </div>
      </div>
    </div>
How to fixAdd visible and accessible controls (such as previous, next, and pause buttons) to the carousel that can be operated by keyboard and assistive technologies. Ensure these controls are properly labeled and announced to screen readers.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
Medium

ARIA attributes have invalid values

WCAG 4.1.2 (A)7 instances5 affected pages
ComponentRef G2GC37

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

Affected pagehttps://thehathive.com/products/navy-0728
Element.for-desktop > .product-accordion-group[data-auto-collapse="false"] > .accordion:nth-child(1) > .accordion__inner[data-open="true"][data-index=""] > .accordion__label[aria-controls="description"]
Accessible nameDescription
Markup
<button class="accordion__label" aria-expanded="true" aria-controls="description">
How to fixEnsure that all ARIA attributes have valid values and reference existing element ids. In this case, add an element with the id 'description' or update the aria-controls attribute to reference an existing element.
Affected pages/products/lightpinkfascinatorwithveil /products/navy-0728
ComponentRef 80BY9W

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

Affected pagehttps://thehathive.com/
Element.navigation__submenu-trigger
Accessible nameSHOP
Markup
<a class="navigation__submenu-trigger fs-navigation-base no-transition" data-link="" data-parent="" data-dropdown-trigger="" aria-haspopup="true" aria-expanded="false" aria-controls="shop-menu-0" href="/collections">
How to fixVerify that all ARIA attributes have valid values and reference existing ids. Check the HTML element with the aria-controls attribute and ensure the referenced id exists in the document.
Affected pages/ /pages/contact /products/lightpinkfascinatorwithveil /products/navy-0728 /cart
Medium

Text has insufficient colour contrast

WCAG 1.4.3 (AA)12 instances3 affected pages
ComponentRef VVCKRD

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

Affected pagehttps://thehathive.com/products/navy-0728
Element.inventory-counter__message
Accessible nameBackordered
Markup
<span class="inventory-counter__message fs-body-75">Backordered</span>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
ComponentRef C859A2

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

Affected pagehttps://thehathive.com/
Element.btn--secondary.btn--overlay[href$="hat-collections"] > span
Accessible nameShop Hats
Markup
<span>Shop Hats</span>
How to fixIncrease the contrast between the text color and background color of the 'Shop Hats' element to meet the minimum contrast ratio requirements.
Affected pages/ /products/navy-0728
ComponentRef MXEI65

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

Affected pagehttps://thehathive.com/
Elementa[href$="custom-hat-orders"][data-link=""] > .link-hover
Accessible nameORDER A CUSTOM HAT
Markup
<span class="link-hover">
            ORDER A CUSTOM HAT
          </span>
How to fixAdjust the color of the text or its background to ensure the contrast ratio meets the minimum requirements. A contrast ratio of at least 4.5:1 for normal text is recommended.
ComponentRef YCLXWL

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

Affected pagehttps://thehathive.com/cart
Element.cart__empty-button > .btn--secondary.btn[href$="collections"] > span
Accessible nameContinue shopping
Markup
<span>Continue shopping</span>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
ComponentRef NO2RAB

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

Affected pagehttps://thehathive.com/
Elementbutton[aria-controls="currency-list-header"]
Accessible nameUnited States (USD $)
Markup
<button type="button" class="disclosure__toggle disclosure__toggle--currency fs-body-50" aria-expanded="false" aria-controls="currency-list-header" aria-describedby="currency-heading-header" data-disclosure-toggle="">
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio thresholds as defined by WCAG 2.1 SC 1.4.3.
ComponentRef N7CR4K

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

Affected pagehttps://thehathive.com/
Element.navigation__submenu-trigger > .link-hover
Accessible nameSHOP
Markup
<span class="link-hover">
            SHOP
          </span>
How to fixAdjust the color of the text or its background to meet the minimum contrast ratio of 4.5:1 for normal text, as per WCAG 2.1 guidelines.
ComponentRef 79BI0O

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

Affected pagehttps://thehathive.com/
Element.image-hero__text-container-subheading
Accessible nameReady to Wear & Custom Design Hats and Fascinators.
Markup
<h3 class="image-hero__text-container-subheading ff-subheading fs-heading-5-base section-blocks__subheading" style="--delay-offset-multiplier: 3;">
                    Ready to Wear &amp; Custom Design Hats and Fascinators.
                  </h3>
How to fixIncrease the contrast between the text color and background color by using a darker or lighter shade, or add a background image or texture that provides sufficient contrast.
Medium

<video> elements must have captions

WCAG 1.2.2 (A)1 instance1 affected page
ComponentRef CLOXS2

<video> elements must have captions

Affected pagehttps://thehathive.com/
Elementvideo
Markup
<video playsinline="playsinline" class="video-with-text__vid..." autoplay="autoplay" loop="loop" muted="muted" preload="metadata" poster="//thehathive.com/cdn..." loading="lazy">
How to fixAdd captions to the video by including a text track or providing a transcript of the audio content.
Low

Form field must not have multiple label elements

WCAG 3.3.2 (A)2 instances2 affected pages
ComponentRef 4YGNEI

Form field must not have multiple label elements

Affected pagehttps://thehathive.com/products/navy-0728
Element#Quantity-Input-4416154959972
Accessible nameProduct quantity
Markup
<input type="number" name="updates[]" id="Quantity-Input-4416154959972" value="1" min="1" pattern="[0-9]*" class="quantity-input__input" data-quantity-input="" aria-label="Product quantity">
How to fixRemove or consolidate the duplicate labels so that each form field only has one label. Ensure that the remaining label accurately describes the purpose of the field.
Affected pages/products/lightpinkfascinatorwithveil /products/navy-0728
Low

Video may be missing captions

WCAG 1.2.2 (A)1 instance1 affected page
ComponentRef 9KVY8F

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

Affected pagehttps://thehathive.com/
Elementdiv > div > div:nth-of-type(1) > div > div > video
Markup
<video playsinline="playsinline" class="video-with-text__video animation--video-with-text" autoplay="autoplay" loop="loop" muted="muted" preload="metadata" poster="//thehathive.com/cdn/shop/files/preview_images/ebedfa2511684a9f82b4bef402431727.thumbnail.0000000000_1800x.jpg?v=1778647925" loading="lazy"><source src="//thehathive.com/cdn/shop/videos/c/vp/ebedfa2511684a9f82b4bef402431727/ebedfa2511684a9f82b4bef402431727.HD-1080p-7.2Mbps-83990511.mp4?v=0" type="video/mp4"><img src="//thehathive.com/cdn/shop/files/preview_images/ebedfa2511684a9f82b4bef402431727.thumbnail.0000000000_1800x.jpg?v=1778…
How to fixAdd captions or subtitles to the video, or provide an alternative way for users to access the audio content, such as a transcript.

05 · Pages inspected

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.

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