Providing a Semantically Identified Icon Font with role=img

From WCAG WG


Status

Applicability

HTML

This technique relates to:

Description

The objective of this technique is to show how to provide a semantically identified icon font that does not disappear if a user overrides font-family via user stylesheet, script, or extension. The point is to provide a technique to differentiate icons fonts from general font (text) usage.

Some low vision users rely on user stylesheets to override fonts to perceive content. However, they need to be able to perceive icon fonts that are meaningful, for instance indicators (e.g. a star signifying a favorite) and interactive ones (e.g. an email link).

The key is for the author to semantically markup icon fonts with role="img". Then the user's font replacement selector can hook into that semantic and exclude role="img". This results in those icon fonts being shown.

Example 1: Star Icon Font used as an indicator (not interactive)

HTML

role="img" is added to provide semantics. 

<p>
 <!-- Icon added visually, text alternative, and role="img". -->
 <span class="fa fa-star" aria-label="Favorite" role="img"></span>
</p>

User CSS

Font replacement selector excludes role="img" so the user stylesheet avoids removing images needed to understand the content. 

*:not([role="img"]) {
font-family: Comic Sans MS, sans-serif;
}

Author CSS

<style>
 @font-face {
 /* Specify font-family name to identify the font */
 font-family: 'FontAwesome';
 /* Paths to icons */
 src: url('icons/fontawesome-webfont.eot');
 src: url('icons/fontawesome-webfont.eot?#iefix')
 format('embedded-opentype'), 
 url('icons/fontawesome-webfont.woff2') 
 format('woff2'), 
 url('icons/fontawesome-webfont.woff') 
 format('woff'), 
 url('icons/fontawesome-webfont.ttf') 
 format('truetype'), 
 url('icons/fontawesome-webfont.svg#fontawesomeregular') 
 format('svg');
 }
 .fa {
 font: normal 1em/1 FontAwesome;
 text-rendering: auto;
 }
 .fa-star:before {
 /* Icon added via generated content 
 from Unicode Private Use Area (PUA) */
 content: "\f005";
 }
 span.fa-star { 
 color:purple;
 background:white;
 font-size:3em;
 padding-left:0.2em;
 }
 p>span+span {
 font-family:sans-serif;
 font-size:1.1em;
 display:block;
 padding-left:0.2em;
 }
</style>

Live Example

Example 2: 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 "favorite" (keyboard or mouse).

HTML

Again, role="img" is added to provide semantics to the icon font. Only this time the icon font is in a link. 

<a href="email.html">
 <!-- Icon added visually, text alternative, and role="img". -->
 <span class="fa fa-envelope" aria-label="Favorite" role="img"></span>
</a>

User CSS

The font replacement selector excludes role="img" so the user stylesheet avoids removing images needed to understand the content. 

*:not([role="img"]) {
font-family: Verdana, sans-serif;
}

Author CSS

<style>
 @font-face {
 /* Specify font-family name to identify the font */
 font-family: 'FontAwesome';
 /* Paths to icons */
 src: url('icons/fontawesome-webfont.eot');
 src: url('icons/fontawesome-webfont.eot?#iefix') 
 format('embedded-opentype'), 
 url('icons/fontawesome-webfont.woff2') 
 format('woff2'), 
 url('icons/fontawesome-webfont.woff') 
 format('woff'), 
 url('icons/fontawesome-webfont.ttf') 
 format('truetype'), 
 url('icons/fontawesome-webfont.svg#fontawesomeregular') 
 format('svg');
 }
 .fa {
 font: normal 1em/1 FontAwesome;
 text-rendering: auto;
 }
 .fa-envelope:before {
 /* Icon added via generated content 
 from Unicode Private Use Area (PUA) */
 content: "\f0e0"; 
 background:white;
 color:blue;
 font-size: 3em;
 } 
 a {
 text-decoration:none;
 }
</style>

Live Example

Example 3: Email Icon Font in a link with visible text

Because this example has a visible on-screen text alternative, aria-hidden="true" is used so the Icon Font will be ignored and by assistive technologies. Like the previous examples, role="img" is added to provide semantics to the icon font.

HTML

<a href="email.html">
 <!-- Icon added visually, voicing is suppressed, and role="img. --> 
 <span class="fa fa-envelope" aria-hidden="true" role="img"></span> 
 <!-- Accurate text alternative added-->
 <h2>Email</h2>
</a>

User CSS

The font replacement selector excludes role="img" so the user stylesheet avoids removing images needed to understand the content. 

*:not([role="img"]){
 font-family: APHont, sans-serif;
}

Author CSS

<style>
 @font-face {
 /* Specify font-family name to identify the font */
 font-family: 'FontAwesome';
 /* Paths to icons */
 src: url('icons/fontawesome-webfont.eot');
 src: url('icons/fontawesome-webfont.eot?#iefix') 
 format('embedded-opentype'), 
 url('icons/fontawesome-webfont.woff2') 
 format('woff2'), 
 url('icons/fontawesome-webfont.woff') 
 format('woff'), 
 url('icons/fontawesome-webfont.ttf') 
 format('truetype'), 
 url('icons/fontawesome-webfont.svg#fontawesomeregular') 
 format('svg');
 }
 .fa {
 font: normal 1em/1 FontAwesome;
 text-rendering: auto;
 }
 .fa-envelope:before {
 /* Icon added via generated content 
 from Unicode Private Use Area (PUA) */
 content: "\f0e0"; 
 background:white;
 color:blue;
 font-size: 3em;
 } 
 a {
 text-decoration:none;
 }
 h2 {
 font-family:sans-serif;
 font-size:1.1em;
 margin:0em;
 }
</style>

Live Example

Resources

  • img (role) - Accessible Rich Internet Applications (WAI-ARIA) 1.0

Related Techniques

Tests

Procedure

  1. Check that the element providing the icon font has role="img".

Expected Results

  • #1 is true.
Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Providing_a_Semantically_Identified_Icon_Font_with_role%3Dimg&oldid=9522"