New Components
Focus
The focus is a visible outline or border that shows which element on a webpage is currently selected or being interacted with by the user. It helps users who navigate with a keyboard or use assistive technologies know where they are on the page. This makes it easier to interact with interactive components on a webpage such as buttons, links, or form fields.
When to use
- Use a focus border on elements that can receive focus, such as links, buttons, form fields, and other interactive components.
- Activating an element using a pointing device, such as a mouse, includes actions like clicking buttons, selecting items from a menu, or dragging and dropping objects.
When not to use
- Do not apply focus borders to elements that are not interactive or focusable such as text, table etc…
On this page
Behaviors
Keyboard Navigation
Ensure focused elements are easy to identify when using the Tab key by providing a clear visual indicator, such as a border or outline, with a minimum contrast ratio of 3:1 against the surrounding content.
Mouse Interaction
When navigating with the keyboard, focused elements should visually change (e.g., display a focus border or change background color) to clearly indicate they are active or selected.
Styling
- Concise Indication: Keep focus indicators simple and clear, avoiding excessive styling that may distract users.
- Clear Differentiation: Use distinct visual indicators (such as border or outlines) to differentiate focused elements from others.
- Avoid Disappearance: Ensure focus indicators remain visible and do not get hidden or obscured by overlapping elements.
- If the component has a background color, use CSS to offset the focus border, for example with outline-offset, to ensure it is clearly visible. This will create a visible, clearly separated focus border around the button, even if the background color is present.