WCAG

Appearance

Icons

In most cases icons are used for decorative purposes. While using as a standalone icon, the risk is that they will be misinterpreted. Keep this in mind while coding and try to add accompanying text where possible.

TL;DR ​

  1. Try to avoid stand-alone icons. These can be misinterpreted or their meaning can be unclear. Try to use accompanying text.
  2. The preffered way of rendering icons is by using inline SVG's with the appropriate attributes (aria-hidden="true" and role="img").
html
<button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 64 64"
    role="img"
    aria-hidden="true"
  >...</svg>
  Save
</button>

Formats ​

Their are different kind of formats that can be used to display icons. The most common used are SVG's, fonts and images.

SVG ​

The preferred way to display icons is by using an SVG (Scalable Vector Graphics).

Since SVG's are vector based, they will be rendered crisp in every size. When used inline, SVG's can also be styled with the stroke and path properties.

Role attribute ​

Make sure to add the role="img" attrubute to the SVG:

html
<svg role="img" ... >...</svg>

Decorative icons ​

If an SVG is only their for decorative purposes, make sure to add the aria-hidden attribute:

html
<svg
  aria-hidden="true"
  role="img"
>
  ...
</svg>

Non-decorative icons ​

If the icon should be pronounced on assttive devices, use the aria-labelledby attribute:

html
<svg
  role="img"
  aria-labelledby="unique-icon-label"
>
  <title id="unique-icon-label">Enveloppe</title>
  ...
</svg>

Make sure to use unique ID's to prevent duplicate ID's.

Icon fonts ​

Another popular way of using icons is by using them as a font.

Since each icon will be converted to a glyph, it's important to always hide these icons for assistive devices.

html
<i
  class="fa fa-envelope"
  aria-hidden="true"
></i>

Images ​

Another way to display icons is by using the <img> element. Make sure to always include the alt attribute.

For decorative purposes, like icons in general, this can be left blank:

html
<img
  src="icon.svg"
  alt=""
  width="16"
  height="16"
  loading="lazy"
/>