إخفاء الأيقونات الزخرفية باستخدام aria-hidden

A little flourish next to a label adds nothing for a screen reader user. Announcing it just adds noise they have to wade through. 🔇

An icon is decorative when removing it would not change what the user understands. The nearby text already carries the meaning.

Set aria-hidden="true" on a decorative icon to pull it out of the accessibility tree so screen readers skip it entirely.

One aria-hidden="true" on a wrapper hides the element and everything inside it, so you mark the container, not each path.

If the decorative icon is an <img>, give it an empty alt instead. An empty alt tells screen readers to skip the image.

The golden rule: do not put aria-hidden on anything a sighted user relies on. You would erase real content for some people.

Putting aria-hidden on a focusable element creates a ghost: keyboard users land on a control screen readers refuse to announce.

For decorative inline SVGs, add focusable="false" alongside aria-hidden so no browser sneaks it into the tab order.

A trash icon beside the word Delete is redundant. Hide the icon and let the visible text do the talking for everyone.

Careful: an icon with no nearby text is usually not decorative. Hiding it would leave the control silent and unnamed.

In the accessibility inspector, a properly hidden icon simply vanishes from the tree. That empty spot is exactly what you want.

A checkmark icon sits right next to the visible word Complete. What should you do with the icon?

Decorative icons get aria-hidden="true" (or empty alt) and focusable false, never on focusable or unique content. Less noise, clearer pages. 🎯