When we can use ARIA

Element type Use ARIA? Why
Native button with visible text ❌ No HTML already covers it
Paragraph with text ❌ No Screen reader reads text
Icon-only button ✔️ Yes HTML can't describe icon
Button that expands a menu ✔️ Yes HTML can't describe expanded state
Custom elements (divs) acting as UI ✔️ Yes Need roles, states
Form inputs with labels ❌ No Use instead

👉 Don't add ARIA to explain what HTML already explains.
👉 Use ARIA only to explain behavior or meaning HTML cannot express

Let’s compare with simple real-world examples

Correct ARIA Uses

1. Icon button

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

HTML cannot describe the icon → ARIA adds missing info.

1. Expandable menu
   Menu
   HTML button can’t express the “open/closed” state.

2. Custom elements (like a

   acting as a menu)

   <div role="menu">
     <div role="menuitem">Save</div>
   </div>
   

   Here we use ARIA because

   has zero meaning.

   ❌ Wrong ARIA Uses
   ❌ 1. Adding ARIA where HTML already gives meaning
   

   <p aria-label="Paragraph">Hello world</p>   <!-- Wrong -->
   

   ❌ Why this is wrong?
   Because:
   The

   already contains text (“Some text”)
   That text already tells a screen reader what the paragraph says
   So aria-label="Paragraph" replaces the real text with something useless

   ❌ 2. Adding role to an element that already has one
   

   <button role="button">Submit</button>       <!-- Wrong -->
   

   ❌ 3. Labelling something that already has visible text
   

   <button aria-label="Submit">Submit</button>  <!-- Wrong -->