High
Hidden elements can still receive keyboard focus
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
Keep 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.
View 50 affected elements
Component · Ref QNETNZ
Affected page
https://hazelboutique.com/pages/contact-usElement
input#Search-In-Modal-1Accessible nameSearch
Roletextbox
Markup
<input class="search__input field__input" id="Search-In-Modal-1" type="search" name="q" aria-label="Search" value="" placeholder="Search" role="textbox" aria-expanded="false" aria-owns="predictive-search-results" aria-controls="predictive-search-results" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
Affected pages
/ /policies/contact-information /pages/contact-us /products/gift-card /cartComponent · Ref 6O0G3G
Affected page
https://hazelboutique.com/products/gift-cardElement
a#HeaderMenu-clothing--header-dropdown-menuAccessible name--
Markup
<a id="HeaderMenu-clothing--header-dropdown-menu" href="/pages/divider" class="header__menu-item list-menu__item link link--text focus-inset caption-large --">
--
</a>Affected pages
/ /policies/contact-information /pages/contact-us /products/gift-card /cartComponent · Ref 3MOOOI
Affected page
https://hazelboutique.com/pages/contact-usElement
div:nth-of-type(1) > details-modal > details > div > div:nth-of-type(2) > buttonAccessible nameClose
Markup
<button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label="Close">
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use href="#icon-close"></use>
</svg>
</button>Affected pages
/ /policies/contact-information /pages/contact-us /products/gift-card /cartComponent · Ref Y41YEH
Affected page
https://hazelboutique.com/Element
div > div:nth-of-type(2) > predictive-search > form > div:nth-of-type(1) > button:nth-of-type(2)Accessible nameSearch
Markup
<button class="search__button field__button" aria-label="Search">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use href="#icon-search"></use>
</svg>
</button>Affected pages
/ /policies/contact-information /pages/contact-us /products/gift-card /cartComponent · Ref A2OQ4R
Affected page
https://hazelboutique.com/policies/contact-informationElement
div:nth-of-type(2) > div > form > label > span > a:nth-of-type(1)Accessible nameSee terms
Markup
<a href="http://eepurl.com/iwthPw" target="_blank" rel="noopener noreferrer">See terms</a>
Affected pages
/policies/contact-information /pages/contact-usComponent · Ref X9Y3IW
Affected page
https://hazelboutique.com/policies/contact-informationElement
div:nth-of-type(2) > div:nth-of-type(2) > div > form > label > inputAccessible nameI agree to receive recurring promotional and marketing text messages from Hazel Boutique
Markup
<input type="checkbox" name="mc-SMSPHONE-ack" value="true" aria-label="I agree to receive recurring promotional and marketing text messages from Hazel Boutique">
Affected pages
/policies/contact-information /pages/contact-usComponent · Ref E6CAXI
Affected page
https://hazelboutique.com/products/gift-cardElement
div#shopify-block-AZHBnSHd6aURCM01WT__judge_me_reviews_preview_badge_XU4y6V > div > div > span:nth-of-type(1)Accessible nameSee all reviews
Rolebutton
Markup
<span class="jdgm-prev-badge__stars" data-score="0.00" tabindex="0" aria-label="See all reviews" role="button"> <span class="jdgm-star jdgm--off"></span><span class="jdgm-star jdgm--off"></span><span class="jdgm-star jdgm--off"></span><span class="jdgm-star jdgm--off"></span><span class="jdgm-star jdgm--off"></span> </span>
Component · Ref 9YQNG9
Affected page
https://hazelboutique.com/cartElement
div#shopify-section-template--26596969185594__cart-items > cart-items > div > div:nth-of-type(1) > aAccessible nameContinue shopping
Markup
<a href="/collections/all" class="underlined-link">Continue shopping</a>
Component · Ref 29GE8J
Affected page
https://hazelboutique.com/products/gift-cardElement
li#Slide-template--26596969644346__main-34387397280058 > div > modal-opener > buttonAccessible 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="34387397280058">
<span class="visually-hidden">
Open media 1 in modal
</span>
</button>Component · Ref VL2XIB
Affected page
https://hazelboutique.com/Element
div#Slider-template--26596969316666__hero_QK67RCAccessible nameCarousel
Roleregion
Markup
<div class="slideshow banner banner--medium grid grid--1-col slider slider--everywhere banner--mobile-bottom" id="Slider-template--26596969316666__hero_QK67RC" aria-live="polite" aria-label="Carousel" data-autoplay="false" data-speed="5" role="region" tabindex="0"><style>
#Slide-template--26596969316666__hero_QK67RC-2 .banner__media::after {
opacity: 0.0;
}
</style>
<a href="/collections/new-arrivals-1" tabindex="0" target="_top" class="slideshow__slide grid__item grid--1-col slider__slide" id="Slide-template--26596969316666__hero_QK67RC-2" aria-roledes…Component · Ref 0R0GSC
Affected page
https://hazelboutique.com/cartElement
div > div > div > div:nth-of-type(1) > small > aAccessible nameshipping
Markup
<a href="/policies/shipping-policy">shipping</a>