eBay

Techniques: Font Icons

Font icons can be placed on static elements or interactive controls. Icons can be deemed critical or non-critical.

Non-Critical Icons

An icon is deemed non-critical if it is purely presentational, or if the information can be found in nearby or adjacent text.

<p>
  <span class=”icon-warning” aria-hidden="true">
    <!-- icon font generated here with CSS -->
  </span>
  Warning: this item is about to expire
</p>

The adjacent text clearly contains the word "Warning" and so the element that generates the icon can safely be set to aria-hidden=true.

Critical Icons

Critical icons are icons with no supplementary text.

<p>
  <span class=”icon-warning” role="img" aria-label="Warning: this item is about to expire">
    <!-- icon font generated here with CSS -->
  </span>
</p>

An aria-label is required to convey the content of the icon.

Critical icons are most common in buttons:

<button class=”hamburger” aria-label=”Menu”>
  <span class=”icon-warning”  aria-hidden="true">
    <!-- icon font generated here with CSS -->
  </span>
</button>

Note that the font-icon is hidden from assistive technology in this case, and the label is added to the button instead.

results matching ""

    No results matching ""