Technique ARIA24:Semantically identifying a font icon with role="img"
About this Technique
This technique relates to 1.3.1: Info and Relationships (Sufficient).
This technique applies to content using WAI-ARIA.
Description
The objective of this technique is to show how to semantically identify an element that uses a font file for icons. When a user overrides } /* default class for fonts-face with icons */ .icon, [class^="icon-"], [class*=" icon-"] { } /* specific class for icon */ .icon-star-bg:before { content: "\e982"; }
2. Author adds the font classes to the HTML
The second step adds classes, the role="img" attribute for semantics and an accessible name.
<!-- icon via class names, role="img" and a text alternative -->
<p>
<span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>3. User CSS file replaces the }
Examples
Example 1: Star Icon Font used as an indicator (not interactive)
In this example a star icon is used to indicate a favorite. It is not interactive and does not disappear if the user overrides the font family via CSS.
HTML
- Instead of... -
<p>
<span class="icon icon-star-bg"></span>
</p>- Do... -
<p>
<span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>User CSS
*:not([role="img"]) { }Working example:
Example 2: Two colored / stacked star Icon Font used as an indicator
In this example a two colored star icon is created by stacking two fonts with different colors on top of each other. This way it's possible to mimic only half the star is filled. It is not interactive and does not disappear if the user overrides the font family via CSS.
HTML
- Instead of... -
<span class="icon-stacked">
<span class="icon icon-star-bg grey"></span>
<span class="icon icon-star-half yellow"></span>
</span>- Do... -
<span class="icon-stacked" role="img" aria-label="Favorite star half filled">
<span class="icon icon-star-bg grey" role="img" aria-hidden="true"></span>
<span class="icon icon-star-half yellow" role="img" aria-hidden="true"></span>
</span>User CSS
*:not([role="img"]) { }Working example:
Example 3: Email Icon Font in a link WITHOUT visible text
In this example an email icon is in a link with no visible text. It does not disappear if a user overrides font family. The icon font is identified by assistive technology as a "link image" and the name "Email" (keyboard or mouse).
HTML
- Instead of... -
<a href="email.html">
<span class="icon icon-email"></span>
</a>- Do... -
<a href="email.html">
<span class="icon icon-email" role="img" aria-label="Email"></span>
</a>User CSS
*:not([role="img"]) { }Working example:
Example 4: Multiple Icon Fonts as part of another sematic element WITH visible text
This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute aria-hidden="true" is used so the font icons will be ignored by assistive technologies.
HTML
- Instead of... -
<style>
.icon-double-link:before { content: "\e93e"; }
.icon-double-link:after { content: "\e993"; }
</style>
<a href="email.html" class="icon-double-link">Email</a>- Do... -
<style>
.icon-email:before { content: "\e93e"; }
.icon-chevron:before { content: "\e993"; }
.icon-double-link .icon-chevron { float: right; margin-left: 1.5rem; }
</style>
<a href="email.html" class="icon-double-link">
<span class="icon icon-email" role="img" aria-hidden="true"></span>
<span class="icon icon-chevron" role="img" aria-hidden="true"></span>
Email
</a>User CSS
*:not([role="img"]) { }Working example:
Multiple Icon Fonts as part of another sematic element WITH visible text
Tests
Procedure
For each font icon check that:
- The element providing the font icon has
role="img".
Expected Results
- #1 is true.