Understanding ARIA Attributes

Accessibility is more than just a checkbox, it’s about ensuring your website works for everyone. ARIA (Accessible Rich Internet Applications) attributes help make dynamic or non-semantic content understandable to users who rely on screen readers and other assistive technologies.

This article explains what ARIA attributes are, when and why to use them, and how to apply them responsibly using the plugin.

What Are ARIA Attributes?

ARIA attributes provide extra information about elements that standard HTML might not convey. They’re most useful when:

• Your layout uses <div>s or <span>s instead of semantic tags (like <nav> or <button>).
• You have custom scripts or widgets (like modals, tabs, dropdowns).
• You want to clarify an element’s purpose or state for assistive technology.

Common ARIA Attributes You Can Use

Here are some of the most important ARIA attributes:

Attribute	Purpose
aria-label	Adds a label for screen readers that’s not visible on screen
aria-hidden	Hides elements from assistive technologies
aria-expanded	Indicates if a toggle or collapsible element is expanded
aria-controls	Points to the ID of the element being controlled
aria-describedby	Links to a longer description elsewhere on the page

When and How to Use ARIA Attributes

Use aria-label:

• On buttons, links, icons, or containers that need extra clarity.
• Example: <button aria-label="Close search panel">×</button>

Use aria-hidden:

• To hide decorative elements or off-screen content from screen readers.
• Avoid using it on interactive elements.

What Not to Do

• Don’t use ARIA when semantic HTML already provides the meaning.
  • <button> is better than <div role="button">
  • <nav> is better than <div role="navigation"> if possible
• Don’t use conflicting or redundant ARIA attributes.
• Don’t add aria-label that repeats visible text (e.g., "Learn More" on a "Learn More" button).

Best Practices Summary

Do This	Avoid This
Use aria-label to clarify ambiguous elements	Labeling elements with visible text redundantly
Keep labels short and descriptive	Using overly long or vague descriptions
Use aria-expanded for toggleable elements	Forgetting to update its value via JS
Stick with semantic HTML when possible	Replacing native HTML with divs and spans