How removing aria-label broke my tooltip's accessible name

Fixing my tooltip accessibility mistake

How removing aria-label broke my tooltip's accessible name

Jake Archibald shares an accessibility mistake he made while building a tooltip with popover="hint". He initially used aria-describedby to connect the tooltip, but removed the aria-label from the button, leaving it without an accessible name. Screen readers announced "clickable image" instead of the button's purpose, and JAWS even mixed up sibling tooltips. The fix: use aria-labelledby to derive the accessible name from the tooltip, resulting in a clean announcement like "Bold, Command B, button." He emphasizes testing with multiple screen readers.

Always ensure interactive elements have an accessible name.

More from this day

2026-08-09