Accessibility Basics: ARIA Labels Introduction

If you’ve ever used a website and felt lost, imagine how much harder it can be for someone using a screen reader. That’s where ARIA labels come in. They help people who can’t see the screen understand what’s on a webpage and how to use it.

In this beginner-friendly guide, you’ll learn what ARIA labels are, when to use them, and how to add them to your own HTML. You don’t need any previous coding experience—just curiosity and a little patience.

---

What Are ARIA Labels (In Simple Terms)?

ARIA stands for Accessible Rich Internet Applications. It’s a set of special attributes (extra information) you can add to HTML so assistive technologies, like screen readers, can describe what’s happening on the page.

An ARIA label is a short piece of text that tells assistive technology what something is or what it does. People who can’t see the screen will hear this label spoken out loud.

You’ll most often see:

• aria-label — gives an invisible label directly on an element
• aria-labelledby — points to another element that already has the text label

Don’t worry if these names look confusing now. We’ll walk through them step by step with examples.

---

Why ARIA Labels Matter

Not everyone uses a mouse or can see your icons or colors. Many people use:

• Screen readers (software that reads the page aloud)
• Keyboards or switch devices instead of a mouse

Without ARIA labels, these users may only hear:

"Button, button, button"

instead of:

"Search button", "Close menu button", "Submit form button"

Adding ARIA labels:

• Makes your website easier and safer to use
• Shows you care about all users
• Can even help meet legal accessibility requirements

And the best part: the code changes are often small but powerful.

---

Step 1: Start with a Basic Button

Let’s begin with a very simple HTML button. If you’ve never seen HTML before, think of it like labels around content that tell the browser what things are.

<!-- A basic button without ARIA -->
<button>
  Click me
</button>

For sighted users, this looks fine: a button that says “Click me.” A screen reader will also read “Click me,” so this example is already understandable.

Key idea: If your button already has clear text that explains what it does, you might not need an ARIA label at all. Plain, descriptive text is often the best option.

Try it yourself:

1. Open a plain text editor (like Notepad on Windows or TextEdit on Mac set to plain text).
2. Copy the code above into a file.
3. Save it as button.html.
4. Double-click the file to open it in your browser.

You should see a simple button.

---

Step 2: When You Need aria-label

Now imagine you have a button that only shows an icon, like a magnifying glass for search. Visually, it’s clear. But a screen reader might only say “button,” which is not helpful.

Here’s a button without a text label:

<!-- Icon-only button without an ARIA label -->
<button>
  🔍
</button>

This looks like a search button, but a screen reader user might not know that. Let’s fix it with aria-label.

<!-- Icon-only button with an ARIA label -->
<button aria-label="Search">
  🔍
</button>

What’s happening here?

• button — tells the browser this is a clickable button.
• 🔍 — the icon users see.
• aria-label="Search" — invisible text that a screen reader will read as “Search.”

Now, when someone using a screen reader lands on this button, they’ll hear:

"Search, button"

This is much clearer and more usable.

Try it yourself:

Replace your previous button in button.html with the ARIA example, save, and refresh the page. It will look the same, but now it’s more accessible for assistive technology.

---

Step 3: Using aria-labelledby to Reuse Existing Text

aria-label works best for short, clear labels. But sometimes you already have text on the page that describes the element. In that case, you can point to that text using aria-labelledby instead of typing the label again.

Here’s a simple example with a heading and a button:

<h2 id="newsletter-title">Join our newsletter</h2>
<button>Sign up</button>

A screen reader user might reach the button and hear just:

"Sign up, button"

That’s okay, but we can make it clearer that this is about the newsletter.

<!-- Heading with an id that can be referenced -->
<h2 id="newsletter-title">Join our newsletter</h2>

<!-- Button linked to the heading using aria-labelledby -->
<button aria-labelledby="newsletter-title">
  Sign up
</button>

What’s happening here?

