Boost Your Website's Accessibility: Master ARIA Attributes in HTML 🌐

Accessibility is Not Just a Trend Web accessibility is an important aspect that every frontend developer should care about. It ensures that websites and apps are accessible to all users, including those with disabilities. This is where ARIA (Accessible Rich Internet Applications) attributes come in. Let's learn how to use them correctly to create an accessible and user-friendly web.

What is ARIA and Why Use It?

ARIA attributes are special tags that add information for screen readers and other assistive technologies. They help developers make interactive elements more accessible, especially when these elements are not well understood by default. ARIA attributes can provide roles, states, and other properties to components that might not be accessible otherwise.

Before we start, it’s important to note that ARIA attributes should not be used on elements that already have their natural role. For example, if you use an HTML tag like <button>, it already has the role of a button. Adding role="button" would be unnecessary and even confusing.

Basic ARIA Attributes

1. aria-label

aria-label adds a description to an element that otherwise has no understandable text for screen readers. This attribute is ideal for icons or buttons that need a specific description.
Example:

<button aria-label="Settings">⚙️</button>

Bad Example:

<button aria-label="Settings Button">Settings</button> <!-- Duplicate text, not needed -->

2. aria-labelledby and aria-describedby

aria-labelledby works like aria-label, but instead of direct text, it refers to another element that describes the component. It is useful if there is already an existing text that can be used. aria-describedby is used to provide additional information about an element, often giving more context or explanation.
Example:

<h2 id="heading">Contact Us</h2>
<button aria-labelledby="heading" aria-describedby="form-info">Open Form</button>
<p id="form-info">This form allows you to get in touch with our team.</p>

3. aria-hidden

aria-hidden is used to mark elements that should be ignored by screen readers. This attribute can be used to hide elements that are not important for users.
Example:

<span aria-hidden="true">🔔</span> Notification

4. aria-expanded

This attribute indicates whether an element (like a dropdown menu or accordion) is open or closed. It improves the user experience by providing information about the component's state.
Example:

<button aria-expanded="false" aria-controls="menu">Open Menu</button>
<div id="menu" hidden>Menu Content</div>

5. role

role defines what type of interactive element it is. Remember, role should not be used on semantic elements like <button>, <nav>, <header>, and others because they already have their natural roles.

role="complementary": Used to define content that complements the main content but is still meaningful on its own, like a sidebar.
Example:

<aside role="complementary">Related Articles</aside>

role="presentation": Used for elements that should be ignored by assistive technologies because they are purely decorative.
Example:

<table role="presentation">
  <!-- purely decorative table -->
</table>

aria-live: This attribute is used to notify screen readers about content that changes dynamically. It can have values like polite, assertive, or off.
Example:

<div aria-live="polite">New message received.</div>

Good Example:

<div role="dialog">This is a dialog box</div>

Bad Example:

<button role="button">Click Here</button> <!-- Unnecessary, button already has a role -->

Conclusion: Use ARIA Only When Necessary

ARIA attributes are helpful tools to improve web accessibility. But remember, less is often more. ARIA should be used only when HTML cannot solve the problem naturally. Using ARIA correctly can greatly improve the experience for users who rely on assistive technologies.

If you have any questions about ARIA attributes or how to use them on specific elements, feel free to ask! 😊