A wheel chair sign reading "Step free route" on it.
| |

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>

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!

Photo by Yomex Owo on Unsplash

Similar Posts