Ensures aria-hidden elements are not focusable nor contain focusable elements.
Axe Reference
Rule type:
WCAG 2.0 A,
WCAG SC 4.1.2,
EN-301-549,
EN-9.4.1.2
-
<header class="block w-full
c-header bg-gray-500
lg:bg-transparent lg:overflow-hidden" aria-hidden="true" style="position: absolute; left: 100%;">
Element selector:
header:nth-child(2)
Failing checks (All of these should pass)
-
Check that focusable elements are not tabbable in the current state
header:nth-child(2) > .l-container > .flex-col-reverse.lg\:items-end.lg\:-mx-hsu > .c-header__content.lg\:flex-basis-1-3.lg\:flex-shrink > .c-header__main.lg\:py-8.xl\:pb-12 > div > .mt-4 > .focus\:text-navy.c-arrow-cta.leading-none
-
<header class="block w-full
c-header bg-gray-500
lg:bg-transparent lg:overflow-hidden" aria-hidden="true" style="position: absolute; left: 200%;">
Element selector:
header:nth-child(3)
Failing checks (All of these should pass)
-
Check that focusable elements are not tabbable in the current state
header:nth-child(3) > .l-container > .flex-col-reverse.lg\:items-end.lg\:-mx-hsu > .c-header__content.lg\:flex-basis-1-3.lg\:flex-shrink > .c-header__main.lg\:py-8.xl\:pb-12 > div > .mt-4 > .focus\:text-navy.c-arrow-cta.leading-none