How to make icons accessible
Icons carry meaning visually, but screen readers can't see them. The fix is simple once you answer one question: is this icon decorative, or does it convey information the user needs?
Decorative icons: hide them
If the icon just decorates text that already says the same thing (a “Download” button with a download icon), hide the icon from assistive tech so it isn't announced twice:
<button>
<svg aria-hidden="true" focusable="false">…</svg>
Download
</button>Meaningful icons: label them
If the icon is the only content — an icon-only button — give it an accessible name:
<button aria-label="Close">
<svg aria-hidden="true" focusable="false">…</svg>
</button>Standalone informative SVG
For an inline SVG that conveys information on its own, use role="img" plus a <title>:
<svg role="img" aria-labelledby="t1">
<title id="t1">Verified account</title>
…
</svg>Frequently asked questions
Should icons have alt text?
An <img> icon needs alt: descriptive if meaningful, empty (alt="") if decorative. Inline SVG uses <title> or aria-label instead.
What is focusable="false" for?
It stops older versions of Internet Explorer/Edge from putting SVGs in the tab order — harmless to include.
Is aria-hidden enough for icon buttons?
No — if the button has no visible text, add aria-label to the button so it has an accessible name.