Identify the Purpose of User Interface Components
Clearly define the purpose of all controls, icons, and key regions on a page using code. This helps users understand their function, especially those with cognitive disabilities who might find it challenging to interpret controls based on names alone.
Acceptance Criteria
• Programmatic Identification: Ensure that the purpose of user interface components, icons, and regions can be programmatically determined using appropriate code or attributes.
• Clear Meaning: Use ARIA roles, landmarks, or other markup techniques to describe the purpose and function of key elements on the page.
Examples
- Good: A website uses ARIA landmarks (e.g.,
<nav>,<main>,<header>) to help users quickly identify and navigate key regions of the page, and to enable users to hide or highlight specific sections. - Good: Icons are given descriptive labels or ARIA attributes (e.g.,
aria-label="Search") so users can understand their function and replace or modify them as needed. - Bad: Icons or controls are used without any descriptive code or labels, making it unclear what their purpose is or how to interact with them.
Exceptions
• Custom Icons: If custom icons are used, ensure they have appropriate alternative text or ARIA labels to convey their meaning.
• Dynamic Content: For dynamically changing content, ensure that updates to the purpose or function of components are reflected programmatically and conveyed to users.
Tips
• Use ARIA roles and attributes to provide additional context for controls and regions.
• Ensure that all icons and components have descriptive labels or text alternatives.
• Test with users to ensure that all controls and regions are clearly identified and understood.
How to test?
1. Code Review: Check that all controls, icons, and key regions use appropriate ARIA roles, landmarks, or other descriptive code to define their purpose.
2. Assistive Technology Check: Test with screen readers or other assistive technologies to ensure that the purpose and function of components are conveyed correctly.
3. User Feedback: Collect feedback from users, including those with cognitive disabilities, to verify that they can understand and navigate the content effectively.