Comparison
Accessible namevsaria-label
Accessible name
the icon button was announced as just 'button' because there was no text and no label anywhere.
The string assistive technology uses to identify a control, computed by a fixed precedence: `aria-labelledby`, then `aria-label`, then the element's own content or associated label, then the title attribute. Anything interactive without one is unusable by name, and a name that does not include the visible text breaks voice control. It is the single highest-value thing to check on every control you build.
Full entry →aria-label
you gave the icon-only button a name in an attribute because there was no visible text to use.
An attribute supplying an accessible name directly as a string. It is right for controls with no visible text, and it overrides the element's own content, which means it can silently replace a perfectly good label. It is invisible to sighted users and untranslated by page translation in some paths, so visible text remains the better answer whenever there is room for it.
Full entry →