Making Websites Friendlier for Everyone: ARIA Labels in HTML
Today, we’re going to talk about something really cool that can make websites better for everyone – it’s called ARIA labels in HTML.
1. Giving Voice to Buttons and Links with aria-label
Sometimes, we have buttons or links without any words on them. ARIA labels help us give them a voice so that everyone knows what they do.
<button aria-label="Close">X</button>2. Connecting Elements with aria-labelledby
When we have a label that we can see on the screen, we can link it to an element. This helps special tools tell people what’s on the page.
<div id="section-heading">Section 1</div>
<p aria-labelledby="section-heading">Content of Section 1</p>3. Painting Detailed Pictures with aria-describedby
Some elements need extra explanation. aria-describedby helps connect an element to a detailed description.
<input type="text" aria-describedby="username-hint">
<div id="username-hint">Please enter your username</div>4. Providing Contextual Clarity with aria-labelledby and aria-describedby
When we want to give both a label and a detailed description, we can use both aria-labelledby and aria-describedby.
<label id="username-label">Username</label>
<input type="text" aria-labelledby="username-label" aria-describedby="username-hint">
<div id="username-hint">Please enter your username</div>5. Real-time Updates with aria-live
aria-live helps elements on a page update in real-time, so everyone can know what’s happening.
<div aria-live="polite">This is a live region</div>6. Concealing the Inconsequential with aria-hidden
For things that are just for looks and don’t tell us important stuff, aria-hidden helps special tools skip over them.
<div aria-hidden="true">Decorative element</div>7. Guiding Towards Interactivity with aria-haspopup
When something opens up like a menu, aria-haspopup tells everyone that there’s more to explore.
<button aria-haspopup="true">Open Menu</button>8. Expanding Possibilities with aria-expanded
This helps us know if something like a section is open or closed, like in a dropdown menu.
<button aria-expanded="true">Collapse Section</button>9. Signaling Selections with aria-selected
For things like tabs or items we can choose, aria-selected shows which one is picked.
<li role="tab" aria-selected="true">Tab 1</li>10. Establishing Connections with aria-controls
This helps connect one thing to another. It’s like saying, “This button controls that menu.”
<button aria-controls="menu">Show Menu</button>
<ul id="menu" hidden>
<li>Option 1</li>
<li>Option 2</li>
</ul>Remember, while ARIA labels are super helpful, they work best when combined with clear and descriptive words. They’re like a helpful tool, but good words are the foundation!
By using ARIA labels in your web projects, you’re making the internet a better place for everyone. Keep up the great work, and keep making the web friendlier for all!
