Agriculture Design System
Design System for import and export services

Task list

Task list is a navigation tool that show users what input is required to complete a task or transaction.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/task-list';

Learn more about how to meet WCAG success criteria when implementing task lists. This makes them accessible and inclusive for users of all abilities and situations.

The task list component passed accessibility testing in 2022.

Requirements

  • Each task list item has clear, concise and descriptive link text.
  • Each link should be distinguishable from the others.

Benefits

  • Screen reader users can understand the purpose of each link before activating it.
  • All users can identify and navigate between tasks.

WCAG references

Task status

Requirements

  • Communicate status changes on screen and to assistive technologies.
  • Use a clear status label, so that colour is not used as the only visual means of conveying the state of a task.
  • Semantic HTML that conveys current task and its position in sequence, if the tasks are ordered.

Benefits

  • Provides clear interaction feedback to all users.
  • Helps users understand where they are up to in their task list.
  • Reduces anxiety and confusion by confirming completed tasks.
  • Screen reader users can understand which tasks are complete and how many remain.
  • Assistive technologies can convey the purpose of each task and current progress.
  • Improves usability for voice control software users.

WCAG references