Accessible Labels & Descriptions
What are ARIA Labels?
Imagine a door in a building that has no text label but has a small icon of a trash can on it. People can see the icon and know it's a bin, but a blind visitor wouldn't know what the door is for unless someone tells them.In HTML, ARIA (Accessible Rich Internet Applications) attributes help describe elements that don't have visible text labels:
aria-label="text": Provides a hidden text description of an element (like a close button with a ✖ icon). Screen readers will read the label (e.g., "Close Window") instead of the icon text.aria-hidden="true": Tells screen readers to completely ignore decorative icons or visuals, preventing clutter.Why does it matter?
Modern websites use many visual icons (like search magnifying glasses, shopping carts, and close crosses) instead of raw text. Withoutaria-label, screen readers will just read "magnifying glass" or "cross" aloud, leaving users confused about what the button actually does.
How to write it
Addaria-label to buttons, links, or inputs that lack plain text descriptions:
<button aria-label="Close Window">❌</button>
Button has aria-label
Common Mistakes
aria-label where text already exists: If a button says "Submit", you don't need aria-label="Submit". That's redundant! Only use it for icon-only elements.Quick Reference
aria-label="description" — Sets an accessible text label.aria-hidden="true" — Hides decorative elements from screen readers.Your Task
Add an `aria-label` set to 'Close Window' on the close icon button.
index.html
Type code above to start the lesson.
Live Preview