Icons and buttons are consistently identifiable
It should be obvious that using consistent identification across your website helps your users move around, interact and do what it is you want them to do. Sadly, it’s often overlooked and buttons, icons or links with the same function look completely different.
Users with screen readers and screen magnifiers benefit even further from consistent identification. They often use familiarity as a means of understanding and selecting functions. Therefore, elements with the same function should be labelled and appear consistent across your website. This includes visually hidden labels for screen readers.
What to do
- Any icons used are consistent (for example, ‘Print page’ or Twitter link); and
- Elements with the same function are labelled and named consistently; or
- Elements with the same function have a consistent text alternative.
- Consistent is not the same as identical (for example, an arrow icon might link to the next page in a series, but depending on the page the text alternative would be ‘Go to page X’).
- An image can have different meanings in different contexts, so require different text alternatives to pass this guideline. For example, a tick icon or check mark can mean both ‘fishing line included with purchase’ and ‘registration form filled in successfully’).
- Guideline 1.1.1 – Non-text Content
- Guideline 2.4.4 – Link Purpose (In Context)
- Guideline 2.4.9 – Link Purpose (Link Only)
- Guideline 3.2.2 – Consistent Navigation
- Guideline 4.1.2 – Name, Role, Value
- Understanding Success Criterion 3.2.4 (W3C)
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.