Focus states

Focus states are essential for users navigating with keyboards, screen readers, or other assistive technologies. They indicate which element is currently active and ready for interaction.

Without proper focus indicators, users can get lost, make mistakes, or be blocked from completing tasks. Even mouse users benefit from visible focus when switching between inputs, forms, or buttons.

Focus states are not just a compliance requirement, they are a fundamental UX element that improves orientation, confidence, and efficiency.

Guidelines for designing focus states.

Always provide visible focus indicators

Every interactive element (links, buttons, inputs) must have a visible focus style distinct from hover or active states. Do not remove the browser’s default outline without providing a clear replacement.

References:

• WCAG 2.4.7: Focus visible
• Keyboard accessibility – WebAIM

Use strong visual indicators

Focus states should be high-contrast and clearly visible against all backgrounds. Examples: outlines, underlines, background changes.

References:

• 5 visual treatments that improve accessibility – Nielsen Norman Group

Ensure keyboard navigation order is logical

Focus should move in the same order as the visual layout. Test with the Tab key to ensure predictable flow.

References:

• WCAG 2.4.3: Focus order

Differentiate focus from hover

Users navigating with both mouse and keyboard must clearly distinguish focus from hover states.

References:

• Inclusive components – Heydon Pickering

Maintain focus context after dynamic updates

When content updates (modals, accordions, infinite scroll), keep focus in context or move it logically (for example: to the modal header).

References:

• ARIA Authoring Practices – W3C

Support custom focus styles in design systems

Define consistent focus tokens in your design system to ensure alignment across products.

References:

• Focus guidelines – Google Material Design

Frequent mistakes in focus state design.

Removing default focus outlines without replacement

Leaves keyboard users without orientation.

Low-contrast focus indicators

Subtle glows or faint borders often fail WCAG contrast requirements.

Skipping elements in focus order

Custom components that don’t follow DOM order confuse screen reader and keyboard users.

Moving focus unpredictably

Jumping focus to unrelated areas after actions (for example: back to the top of the page) disorients users.

Key takeaways for focus states.

• Every interactive element must have a visible, high-contrast focus state.
• Keyboard navigation order should be logical and predictable.
• Focus must remain consistent during dynamic updates.
• Never remove focus outlines without providing an accessible alternative.

Strong focus states help users stay oriented, confident, and efficient. Weak or missing ones block access entirely.

Scenario: Custom focus indicators

Use when designing focus states that replace browser defaults while remaining accessible: for products with custom design systems or brand-specific styling.

You are a UX-focused design agent. Design custom focus states for [context: web application / marketing website / mobile-first product].

Rules:
- Never use outline: none without providing a custom replacement
- Custom focus style requirements (WCAG 2.4.11):
  Minimum 3:1 contrast ratio against adjacent background
  Minimum 2px perimeter around the element
- Recommended approach:
  outline: 2px solid [brand color]; outline-offset: 2px;
- Per component type:
  Buttons: 2px outline around entire button with 2px offset
  Text inputs: thicker border on focus (1px → 3px) in brand color
  Checkboxes / radio: outline around the label + control together
  Links: outline around link text, or background highlight
  Cards: outline around entire card, or left border highlight
- Use :focus-visible (shows focus only on keyboard navigation, not mouse click)
  Provide :focus as fallback for older browsers
- Use outline not box-shadow — box-shadow disappears in Windows High Contrast Mode
- Test by navigating with Tab only: every interactive element must be visibly focused

Accessibility:
- High Contrast Mode: test in Windows Forced Colors mode
- All focus indicators: 3:1 minimum contrast against adjacent background

Constraints:
- Never use outline: none without a custom replacement
- Never use box-shadow alone — it disappears in High Contrast Mode
- Never make focus indicators the same color as the element background