• id="newsletter-title" — gives the heading a unique name.
• aria-labelledby="newsletter-title" — tells assistive technology: “Use the text from the element with this id as the label.”

Now a screen reader might say:

"Join our newsletter, Sign up, button"

This gives more context: users know what they’re signing up for.

Tip: Use aria-labelledby when you already have good visible text on the page that explains the element.

---

Step 4: Labelling Form Fields with ARIA

Forms can be especially confusing without proper labels. Let’s look at a basic email input field.

<!-- Email field without a visible label (not ideal) -->
<input type="email" placeholder="Enter your email">

Visually, this seems fine: users see the placeholder text “Enter your email.” But screen readers may not treat placeholders as reliable labels, and the text can disappear as soon as you start typing.

A better version uses a proper <label> element:

<!-- Email field with a visible label (best practice) -->
<label for="email">
  Email address
</label>
<input id="email" type="email" placeholder="Enter your email">

Here:

• label for="email" — connects the label with the input.
• input id="email" — gives the input an id to match the label.

Now a screen reader user will hear something like:

"Email address, edit text"

This is great, and in many cases you don’t need ARIA at all if you use proper HTML labels.

So when does ARIA help here? When you can’t use a visible label, but you still want a proper name for the field.

<!-- Email field with aria-label (no visible label) -->
<input
  id="email"
  type="email"
  placeholder="Enter your email"
  aria-label="Email address"
>

Now:

• aria-label="Email address" — gives the input an invisible but accessible label.

A screen reader user hears:

"Email address, edit text"

Remember: Visible labels plus good HTML are usually better than ARIA. Use ARIA as a helper when standard HTML isn’t enough.

---

Step 5: A Small Interactive Exercise

Let’s combine what you’ve learned into a tiny “search form” that’s more accessible.

<!-- Simple accessible search form -->
<form>
  <!-- Visually hidden label for screen readers only -->
  <label for="site-search" style="position:absolute; left:-9999px;">
    Search this site
  </label>

  <input
    id="site-search"
    type="search"
    placeholder="Search..."
  >

  <!-- Icon-only button with aria-label -->
  <button type="submit" aria-label="Submit search">
    🔍
  </button>
</form>

What this does

• The label is moved off-screen with CSS so sighted users don’t see it, but screen readers still can.
• The input has a proper label through the for / id connection.
• The button uses aria-label so a screen reader knows this icon submits the search.

Try it yourself:

1. Create a new file called search.html.
2. Copy the form code above into the file.
3. Open it in your browser.
4. Type something in the search box and click the button. (It won’t actually search, but you’ll see how it behaves.)

If you have access to a screen reader (for example, VoiceOver on Mac or Narrator on Windows), try turning it on and navigating to the form to hear how it’s announced.

---

Common ARIA Label Mistakes to Avoid

As you start using ARIA labels, keep these simple rules in mind:

1. Don’t use ARIA when HTML already does the job.
   • Use real <button>, <a>, <label> elements first.
2. Keep labels short and clear.
   • Example: aria-label="Close" is better than aria-label="Click here to close this popup window".
3. Don’t duplicate information.
   • If an element already has clear text, you usually don’t need aria-label as well.
4. Make sure ids are unique.
   • When using aria-labelledby, the id you point to must exist and be unique on the page.

You don’t have to be perfect from day one. Every small improvement helps someone.

---

Quick Recap and What’s Next

You’ve just taken an important first step into web accessibility. You learned:

• What ARIA labels are and how they help screen reader users.
• When to use aria-label for icon-only buttons and inputs.
• How aria-labelledby can reuse existing text on the page.
• Why standard HTML (like proper labels and buttons) should be your starting point.

From here, you can explore more ARIA features like roles and states, but don’t rush. Keep practicing with small examples and continue to think: “How will someone using a screen reader understand this?”

You’re already making the web more inclusive, one label at a time—and that’s a win worth celebrating.