Using aria-hidden=true on an icon font that AT should ignore
Status
- New technique
- [ LowVision]GitHub Issue 144: Techniques needed for Icon Fonts
- April 2016 Survey
- Updated the technique per Andrew's and Mo's survey comments by simplifying the procedure and adding this technique specific to icon fonts, which uses @font-face and Unicode Private Use Area (PUA).
- Minutes
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
- The @font-face rule
- Accessibility support for CSS generated content - Leonie Watson
- 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)
- Icon Font with an On-Screen Text Alternative (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
- Providing an On-Screen Text Alternative for an Icon Font (Draft)
- CSS Content rendering David MacDonald
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 that a purely decorative icon font is present.
- Check that the icon font is hidden with
aria-hidden="true".
Expected Results
- #1 and #2 are true