Summary

Ensure that icons are clearly and consistently labelled to identify their purpose.

Techniques

Examples

Example 1 — Common Sidebar Identification

<aside
    id="warn-001"
    class="warning">
   <img src="bomb.png" alt="Warning"/>
   <p>The following experiment may cause
      bodily harm if … </p>
</aside>

…

<aside
    id="warn-002"
    class="warning">
   <img src="bomb.png" alt="Warning"/>
   <p>Risk of explosion increases as the
    coefficient … </p>
</aside>

Example 2 — Sufficient Contrast

The following example shows an icon with sufficient background contrast.

The following example shows the same icon with insufficient background contrast.

Example 3 — Font Icon

In the following example, a private use area code point is used to render an email icon from a fictitious "Icons" font family.

CSS

.icon { font-family: 'Icons' !important; }
.email { background-color: #ffffff; }
.email:before { content: "\f8ee"; }

HTML

<p>
   <span
    class="icon email"
    role="img"
    aria-label="Email the publisher"></span>
</p>

Example 4 — Sufficient Size

The following example shows the AAA minimum target size of 44 by 44 pixels required in WCAG 2.1.

Image Description

The following example shows the AA minimum target size of 24 by 24 pixels required in WCAG 2.2.

Image Description

Explanation

Although icons are not as prevalent in digital publications as on the web generally, they are not uncommon. Icons are often used to identify key items of interest in a publication, for example, such as the various kinds of sidebars that occur in textbooks and other works of non-fiction. They are also commonly used to in place of text to identify the presence of extended descriptions for images. And, of course, they are prevalent as controls for interactive content.

Making icons accessible generally follows the same requirements as any images, but there are some additional requirements specific to them. Key among these is the need for consistency of naming. It is not enough to provide a label, as users come to expect the meaning and purpose of the icons to remain consistent across a publication. An icon used to link to an extended description, for example, should not have a label "Extended description for figure 1" in one place and "Read more about figure 2" in the next. The labels will not be identical, since the figure number will change, but the phrasing needs to be consistent.

It is also important that the icons can be clearly distinguished. Meeting the 3:1 contrast ratio requirement between the icon and its background ensures that users are able to perceive both where icons are used and what they depict. Similarly, the icons should be at least 24 pixels in length and height when the image represents a target for an input action like a click. Although not specifically a WCAG requirement, icon should be sized to ensure they are legible by the widest possible audience without the need for magnification. Avoiding complex imagery in an icon is also recommended, as even sighted users may struggle to make out the meaning.

Font icons are a slightly different beast from image icons as they rely on the author using the private use area of Unicode (i.e., special code points that are not assigned to any character, so the author can provide a font that defines icons for those code points). The problem with this approach is that private use area code points are unknown to user agents and assistive technologies, so there is no way for them to announce the meaning of the icon. To work around this problem, authors can attach the ARIA role "img" and provide a label where the icon is inserted (see example 3 above).

Related Links