Kilotest: Diagnoses of z-index not zero
violation by HTML element 130 on The Beauty Shop page
Basics
About the The Beauty Shop page
- URL: https://www.thebeauty-shop.com/
- Tested 16 days ago by job
ajzon 2026-07-04 at 23:17
About HTML element 130
- Tag name:
HEADER - Text:
Skip to Content … Contact
- Start tag:
<header data-test="header" id="header" class="white header theme-col--primary" data-section-theme="white" data-controller="Header" data-current-styles="{ "layout": "navRight", "action": { "href": "/donate", "buttonText": "Donate", "newWindow": false }, "showSocial": false, "socialOptions": { "socialBorderShape": "none", "socialBorderStyle": "outline", "socialBorderThickness": { "unit": "px", "value": 1.0 } }, "sectionTheme": "white", "menuOverlayTheme": "white", "menuOverlayAnimation": "fade", "cartStyle": "cart", "cartText": "Cart", "showEmptyCartState": true, "cartOptions": { "iconType": "solid-7", "cartBorderShape": "none", "cartBorderStyle": "outline", "cartBorderThickness": { "unit": "px", "value": 1.0 } }, "showButton": false, "showCart": false, "showAccountLogin": false, "headerStyle": "solid", "languagePicker": { "enabled": false, "iconEnabled": true, "iconType": "globe", "flagShape": "shiny", "languageFlags": [ { "languageCode": "en", "countryCode": "gb" }, { "languageCode": "es", "countryCode": "es" } ] }, "iconOptions": { "desktopDropdownIconOptions": { "size": { "unit": "em", "value": 1.0 }, "iconSpacing": { "unit": "em", "value": 0.35 }, "strokeWidth": { "unit": "px", "value": 1.0 }, "endcapType": "square", "folderDropdownIcon": "none", "languagePickerIcon": "openArrowHead" }, "mobileDropdownIconOptions": { "size": { "unit": "em", "value": 1.0 }, "iconSpacing": { "unit": "em", "value": 0.15 }, "strokeWidth": { "unit": "px", "value": 0.5 }, "endcapType": "square", "folderDropdownIcon": "openArrowHead", "languagePickerIcon": "openArrowHead" } }, "mobileOptions": { "layout": "logoLeftNavRight", "menuIconOptions": { "style": "doubleLineHamburger", "thickness": { "unit": "px", "value": 1.0 } } }, "solidOptions": { "headerOpacity": { "unit": "%", "value": 100.0 }, "blurBackground": { "enabled": false, "blurRadius": { "unit": "px", "value": 12.0 } }, "backgroundColor": { "type": "SITE_PALETTE_COLOR", "sitePaletteColor": { "colorName": "white", "alphaModifier": 1.0 } }, "navigationColor": { "type": "SITE_PALETTE_COLOR", "sitePaletteColor": { "colorName": "black", "alphaModifier": 1.0 } } }, "gradientOptions": { "gradientType": "faded", "headerOpacity": { "unit": "%", "value": 90.0 }, "blurBackground": { "enabled": false, "blurRadius": { "unit": "px", "value": 12.0 } }, "backgroundColor": { "type": "SITE_PALETTE_COLOR", "sitePaletteColor": { "colorName": "white", "alphaModifier": 1.0 } }, "navigationColor": { "type": "SITE_PALETTE_COLOR", "sitePaletteColor": { "colorName": "black", "alphaModifier": 1.0 } } }, "dropShadowOptions": { "enabled": true, "blur": { "unit": "px", "value": 30.0 }, "spread": { "unit": "px", "value": 0.0 }, "distance": { "unit": "px", "value": 0.0 }, "color": { "type": "SITE_PALETTE_COLOR", "sitePaletteColor": { "colorName": "black", "alphaModifier": 1.0 } } }, "borderOptions": { "enabled": false, "position": "allSides", "thickness": { "unit": "px", "value": 4.0 }, "color": { "type": "SITE_PALETTE_COLOR", "sitePaletteColor": { "colorName": "black", "alphaModifier": 1.0 } } }, "showPromotedElement": false, "buttonVariant": "primary", "blurBackground": { "enabled": false, "blurRadius": { "unit": "px", "value": 12.0 } }, "headerOpacity": { "unit": "%", "value": 100.0 } }" data-section-id="header" data-header-style="solid" data-language-picker="{ "enabled": false, "iconEnabled": true, "iconType": "globe", "flagShape": "shiny", "languageFlags": [ { "languageCode": "en", "countryCode": "gb" }, { "languageCode": "es", "countryCode": "es" } ] }" data-first-focusable-element="" tabindex="-1" style=" --headerDropShadowColor: hsla(var(--black-hsl), 1); --headerBorderColor: hsla(var(--black-hsl), 1); --solidHeaderBackgroundColor: hsla(var(--white-hsl), 1); --solidHeaderNavigationColor: hsla(var(--black-hsl), 1); --gradientHeaderBackgroundColor: hsla(var(--white-hsl), 1); --gradientHeaderNavigationColor: hsla(var(--black-hsl), 1); " data-controllers-bound="Header"> - XPath:
/html/body/div[1]/header[1] - Bounding box: x = 0, y = 0, width = 1920, height = 74
About the z-index not zero
issue
- Why it matters: User cannot predict the effect of clicking
- Priority: lowest
- Related WCAG standard: 1.4
Diagnoses
Here is how rule engines diagnose the z-index not zero
issue for HTML element 130 of the The Beauty Shop page.
- z-index style property of the element is 10
Tool: Testaro (CVS Health)
Rule:
zIndex