Introduction: Naming Things Correctly Everything on your website needs a name. For a person who can see, the name of a “Search” button is usually the word “Search” written on it. But what if the button is just an icon of a magnifying glass? To a screen reader, that button has no name. It might just say “Button,” which is as helpful as a signpost that just says “Sign.” This is where naming attributes come in.
Labels vs. Descriptions: The Difference
There are three main ways to give an element a name or more info:
- aria-label: Use this when there is no visible text. If you have a “Close” button that is just an “X” icon, you add aria-label=”Close”. The screen reader says “Close,” even though the word isn’t on the screen.
- aria-labelledby: Use this when the text already exists somewhere else on the page. For example, if you have a section of “Terms and Conditions” and a checkbox, you can point the checkbox to the section title.
- aria-describedby: This is for extra information. If a password field requires 8 characters, the label is “Password,” but the description is “Must be 8 characters.” This attribute tells the screen reader to read the extra hint after the name.
The Golden Rule of Labels
Never use aria-label to say the same thing that is already written on the screen. If a button says “Submit,” and you add aria-label=”Submit”, some screen readers will say “Submit Submit.” It’s redundant and annoying. Use these attributes to fill in the gaps, not to repeat what’s already there.