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
Contents
Status
- New technique
- [LowVision] GitHub Issue 144: Techniques needed for Icon Fonts - January 12, 2016
- Email
- LVTF Technique volunteers needed - February 5, 2016
- WCAG Issue 144 [LowVision]Techniques needed for Icon Fonts - July 5, 2016
- Request for note regarding selection, search, and accessibility of generated content - Joanmarie Diggs
- 2.1. Alternative text for Generated Content: The alt property - CSS Generated Content Module Level 3 Editor’s Draft, 31 January 2016 (Not Ready For Implementation)
- Your thoughts on updated "Icon Font with an On-Screen Text Alternative" Technique - July 29, 2016
- Finishing up WCAG Icon Font Issue 144 August 16, 2016
- Surveys
- April 2016 WCAG WG Survey
- Updated per Makoto's and Andrew's survey comments: Removed figure element and simplified procedure. Added this technique to be specific to icon fonts, which use @font-face and Unicode Private Use Area (PUA).
- April 2016 WCAG WG Survey
- Minutes
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:
- Some people with disabilities may not use assistive technology (AT) and rely on on-screen text alternatives.
- 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
- Icon Usability - Aurora Bedford, Nielsen Norman Group
- The Best Icon is a Text Label - Thomas Byttebier
- Death to Icon Fonts Speaker Deck - Seren Davies
- Seriously, Don’t Use Icon Fonts - Tyler Sticka
Related Techniques
- Semantically Identifying Icon Font with role=img (Draft)
- Using aria-hidden="true" on an icon font that AT should ignore (Draft)
- Using aria-hidden="true" on Unicode characters that AT should ignore (Draft)
- Unicode Character with an On-Screen Text Alternative (Draft)
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore
- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
- F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS
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
- Check if the icon font is hidden with
aria-hidden="true".
- Check if an accurate text alternative is present.
Expected Results
- Tests 1 and 2 are true.