Turn on a screen reader and move through the footer of a typical small business site. You might hear “link, link, link, link” for the row of social icons, then an odd string of characters where a phone icon sits next to the number, then nothing at all for the little warning triangle that tells sighted visitors a field is required. Icons are everywhere on modern sites, and they are easy to get wrong in both directions: silent when they carry meaning, noisy when they are just decoration.
Accessible icons come down to one question per icon: does it tell the visitor something that is not already said in text? This post walks through that decision, then covers icon fonts, inline SVG accessibility, social icons and icon-only links, with short code examples where they help.
Accessible icons start with one sort: informative or decorative
Start by sorting every icon on a template into one of two groups.
- Decorative icons sit beside text that already says the same thing. A phone handset next to “Call (555) 010-0199”, an envelope beside “Email us”, a check mark in front of each line of a features list. Remove the icon and nothing is lost.
- Informative icons carry meaning on their own. A star rating with no number, a warning symbol that marks an error, a “new” badge that is just a graphic, a lock that means “members only”. Remove the icon and the visitor misses something.
Decorative icons should be hidden from assistive technology so screen reader users do not hear clutter. Informative icons need a text alternative, just as an informative photo does under 1.1.1 Non-text Content. The same reasoning applies to images in general, which our post on when to use empty alt covers for photos and graphics.
There is a third case: the icon is the only content of a link or a control. That is not decoration and it is not quite an informative picture either. The icon’s text alternative becomes the name of the link, so it has to say where the link goes.
Icon fonts and their quirks
Many WordPress themes and page builders draw icons with an icon font such as Font Awesome or a theme’s own set. The icon is really a character in a special font, inserted with CSS. That causes a few specific problems.
Screen readers may read the character
Icon fonts often use characters from a reserved part of the font that has no standard meaning. Depending on the browser and screen reader, the user may hear nothing, a strange symbol name, or a code. If the icon is decorative, mark the element that holds it with aria-hidden="true". If it carries meaning, hide the glyph and add real text next to it, visually hidden if necessary.
<!-- Decorative: text already says it -->
<span class="fa fa-phone" aria-hidden="true"></span> Call (555) 010-0199
<!-- Informative: the glyph is hidden, the meaning is in text -->
<span class="fa fa-lock" aria-hidden="true"></span>
<span class="screen-reader-text">Members only</span>Custom fonts and font loading break them
Some visitors with low vision or dyslexia set their browser or a reading extension to replace page fonts with one they find easier. When that happens, icon fonts can turn into empty boxes or random letters. Icons also go missing if the font file fails to load, which is a common enough WordPress problem that we have a post on icons showing as squares. If the icon was the only label, the visitor is left with nothing.
This is one reason many developers have moved to SVG icons. There are speed arguments too, covered in our comparison of SVG icons and icon fonts, but from an accessibility point of view the main gain is that an SVG is an image the browser understands, not a letter pretending to be one.
Getting SVG accessibility right
SVG icons can be included as an image file or written directly into the page as inline SVG. Each has its own approach.
SVG as an image file
When an SVG is used like any other image, it gets an alt attribute in the usual way. An empty alt for decorative icons, a short description for informative ones. This is the simplest route and works well across browsers and screen readers.
Inline SVG that is decorative
Inline SVG is code inside the page. If it is decoration, hide it with aria-hidden="true". Some older browsers would also put inline SVG into the Tab order, which is why you sometimes see focusable="false" on icons in theme code; it does no harm to keep.
Inline SVG that carries meaning
For an informative inline SVG, give it role="img" so it is treated as one image rather than a pile of shapes, and give it a name. A title element as the first child is the traditional way. Pointing aria-labelledby at that title improves support across screen readers.
<svg role="img" aria-labelledby="rating-title" viewBox="0 0 120 24">
<title id="rating-title">Rated 4 out of 5</title>
<!-- star shapes -->
</svg>Each id must be unique on the page. That trips up product grids, where the same rating SVG appears on twenty cards with the same id. The fix is to generate a different id for each one, or to put the rating in plain text and hide the stars.
Keep the name short and factual. “Rated 4 out of 5” beats “Four gold stars”. Do not describe the drawing; describe the information.
Social icons and icon-only links
The row of social media icons in the header or footer is the most frequent icon problem on small business sites. Each one is a link with no text, just a logo. Unless something provides a name, screen readers announce it as “link”, or read the web address, which is long and unhelpful.
Give every icon-only link a name that says where it goes:
- Use visually hidden text inside the link, such as “WebMaintor on LinkedIn” or “Our Facebook page”.
- Or give the link an
aria-labelwith the same wording. - Hide the icon itself with
aria-hidden="true"so it is not read twice. - If the link opens in a new tab, include that in the name, such as “Instagram (opens in new tab)”.
Most social icon blocks, widgets and plugins have a label field for each network. In the block editor’s Social Icons block, each icon has a label setting, and filling it in is the easiest fix there is. Our guide to adding social media icons in WordPress covers where those icons live. Icon-only controls that do something, rather than go somewhere, such as menu toggles and close buttons, are a slightly different case. They are covered in our post on accessible buttons.
Icons need to be seen, too
Names fix the screen reader side. Sighted visitors also need to make out the icon. Under 1.4.11 Non-text Contrast, graphics that are needed to understand content should have a contrast ratio of at least 3:1 against what is next to them. A pale gray search icon on a white header, or a thin white outline on a light photo, often fails. Our post on color contrast rules explains how to measure it.
Also think about recognition. A magnifying glass, a cart and a hamburger menu are widely understood. A custom glyph for “resources” or “client portal” is not. When an icon stands for something unusual, a visible text label next to it helps everyone, including people with cognitive disabilities and older visitors who never learned the convention. If the icon is a tap target on its own, it also needs enough size, which WCAG 2.2 covers in 2.5.8 Target Size (Minimum).
How to check the icons on your site
- Scan. A free tool will flag links with no name, empty buttons and images without alt text. Most icon problems show up here as “empty link” errors.
- Listen. Tab through header and footer with a screen reader. Every icon link should say where it goes. Decorative icons should be silent.
- Change the font. Use a browser extension or setting that overrides page fonts and see whether any icons turn into boxes or letters.
- Look closely. Check informative icons against their background for contrast, and ask whether a new visitor would understand each one.
Accessible icons are one small part of what editors and designers control. Our main guide to editor-friendly accessible content covers the rest, while the wider work of auditing a site and keeping it in shape is laid out under accessibility services for US businesses.
Frequently asked questions
Should every icon have alt text?
No. Icons that repeat nearby text, like a phone symbol next to a phone number, should be hidden from screen readers so they do not add noise. Only icons that carry meaning of their own, or that are the only content of a link or button, need a text alternative. Sorting icons into those two groups is the first step.
Is a title element enough to make an inline SVG accessible?
On its own it is not always reliable. Support varies between browsers and screen readers. Adding role img to the SVG and pointing aria-labelledby at the title’s id gives much more consistent results. For decorative inline SVG, skip the title and hide the graphic with aria-hidden instead.
Are icon fonts like Font Awesome bad for accessibility?
They can be made accessible by hiding the glyph and supplying text where the icon carries meaning. The weak points are that screen readers may read odd characters, and icons can disappear when a visitor overrides page fonts or the font fails to load. SVG icons avoid those problems, which is why many sites have switched.
What should a social media icon link say to a screen reader?
It should name the destination, such as Facebook or our LinkedIn page, not describe the logo. Add the name with hidden text or an aria-label on the link, and hide the icon itself. If the link opens a new tab, mention that in the name so the change does not surprise the visitor.
Icon problems tend to repeat across every page, because they live in the header, footer and theme templates. If your theme relies on unlabeled icon fonts throughout, it may be worth treating icons as part of an accessible website redesign rather than fixing them one widget at a time.
