On this page
In some situations (especially tables) we provide the user with the ability to do similar actions, such as delete the row. The user needs to be able to differentiate between them.
For example, if in a table we provide an icon button to delete the row and each of them is labeled “delete” a screen reader user may not be sure which row they’re about to delete. A better label would be “delete row containing [value]” where the value is unique to the row and recognizable to the user.
How to implement
- During discovery and wireframe review: identify situations where the same content displays multiple times and (assuming they do different things or go different places) identify how each can be differentiated from the others.
- Implement the best way to customize each icon’s alternative text based on your context and implementation needs.
How to test
- Right-click and inspect the icon to use the development tools in the browser.
- Check the alt text or title text to confirm it is unique compared to other instances of that icon on the page.