/* ------------------------------------------------------------------ ENC001-14 — restore a visible keyboard focus indicator SortSite: WCAG 2.1 AA F78 / Section 508 (2017) AA F78, SC 2.4.7 "The CSS outline or border style on this element makes it difficult or impossible to see the link focus outline." Reported against :focus having "outline: invert none 0px" on the CookieYes consent region and four links. CAUSE Kadence ships this in assets/css/global.min.css: :where(html:not(.no-js)) .hide-focus-outline *:focus{outline:0} and puts .hide-focus-outline on ; navigation.min.js removes it on the first keydown and restores it on mousedown. The intent is right — no ring for mouse users, a ring for keyboard users — but it is a JS class swap, so until a key is pressed the computed :focus style of every focusable element is outline-style:none. That is a real gap, not only a scanner artifact: on this page the CookieYes banner absorbs the first keydown, so the ring did not appear until the second Tab. FIX Hand the mouse-versus-keyboard distinction to :focus-visible, which the browser resolves natively with no JS, and give :focus a real outline again underneath it. This is the pattern SortSite's own guidance links to, and the one CookieYes already uses on its buttons — note that those buttons were NOT flagged in the scan, while the elements governed only by Kadence's blanket rule were. outline-style:auto rather than a fixed colour on purpose. These elements sit on both the pale hero background and the navy footer, and the browser's own ring is drawn to stay visible on any backdrop. It is also literally what the SortSite guidance asks for: "Do not remove the default outline style." SPECIFICITY, NOT !important Kadence's selector computes to (0,2,0). The rules below compute to (0,2,1) and (0,3,1), and this sheet is enqueued at wp_enqueue_scripts priority 20, after the theme's. ------------------------------------------------------------------ */ /* 1. The keyboard focus ring. Covers every element SortSite flagged: the four links and the CookieYes consent region, which is a div with tabindex="0" and role="region". */ body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible, body summary:focus-visible, body [role="button"]:focus-visible, body [role="link"]:focus-visible, body [role="region"]:focus-visible, body [tabindex]:focus-visible { outline-style: auto; outline-width: 3px; outline-offset: 2px; } /* 2. Undo Kadence's blanket suppression, so the computed :focus style is never outline-style:none. */ body.hide-focus-outline *:focus, body:not(.hide-focus-outline) *:focus { outline-style: auto; outline-width: 3px; outline-offset: 2px; } /* 3. Mouse and touch users keep a clean interface. :focus-visible is only matched for input methods the browser judges to need a visible indicator, which is keyboard in every current engine. */ body.hide-focus-outline *:focus:not(:focus-visible), body:not(.hide-focus-outline) *:focus:not(:focus-visible) { outline-style: none; } /* 4. Skip-link and script targets. tabindex="-1" elements are never reached by Tab — they are focused programmatically, e.g. Kadence moving focus to #primary after "Skip to content". Ringing them would draw a box around the whole content area on skip, which is why Kadence suppressed it. Keep that suppression; it costs no keyboard user anything. */ body [tabindex="-1"]:focus, body [tabindex="-1"]:focus-visible { outline-style: none; } /* ------------------------------------------------------------------ Links inside footer text blocks SortSite / WCAG 2.1 AA SC 1.4.3 (contrast), SC 1.4.1 (use of colour) The footer sits on navy (rgb(28,59,103)) with white text, but Kadence's global link colour is near-black. A link dropped into one of those paragraphs renders at 1.61:1 and is effectively invisible. Inherit the surrounding text colour instead, and underline so the link is still distinguishable without relying on colour alone. ------------------------------------------------------------------ */ .site-footer .wp-block-kadence-advancedheading a { color: inherit; text-decoration: underline; }