Accessible names · 06
Name icon-only buttons
An icon can be visually clear while leaving a button silent or noisy in the accessibility tree.
What to do
- Name the buttons Delete message, Mark as done, and Add message.
- Keep the visible controls icon-only.
- Hide each decorative SVG from the accessibility tree and focus order.
Result
Run the checks
Edit the HTML and select “Check solution”. The preview updates automatically.
If you are stuck
Put the action name on the button. The SVG itself does not need to be announced.