Agriculture Design System
Design System for import and export services

Focus management

The focus indicator shows which element has focus. Good focus management helps all users track their position, but it’s essential for people with low vision.

Focus management in AgDS

We consider focus management throughout the design system in our components and patterns. This helps you get started with focus management in your digital products and services.

Focus management in our components achieved full WCAG conformance in accessibility audits in 2022 and 2024. Implementation of AgDS focus management in our patterns is demonstrated in the yourGov application.

Requirements

  • A clear focus indicator that is visually distinct from both the default and hover states.
  • Focus indicators have a minimum contrast ratio of 3:1 against adjacent colours and backgrounds.
  • Keyboard focus is always visible.
  • Focus indicators are not removed unless an equivalent visual indicator is provided.
  • When an object in focus is deleted, such as closing a section alert, focus moves to the next appropriate element.

Benefits

  • Makes it easier to locate interactive elements and focusable sections on the page for users with low vision.
  • Ensures users can track their position when navigating via keyboard.
  • Reduces accidental clicks or taps by clearly defining interactive areas.
  • Assists users with limitations in executive function, attention or short-term memory find the focus location on the page.
  • Restores focus after an action has taken place – for example, closing a drawer.

WCAG references