Styles
Focus
Show users which page element has keyboard focus.
Contents
In accordance with the Web Content Accessibility Guidelines (WCAG) version 2.2 level AA, Success Criteria 2.4.7: Focus visible (level AA), we need to show users which page element has keyboard focus.
The National Archives use WCAG technique C40; creating a two-color focus indicator to ensure sufficient contrast with all components.
This focus indicator uses yellow and black borders which also meets Success Criteria 2.4.13: Focus appearance (level AAA).
Larger hit areas
We can increase the hit area and focus indicator to parent elements to make elements easier to click on. This technique is used for the fully clickable cards.
HTML
<div class="tna-container tna-!--padding-bottom-m">
<div class="tna-column tna-column--width-1-2 tna-column--full-tiny tna-!--margin-top-m">
<div class="tna-aside tna-aside--tight tna-background-tint">
<h2 class="tna-heading-s">
<a href="#" class="tna-link--no-visited-state">Normal link</a>
</h2>
<p>By default, the focus state of an element is only applied to the element itself. This means that the hit area of the focus state is limited to the text of a link or the content of a button.</p>
</div>
</div>
<div class="tna-column tna-column--width-1-2 tna-column--full-tiny tna-!--margin-top-m">
<div class="tna-aside tna-aside--tight tna-background-tint click-parent">
<h2 class="tna-heading-s">
<a href="#" class="tna-link--no-visited-state">Link with larger hit area</a>
</h2>
<p>The focus state of an element can be applied to a larger area around the element to increase the hit area of the element and make it easier for users to interact with the element.</p>
</div>
</div>
</div>
To expand the hit area, use the faux-full-outline function from the accessibility tools. Consider adding a hover state to the parent element to reinforce the interactable area.
@use "@nationalarchives/frontend/nationalarchives/tools/a11y";
@use "@nationalarchives/frontend/nationalarchives/tools/colour";
.click-parent {
&:hover {
box-shadow: 0 0 0 3px colour.colour-var("link");
}
@include a11y.faux-full-outline("a");
}