This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Icon Font with an On-Screen Text Alternative

From WCAG WG
Jump to: navigation, search


Status

Applicability

Description

The objective of this technique is to show how to provide a visible, text alternative for an icon font that conveys information.

Icon fonts are fonts that use the Private Use Area (PUA) of Unicode. Typically they are inserted in HTML via the CSS @font-face declaration and generated content property. Since they are vectors they are scalable and resolution-independent.

Icon fonts can have 2 problems:

  1. Some people with disabilities may not use assistive technology (AT) and rely on on-screen text alternatives.
  2. For those who do use AT, voicing of icon fonts may be inaccurate, nonsensical, redundant, or unpredictable.

To solve these 2 problems aria-hidden="true" is used so AT will ignore the icon. Then an on-screen text alternative is added to convey meaning to everyone.

Example 1

In this example a star icon is used to indicate a favorite.

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>

HTML

<p>
 <!-- Icon added visually. Voicing is suppressed. -->
 <span class="fa fa-star" aria-hidden="true"></span>
 <!-- Accurate text alternative added-->
 <span>Favorite</span>
</p>

Live Example 1

Example 2

In this example an envelope icon is used to indicate a link to an email web page.

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>

HTML

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

Live Example 2

Resources

Related Techniques

Definitions

Icon Fonts
"Icon fonts are vectors, rendered to the size set by the CSS. They scale just as a vector graphic would, generating a clear image no matter the screen size or resolution. Although developers were a bit reluctant to jump on the bandwagon with this trend at first, they’re quickly realizing the value icon fonts have to offer when it comes to creating sites that meet the design industry’s ever-rising standards. Their enhanced flexibility in design and adjustment allows designers to illustrate fully the site’s points without disrupting functions that the dev and the SEO teams will have to deal with later." - Cosette Jarrett
"Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them a popular choice on the web." - George Martsoukos
"Simply put, an icon font is a font file filled with icons and characters or symbols (glyphs) instead of letters and numbers. Icon fonts are truly scalable vector graphics which are completely resolution independent. And, since icon fonts consist of one single font file vs. images there is only one HTTP request." - Gabrielle Underhill
"Remember the Wingdings* Font from back in the days? Icon Fonts are somehow similar like that. An icon font is a (fontface) font, and every (unicode) character maps to an icon. Icon fonts are great, because they are all vectors. Therefore you can easily change the color or size, and they will always have best quality." - Lee Boonstra
"In Unicode there are three free-for-all sections that are not defined by the specification. Called Private Use Areas (or "PUA"), these areas allow custom fonts to insert glyphs that have no official Unicode meaning. Use of the first PUA (sometimes referred to as the 'BMP PUA') is acceptable with a UTF-8 encoding. Many popular font icon solutions map their own characters to the PUA range in order to avoid conflicts with existing Unicode definitions. For example, you wouldn’t want to override the Unicode definition for Black Star to a Rainbow. (Well, maybe you want to, but you shouldn't.) Using the PUA avoids semantic conflicts, but that still leaves us with visual ones. For example, some operating system default fonts define their own characters in the PUA. If any of your icons are mapped to a character with a default glyph and the font request doesn’t successfully complete, the default glyph will be shown." - Zach Leatherman
Unicode
"Unicode provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language." - Unicode.org
Unicode Private Use Area (PUA)
"Any one of the three blocks of private-use code points in the Unicode Standard." - Unicode.org
"a range of code points that, by definition, will not be assigned characters by the Unicode Consortium." - Wikipedia

Tests

Procedure

  1. Check if the icon font is hidden with aria-hidden="true".
  2. Check if an accurate text alternative is present.

Expected Results

  • Tests 1 and 2 are true.
Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Icon_Font_with_an_On-Screen_Text_Alternative&oldid=7794"