Using ARIA Attributes

Accessible Rich Internet Applications (ARIA) is a set of HTML attributes designed specifically to make web content and applications more accessible to people with disabilities.

When we build custom interactive components using HTML, we might not always consider how they will be perceived by users of assistive technologies. Someone using a screen reader won't be able to see the visual cues that we take for granted. That cool icon we created to look like a close button may be completely missed by a screen reader user.

That's why ARIA attributes are so important. ARIA attributes provide additional information to assistive technologies, such as screen readers, about the purpose and state of interactive elements on a web page. So when semantic HTML elements aren't enough to describe a complex interactive component, ARIA attributes step up to the plate.

In this article, we'll look at some of the more commonly used ARIA attributes.

The First Rule of ARIA

But before we continue, it would be remiss of me to not mention the first rule of ARIA:

No ARIA is better than bad ARIA

Or something like that. Basically what it means that if a native HTML element exists for your purpose (like a button or a nav), use it! You should only use ARIA attributes when you are building custom, complex widgets out of generic elements like div tags.

ARIA Roles

The role attribute overrides the browser's default understanding of an element and explicitly tells the screen reader what the element is acting as. For example, if you build a custom alert box using a div, the screen reader won't naturally announce it as important. Giving it role="alert" forces the screen reader to interrupt what it is doing and announce the error.

Example:

`aria-hidden`

Sometimes you might use decorative icons or text characters (like a checkmark symbol) inside a button. Screen readers will try to read these symbols aloud, which sounds incredibly confusing. You can use aria-hidden="true" to force the screen reader to completely ignore the symbol:

`aria-label`

If you have a button that only contains an icon (like an "X" to close a window), a sighted user knows what it means, but a screen reader sees a button with no text inside. You can use aria-label to provide the invisible text that the screen reader should speak:

`aria-expanded`

If you build a collapsible component like a dropdown menu or an accordion, use aria-expanded to tell the screen reader whether that section is currently open (true) or closed (false). You'd typically use JavaScript to toggle this value when the user clicks the button:

`aria-describedby`

If an input field has an associated constraint or error message that isn't part of the direct label, you can use aria-describedby to link the input to the ID of the element containing that description. The screen reader will read the main label, then follow up with the text associated with the ID:

`aria-live`

If part of your page updates dynamically without a page reload (like a live sports score or a chat message arriving), a screen reader user won't know it happened unless they focus on that exact spot. By placing aria-live="polite" on a container, the screen reader will automatically announce any new text that appears inside it as soon as the user is finished with their current paragraph:

Alternatively, you can use aria-live="assertive" which will interrupt the user immediately. Use this sparingly though, as it can be very annoying for the user.

Full Working Example

Below is a working example demonstrating three common uses of ARIA attributes. Note that because ARIA targets screen readers, you will not see visual differences unless you inspect the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARIA Attributes Example</title>
<style>
  body { font-family: sans-serif; margin: 20px; line-height: 1.6; }
  .alert-box {
    padding: 15px;
    background-color: #f82626;
    color: white;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .custom-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
  }
  .custom-button:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>

<h2>1. Alerting the User</h2>
  <p>The div below uses <code>role="alert"</code>. When this box appears on the screen (e.g. via JavaScript after a failed login), a screen reader will immediately interrupt whatever it is doing to read the alert to the user.</p>
  
  <div class="alert-box" role="alert">
    Error: The password you entered is incorrect.
  </div>

<h2>2. Describing a Custom Element</h2>
  <p>The blue box below is actually just a <code>&lt;div&gt;</code>, but using <code>role="button"</code> tells the screen reader to treat it exactly like a real button. We also added <code>tabindex="0"</code> so a keyboard user can focus on it.</p>
  
  <div class="custom-button" role="button" tabindex="0" aria-pressed="false" onclick="alert('Clicked!')">
    Submit Payment
  </div>

<h2>3. Hiding Icons from Screen Readers</h2>
  <p>Below is a button with a decorative text icon. We don't want the screen reader to read the garbled symbol character out loud, so we hide it using <code>aria-hidden="true"</code>.</p>
  
  <button>
    <span aria-hidden="true">&#10004;</span> Confirm Order
  </button>

</body>
</html>

View Output Full Screen Preview

More ARIA Attributes

This page covered just a small sample of the many ARIA attributes available. For a deeper dive into the complete array of ARIA roles, states, and properties, check out the ARIA attribute reference on MDN Web Docs.