An icon is not a complete button
A recognizable symbol makes a toolbar compact, but it does not replace an accessible name. Use a real button for an action and a link for navigation. A control that opens an account menu should describe that action, not merely announce “user”. A visible text label is often the clearest solution.
Name the action, not the picture
“Download SVG” is more useful than “down arrow”. “Save to favorites” is more useful than “heart”. Give icon-only buttons accessible names and prevent decorative SVGs from being announced separately. When visible wording already describes the action, repeating it in the graphic can create unnecessary noise.
<button type="button" aria-label="Download SVG">
<svg aria-hidden="true" viewBox="0 0 24 24">…</svg>
</button>Communicate state
A favorite toggle has active and inactive states. Expose the pressed state and make the visual treatment distinct. A disclosure should report whether it is expanded. Keep those attributes synchronized with the actual interaction. A decorative color change alone is not sufficient.
Support keyboard and touch
Check keyboard reachability and visible focus. A small drawing does not require a tiny click target: give the artwork adequate surrounding space. Help shown only on mouse hover excludes touch users and may be difficult for keyboard users. Offer the explanation through focus or an explicit control as well.
Reinforce meaning with color
A red cross can support an error message, but the text should identify the problem and the next step. A green check should follow a real success response. Someone who cannot distinguish the colors should still understand the outcome.
Plan labels before editing the download or heart artwork. For detailed patterns, consult the WAI button guidance.
Test the entire control in context
A button can have valid ARIA markup and still be difficult to operate. Try the page with only a keyboard, with 200% browser zoom, and with visible labels enabled. A tooltip that appears only on hover is not a substitute for a label available on focus and to assistive technology. Review disabled, loading and error states as carefully as the normal state.
If a toggle changes state, update the state communicated to the user. For example, a bookmark control should tell someone whether an item is saved. Use visible text when space permits; if you use an icon-only control, give the button a meaningful accessible name and test it. See the SVG accessibility examples and navigation patterns.