Posted on by Joe Lamyman in Design and development
Tags: Foundations, Code, WCAG
Visible focus styles help us to understand which part of a web page we're interacting with. You may have seen visible focus styles appear as an outline around a link or a button for example.
For people who only use a keyboard to navigate the web, visible focus styles may be one of the few ways to understand where they are in a page and what it is that they are interacting with.
When browsing with a keyboard, you navigate between the focusable elements on the page using the Tab key. By default, web browsers (such as Chrome, Firefox, and Safari) will highlight focused elements.
You must make sure that focus styles are always included in your websites, as without them, a person using only a keyboard may not be able to understand where they are in a web page and may not be able to use the site. As browsers will automatically provide focus styles with sufficient contrast, you can use these, as long as they aren't suppressed. Alternatively, you may wish to use focus styles that better suit the rest of your website or application's identity, but this still needs to be clearly visible and have sufficient contrast.
Focus styles aren't just limited to links and buttons. Any control that receives focus and can be used with a keyboard must have a visible focus style. This includes custom components that your site may use.
As mentioned earlier, web browsers will provide visible focus styles for interactive elements by default. A good place to start is by checking that focus styles have not been suppressed.
Any CSS that uses the :focus selector will make changes to the visible focus styles. Make sure that styles have not been suppressed without providing an alternative. The following code is an example of CSS code that will suppress focus styles:
a:focus {
outline: none;
}If focus styles have been suppressed, they must be replaced with an alternative that will still allow people to understand where they are in the page.
When designing visible focus styles, ensure they are consistently designed and accounted for on all interactive elements, so that wherever people are on your website, they can always clearly identify which element has focus.
If you have an accessible design system, you should document the focus styles. This will ensure that even when different parts of the website are managed by separate teams, the focus styles will be consistent.
It may be that a dark purple outline works for all elements across your website, or you may find that certain elements need slightly different styling to make the focus state more obvious. Styles should be consistent, but this doesn't mean that they have to be exactly the same. Depending on the context of use, changing the colour, to achieve greater contrast, or size of the focus style may improve the usability of the system.
The GOV.UK design system's focus state styles make focussed links have a yellow background and a black underline, while focussed text fields have a yellow outline and a thick black border. While these styles are not identical, they are consistent and easy to identify. This aligns with the Inclusive Design Principles' "Be consistent" principle, allowing people to build familiarity and understanding in the way that your website works.
Providing good contrast between custom focus styles and any adjacent background colours is important, as people need to be able to easily see focus indicators.
If your website uses lots of different colours, having a single colour for your visible focus state may not work; people may not always be able to see it. To resolve this, using two different coloured outlines can help to provide contrast.
Chrome, Edge, and Firefox all use default focus indicator that has an outer white outline and an inner blue outline. These different colours can provide contrast when the controls appear on different colour backgrounds.
This technique of using two outlines works particularly well if the controls are placed on top of images with lots of different colours in them, or on top of dynamic content such as videos, where you cannot guarantee what the background colour will be. A great starting point that ensures contrast would be to have both a white and a black outline. If there is darker coloured content in the background, the white outline will provide sufficient contrast. If there is lighter coloured content in the background, the black outline will provide sufficient contrast.
One way that this can be achieved is by applying a box-shadow attribute and applying two different coloured shadows to create the double border. The following code sample adds a white inner border and a black outer border.
*:focus {
outline: none;
box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #000;
}Because this approach uses the box-shadow property, people who use Windows' high contrast, or other forced colour modes, will not be able to see the focus styles. This is because forced colours reset the box-shadow property, so the styles will be lost.
To resolve this, you can use a media query that will add in an outline for people using forced colour modes, ensuring that it works for as many people as possible.
*:focus {
outline: none;
box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #000;
}
@media (forced-colors: active) {
*:focus {
outline: 0.2em solid;
}
}Using the :focus selector, the focus styles will be applied regardless of how people are interacting with content. If you use a mouse and click a button that has been styled using :focus, you'll see the styles take effect. This may be confusing for some people and may cause developers to suppress focus, as they don't see the need for focus styles when a user has already targeted the element either with a mouse or touch device.
The :focus-visible selector allows the browser to take into account a handful of different factors to decide whether to show focus, such as:
This means that when using the :focus-visible selector, a user using a mouse or touch device would not see the focus styles when selecting a button, as the browser has determined that it may not be helpful. This approach can be used to provide visible focus styles, when most helpful to the user, without distracting them when they are already selecting an element.
The following code sample uses the same double border approach discussed earlier, with the :focus-visible selector.
*:focus-visible {
outline: none;
box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #000;
}
@media (forced-colors: active) {
*:focus-visible {
outline: 0.2em solid;
}
}The only exception to this is that for any elements that support keyboard input, such as a text field using the <input> element, focus will be shown regardless.
Read more accessibility foundations posts or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。