What is the use of aria-label, aria-labelledby, and aria-live?

HTMLAccessibility

Introduction

Hey! So if you're prepping for interviews (especially at top tech companies), you'll likely get asked about accessibility. These three ARIA attributes come up a lot, and honestly, once you understand what problem each one solves, they're pretty straightforward.

Let me break them down for you.

aria-label

Think of aria-label as a way to give screen readers a description when there's no visible text. You know those icon-only buttons? Like a close button that's just an "X" very commonly seen in modal dialogs? That's where aria-label shines.

<!-- Without aria-label, screen reader just says "button" -->
<button>
  <svg><!-- X icon --></svg>
</button>

<!-- With aria-label, screen reader says "Close dialog button" -->
<button aria-label="Close dialog">
  <svg><!-- X icon --></svg>
</button>

Here's a real-world example you've probably seen:

<button aria-label="Search">
  <svg><!-- Magnifying glass icon --></svg>
</button>

<button aria-label="Add to cart">
  <svg><!-- Shopping cart icon --></svg>
</button>

aria-labelledby

This one's my favorite because it's smarter than aria-label. Instead of writing the label twice (once visually, once for screen readers), you just point to existing text on the page using its ID.

Let's say you have a modal dialog:

<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Delete Account</h2>
  <p>This action cannot be undone.</p>
  <button>Delete</button>
  <button>Cancel</button>
</div>

See what happened there? The dialog uses the heading text as its label. No duplication needed!

You can even combine multiple elements:

<span id="first-name">First Name</span>
<span id="required">(required)</span>
<input aria-labelledby="first-name required" />

The screen reader will announce: "First Name (required)".

Quick tip for interviews: If they ask you the difference between aria-label and aria-labelledby, say this: aria-labelledby is better because it keeps your visual UI and screen reader experience in sync. If you update the visible text, the screen reader automatically gets the update too.

aria-live

Okay, this one's super important for modern web apps. Imagine you're building a form, and when someone types an invalid email, an error message pops up. How does a screen reader user know that happened? They can't see it!

That's where aria-live comes in. It tells screen readers: "Hey, when this area updates, announce it!"

There are two main values you need to know:

aria-live="polite" - Waits until the user is done with what they're doing, then announces. Use this most of the time.

aria-live="assertive" - Interrupts immediately. Only use for critical stuff like "Your session is about to expire!"

Here's a form validation example:

<form>
  <label for="email">Email</label>
  <input type="email" id="email" />
  
  <!-- This div will announce changes to screen readers -->
  <div aria-live="polite" role="status"></div>
</form>

<script>
const input = document.getElementById('email');
const status = document.querySelector('[aria-live]');

input.addEventListener('blur', () => {
  if (!input.value.includes('@')) {
    status.textContent = 'Please enter a valid email';
  }
});
</script>

When the error appears, the screen reader will say "Please enter a valid email" without the user having to navigate to it.

Here's a loading state example (super common in interviews):

<button id="submit">Submit</button>
<div aria-live="polite">
  <span id="status">Ready</span>
</div>

<script>
document.getElementById('submit').addEventListener('click', async () => {
  const status = document.getElementById('status');
  
  status.textContent = 'Submitting...';
  await submitForm();
  status.textContent = 'Success! Form submitted.';
});
</script>

Two bonus attributes that work with aria-live

aria-atomic - Should the screen reader announce the whole region or just what changed?

<!-- Announces "Items in cart: 4" (the whole thing) -->
<div aria-live="polite" aria-atomic="true">
  Items in cart: <span id="count">3</span>
</div>

<!-- Announces just "4" (only what changed) -->
<div aria-live="polite" aria-atomic="false">
  Items in cart: <span id="count">3</span>
</div>

aria-relevant - What kind of changes should be announced?

<!-- Only announce when text changes or nodes are added -->
<div aria-live="polite" aria-relevant="additions text">
  <!-- Updates here get announced -->
</div>

Quick Interview Answer Template

If they ask you about these in an interview, here's a solid structure:

aria-label: "It provides an accessible name for elements that don't have visible text, like icon buttons. For example, a close button with just an X icon."

aria-labelledby: "It references existing visible text by ID to label an element. It's better than aria-label because it keeps the visual and accessible experiences in sync. For example, using a dialog's heading as its accessible name."

aria-live: "It creates live regions that announce dynamic content changes to screen readers. You use polite for most updates like form validation, and assertive for critical alerts. The key is that the region needs to exist in the DOM before you update it."

Good luck with your interview! These concepts are easier than they seem once you've used them a few times.