أزرار الأيقونات التي تحمل اسماً أيضاً

A button with only an icon inside looks clear to the eye, but a screen reader may just say button with no clue what it does. 🔇

Every interactive control must have an accessible name. For text buttons the text supplies it; an icon-only button has no text to borrow.

The simplest fix: put aria-label on the button itself to name the action, even when the inside is just an icon.

Mark the inner icon with aria-hidden="true". The button carries the name; the icon is pure decoration once the label exists.

Prefer real text? Add a span styled with a visually-hidden class. Sighted users see only the icon; screen readers hear the words.

A visually-hidden class clips the text to a single pixel without using display none, which would also hide it from screen readers.

Label what happens, not the picture. Use Delete, not trash can. Users want the verb, not a description of the glyph.

The HTML title attribute is unreliable as a name: it skips touch and keyboard users entirely. Use aria-label or hidden text instead.

For an icon toggle like mute, also add aria-pressed so the button announces whether it is currently on or off.

If an icon button changes meaning, update its name too. A play button that became pause must now announce Pause, not Play.

In the accessibility inspector, select the button and read its computed name. It should match the action, never be blank.

You have a button containing only a magnifier SVG and no text. How do you give it an accessible name?

Give icon-only buttons a name via aria-label or visually hidden text, hide the icon, and label the action. Now every button speaks. ✅