WCAG 2.2 (AAA) SC 2.4.13 Focus Appearance (w3.org)
Issue description
WCAG 2.4.13, “Focus Appearance” aims to provide users with a higher level of control over the appearance of the keyboard focus indicator. This Level AAA criterion recognizes that the default focus indicators provided by browsers might not be suitable for all users, and some individuals might benefit from customizing the appearance to better suit their needs.
While WCAG 2.4.7 (Focus Visible) requires a clear focus indicator, the default indicators might present challenges for some users:
- Low vision: Users with low vision might find the default focus indicator difficult to see or distinguish, especially if it has low contrast or is too thin.
- Cognitive differences: Some users with cognitive disabilities might find the default focus indicator distracting or confusing.
- User preferences: Some users simply prefer a different style of focus indicator that better suits their visual preferences or needs.
WCAG requirements
This guideline requires that user interface components that receive keyboard focus have a “mode of operation” where the appearance of the focus indicator can be customized by the user. This means providing options to:
- Change the focus indicator’s style: Allow users to change the color, size, shape, or other visual characteristics of the focus indicator.
- Choose from different styles: Offer a selection of predefined focus indicator styles that users can choose from.
- Adjust contrast: Allow users to adjust the contrast of the focus indicator.
Benefits
- Personalization: Users can customize the focus indicator to suit their individual visual needs and preferences.
- Improved visibility: Users with low vision can choose a focus indicator style that is easier for them to see.
- Reduced distractions: Users with cognitive disabilities can choose a less distracting style.
- Enhanced user experience: Providing customization options allows users to create a more comfortable and personalized browsing experience.
Essentially, this criterion promotes greater user control and flexibility by allowing individuals to adjust the appearance of the focus indicator to meet their specific needs and preferences.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.4.3 Focus Order
- WCAG (Level AA) SC 2.4.7 Focus Visible
- WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum)
- WCAG 2.2 (AAA) SC 2.4.12 Focus Not Obscured (Enhanced)
- WCAG (Level A) SC 3.2.1 On Focus
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.13, “Focus Appearance” involves providing users with a way to customize the appearance of the keyboard focus indicator. This allows them to adjust the focus indicator to better suit their visual needs and preferences. Here’s how:
Provide customization options
- Style options: Allow users to change the visual style of the focus indicator. This could include:
- Color: Offer a choice of colors for the focus indicator.
- Size: Allow users to adjust the thickness or size of the indicator.
- Shape: Provide different shapes for the indicator (e.g., solid outline, dotted outline, underline).
- Effects: Allow users to add effects like a glow or shadow to the indicator.
- Predefined styles: Offer a selection of predefined focus indicator styles that users can choose from. This can be helpful for users who don’t want to manually customize every aspect.
- Contrast adjustment: Allow users to adjust the contrast of the focus indicator against the background and surrounding content.
Implementation
- User settings: Provide a dedicated “Accessibility Settings” section or integrate the customization options into the user’s profile settings.
- Browser extensions: Consider supporting browser extensions that allow users to customize focus indicators across different websites.
- CSS variables: Use CSS variables (custom properties) to make it easier to update the focus indicator styles dynamically based on user preferences.
Testing
- Assistive technology testing: Test the customization options with screen readers and other assistive technologies to ensure they are accessible and usable.
- User testing: Conduct user testing with people with low vision and cognitive disabilities to get feedback on the effectiveness of the customization options.
Example
You could provide a settings panel with the following options:
- Focus indicator color: A color picker to choose the color of the focus indicator.
- Focus indicator thickness: A slider to adjust the thickness of the indicator.
- Focus indicator style: A dropdown menu with options like “solid outline,” “dotted outline,” and “underline.”
- Focus indicator contrast: A slider to adjust the contrast of the indicator.
By providing these customization options, you empower users to adjust the appearance of the focus indicator to meet their individual needs and preferences, creating a more inclusive and accessible experience for everyone.
