Using aria-hidden=true on an icon font that AT should ignore

From WCAG WG


Status

Applicability

Description

The objective of this technique is to show how to make icon fonts that are pure decoration be ignored by assistive technology.

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.

Some versions of assistive technologies will announce CSS generated content, as well as specific icon fonts. The announcement may be redundant, inaccurate, and/or meaningless. So aria-hidden="true" is used.

Example

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;
 background-color:white;
 color:red;
 }
 h2 .fa-caret-right:before {
 /* Icon added via generated content 
 from Unicode Private Use Area (PUA) */
 content: "\f0da";
 font-size:1.5em;
 }
 h3 .fa-check:before {
 /* Icon added via generated content */
 from Unicode Private Use Area (PUA) */
 content: "\f00c"; 
 font-size:1.2em;
 margin-left:0.2em;
 }
</style>

HTML

<h2>
 <!-- Right caret icon added visually. Voicing suppressed. -->
 <span class="fa fa-caret-right" aria-hidden="true"></span>
 Heading preceded by a decorative icon font
 </h2>
 <h3>
 <!-- Checkmark icon added visually. Voicing suppressed. -->
 <span class="fa fa-check" aria-hidden="true"></span>
 Sub-heading preceded by a decorative icon font
</h3>

Live Example

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 that a purely decorative icon font is present.
  2. Check that the icon font is hidden with aria-hidden="true".

Expected Results

  • #1 and #2 are true