Accessibility (ARIA) attributes examples in html

Accessibility (ARIA) attributes are crucial for making dynamic web content and custom UI components accessible to people who use assistive technologies like screen readers. They provide extra semantic meaning where native HTML falls short.

Here are essential ARIA attribute categories and examples of their practical use in HTML:

---

1. Roles (The "What Is It?")

ARIA roles define what a custom element is or does.

ARIA Role	HTML Equivalent (If any)	Example Use Case
role="button"	<button>	Used on a <div> or <span> that you've styled to look and act like a button.
role="alert"	None	Used on a message area that appears dynamically and must immediately interrupt the user (e.g., a form error).
role="dialog"	None	Used on the container for a modal window.
role="navigation"	<nav>	Used on a <div> containing primary navigation links.

Role Example: Custom Button

<div role="button" tabindex="0" aria-pressed="false">
    Toggle Settings
</div>

• role="button": Tells the screen reader, "Treat this div as a button."
• tabindex="0": Makes the div focusable via the keyboard, necessary for non-native interactive elements.

---

2. Properties (The "How Is It?")

ARIA properties describe the characteristics or state of an element that is unlikely to change often.

ARIA Property	Description	Example Use
aria-label	Provides a visible label for an element when no visible text is present (e.g., for an icon button).	For a search icon button.
aria-describedby	Points to another element that contains a description or error message for the current element.	For associating a form input with its hint text.
aria-labelledby	Points to another element that acts as the label for the current element (used when a label is complex).	For associating a custom radio group with a title.
aria-hidden="true"	Hides the element from assistive technology entirely.	For decorative icons or duplicated text.

Property Example: Icon Button

<button aria-label="Delete Item">
    <img src="delete-icon.svg" alt="" />
</button>

• aria-label="Delete Item": The screen reader announces, "Delete Item, button."

---

3. States (The "What's Happening Now?")

ARIA states describe the current, dynamic conditions of an element, and they change via JavaScript.

ARIA State	Values	Example Use
aria-expanded	true / false	Used on a button that controls the visibility of a collapsible region (e.g., an accordion header).
aria-disabled	true / false	Used when an element is visually disabled but not necessarily a native HTML disabled element.
aria-current	page, step, true	Used on a link to indicate the user's current location in a set of pages or steps.
aria-live	polite / assertive	Used on a region that updates dynamically without a page refresh (see below).

State Example: Accordion

<button aria-controls="panel1" aria-expanded="false" onclick="toggleAccordion()">
    Section Title
</button>
<div id="panel1" role="region" aria-hidden="true">
    </div>

• When the panel is collapsed, the button has aria-expanded="false".
• When the panel opens, JavaScript updates the button to aria-expanded="true".

---

4. Live Regions (Dynamic Updates) 💬

The aria-live attribute is vital for parts of the page that update asynchronously (e.g., search results, status messages, validation errors).

Live Region Example: Status Message

<div aria-live="polite" role="status">
    </div>

• aria-live="polite": Tells the screen reader, "Wait until the user is finished with the current task, and then read out any changes to this region." (This is the most common setting).
• role="status": A specific type of live region that is only for advisory information (like saving a document).
• If the message were critical (e.g., "Connection lost!"), you would use aria-live="assertive" to interrupt the user immediately.