Task list
Task list is a navigation tool that show users what input is required to complete a task or transaction.
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.
Clear and descriptive links
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
- Understanding success criterion 1.3.1 Info and relationships
- Understanding success criterion 1.4.1 Use of colour
- Understanding success criterion 4.1.2 Name, role, value