aria-label
An HTML attribute that gives a nameless control, like an icon-only button, a name assistive tech can read but nobody sees.
See it
What it is
aria-label is an HTML attribute that hands an element a name string for the accessibility tree. It goes out through the platform accessibility APIs, so screen readers announce it, braille displays render it, and voice control matches spoken commands against it. Sighted users never see it. It is the standard fix for icon-only controls: the 'X' that closes a dialog, the hamburger, the magnifier, the three-dot 'more' button.
Reach for it only when there is no visible text to point at. If text exists on screen, let that text be the name, or reference it with aria-labelledby. The first rule of ARIA still applies: a real button with real words beats any attribute.
Gotcha: aria-label overrides everything inside the element. A button reading 'Save' with aria-label='Submit form' is announced as 'Submit form', and a voice-control user saying 'click Save' gets nothing. Second gotcha: it is ignored on generic elements like a plain div or span with no role, so labeling a wrapper div does nothing at all.
Ask AI for it
Give every icon-only control in this UI an accessible name. Add aria-label to each button that renders only an icon (close, menu, search, filter, more options), phrased as the action it performs ('Close dialog', 'Open main menu'), not as the icon ('X', 'hamburger'). Where a visible text label already exists, delete the aria-label and let the visible text be the name, or use aria-labelledby pointing at that text. Never put aria-label on a plain div or span with no role. If a control has both an icon and visible text, make sure the visible words appear inside the accessible name so voice control still works.