Use Fully Sites and key points

S.M. Jegan — Fri, 28 Nov 2025 01:46:25 +0000

Open source

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.
https://www.radix-ui.com/

Automate end-to-end scenarios, validate emails, and integrate with our API for seamless workflows.
https://mailosaur.com/

Testing tool:
https://playwright.dev/

Just for Ref 😋

When we can use ARIA

S.M. Jegan — Fri, 28 Nov 2025 01:30:27 +0000

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

Icon button

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

HTML cannot describe the icon → ARIA adds missing info.

Expandable menu
Menu
HTML button can’t express the “open/closed” state.
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>   
```
❌ 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>       
```
❌ 3. Labelling something that already has visible text
```
<button aria-label="Submit">Submit</button>  
```

Forem: S.M. Jegan

Use Fully Sites and key points

When we can use ARIA