HTML ARIA Attributes for Accessibility

The HTML ARIA attributes help users with disabilities use websites. These attributes describe roles and states for tools.

Understand the ARIA Attributes and Their Roles in HTML

ARIA means Accessible Rich Internet Applications. These values do not change the layout. They only help with assistive tools.

A role tells assistive tech what a part of the page does. It gives meaning to a div or span. You can also add it to any custom element.

Here is an example:

<div role="button">Click here</div>

The user hears this as a button, not just a block. You can use role to describe parts like button or navigation.

The aria-label Attribute:

Use this to add a name to an element. Screen readers read this label instead of the text inside.

<button aria-label="Close menu">X</button>

It hides the “X” and speaks “Close menu” to the user.

The aria-labelledby Attribute:

This points to another element that already holds a label.

<h2 id="heading">Settings</h2>
<section aria-labelledby="heading">...</section>

The section uses the heading text and connects both parts with the ID.

The aria-describedby Attribute:

This points to an element that gives extra info.

<input aria-describedby="hint">
<p id="hint">Use 8 characters or more.</p>

The input gets help text. The tool of “text-to-speech” speaks it after the field name.

The aria-hidden Attribute:

This tells the digital screen narration tool to skip the element.

<span aria-hidden="true">★</span>

The star icon looks normal but is silent to assistive tools. You use this to remove noise.

The aria-expanded Attribute:

You use this for menus or other parts that open and close.

<button aria-expanded="false">Menu</button>

Change this with a script when the menu opens. Tools track if it is open or closed.

The aria-checked, aria-selected, aria-disabled Attributes:

Use these for elements that act like inputs or tabs.

<div role="checkbox" aria-checked="false" tabindex="0">Subscribe</div>

Update the value with a script when the user clicks.

<li role="option" aria-selected="true">Option A</li>
<button aria-disabled="true">Pay Now</button>

They work like native elements but without full control. You need scripts to manage them.

Examples

Toggle Section with aria-expanded:

<button aria-expanded="false" aria-controls="section" id="toggle">Show</button>
<div id="section" hidden>Some content here.</div>

<script>
  let btn = document.getElementById("toggle");
  let box = document.getElementById("section");

  btn.addEventListener("click", function () {
    let open = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", !open);
    box.hidden = open;
  });
</script>

The button shows or hides the box. The aria-expanded value updates. This helps tools follow what changes on the screen.

Custom Checkbox with aria-checked:

<div role="checkbox" aria-checked="false" tabindex="0" id="box">Accept Terms</div>

<script>
  let box = document.getElementById("box");

  box.addEventListener("click", function () {
    let checked = box.getAttribute("aria-checked") === "true";
    box.setAttribute("aria-checked", !checked);
  });
</script>

This div works as a checkbox, and the aria-checked attribute stores its state. A script handles the control.

Dialog Box with aria-labelledby and Role:

<div role="dialog" aria-labelledby="dlg-title" aria-hidden="true" id="dialog">
  <h2 id="dlg-title">Login Required</h2>
  <p>Please enter your password to continue.</p>
</div>

This box has a role and label. Also, the aria-labelledby points to the title. So, the tool reads it as a full dialog.

Disabled Button with aria-disabled:

<button aria-disabled="true" onclick="alert('No')">Submit</button>

This button looks active but tells the screen reader that it is not usable. You should add visual hints with CSS too.

Wrapping Up

In this article, you learned what ARIA attributes do and how they help tools understand your page. You also saw how roles and states work with scripts and styles.

Here is a quick recap:

• ARIA helps build better tools for users who cannot use a mouse or screen.
• Use roles to name parts. Use labels to explain things.
• Use states when parts open, change, or update.
• Use scripts to update values. This keeps your page usable for all.

FAQs

<button aria-label="Close"></button>

<div aria-hidden="true">Decorative content</div>

<input type="text" aria-label="Username">

<label id="nameLabel">Full Name</label>
<input type="text" aria-labelledby="nameLabel">

Similar Reads