Focus Appearance
Summary:
WCAG 2.4.13, "Focus Appearance," focuses on ensuring that the keyboard focus indicator is highly visible and distinct. This AAA criterion is vital for keyboard users, particularly those with vision disabilities, to easily identify which element has the focus.
What:
This guideline requires a prominent visual indicator for the focused component, ensuring it stands out clearly from its surroundings and other elements.
Why:
A clear and distinct focus indicator is essential for users who navigate using a keyboard. It aids them in tracking their current position on the page, enhancing usability and accessibility.
Examples and Scenarios:
- Highlighted Form Fields: When a user tabs to a form field, it should have a distinct border or background change.
- Navigation Menus: As users move through a menu, the current item should be visually highlighted.
- Button Interactions: Focused buttons should have a clear and visible outline or color change.
How to Comply:
- Websites: Apply CSS styles to enhance the visibility of the focus indicator, such as outlines, underlines, or background changes.
- Mobile Apps: Ensure that elements in the app have a distinct appearance when focused, even when navigated with an external keyboard.
- Software Applications: Design interfaces where focus indicators are clear and visually prominent.
Exceptions:
- Subtle Focus Indicators: In certain design contexts, a more subtle focus indicator might be used, but it should still be sufficiently visible.
- Complex Components: Some components with complex interactions might require innovative ways to indicate focus while maintaining the overall design integrity.