View source for Icon Font with an On-Screen Text Alternative

[[Category:Techniques]]
[[Category:HTML Techniques]]
[[Category:Techniques In Development]]
[[Category:Techniques Needs Work]]
[[Category:Icon Font]]

== Status ==

* New technique
* [https://github.com/w3c/wcag/issues/144 <nowiki>[</nowiki>LowVision<nowiki>]</nowiki> GitHub Issue 144: Techniques needed for Icon Fonts] - January 12, 2016
* Email 
** [https://lists.w3.org/Archives/Public/w3c-wai-gl/2016JanMar/0143.html LVTF Technique volunteers needed] - February 5, 2016
** [https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2016Jul/0000.html WCAG Issue 144 <nowiki>[</nowiki>LowVision<nowiki>]</nowiki>Techniques needed for Icon Fonts] - July 5, 2016
** [https://lists.w3.org/Archives/Public/public-pfwg/2015Oct/0168.html Request for note regarding selection, search, and accessibility of generated content] - Joanmarie Diggs 
*** [https://drafts.csswg.org/css-content-3/#alt-property 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)
** [https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2016Jul/0052.html Your thoughts on updated "Icon Font with an On-Screen Text Alternative" Technique] - July 29, 2016
** [https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2016Aug/0007.html Finishing up WCAG Icon Font Issue 144] August 16, 2016 
* Surveys
**  [https://www.w3.org/2002/09/wbs/35422/NewWCAGEditRec/results#xq11 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).
* Minutes
** [https://www.w3.org/2016/04/19-wai-wcag-minutes.html#item02  April 19, 2016 - WCAG WG Teleconference Minutes]
** [https://www.w3.org/2016/07/28-lvtf-minutes.html July 28, 2016 - Low Vision Accessibility Task Force Teleconference Minutes]
** [https://www.w3.org/2016/08/18-lvtf-minutes.html#item01 August 18, 2016 - Low Vision Accessibility Task Force Teleconference Minutes and Resolution to Accept this Technique]

== Applicability ==

* [http://www.w3.org/TR/WCAG20/#text-equiv-all Success Criterion 1.1.1 (Non-text Content)]
** [http://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all How to Meet 1.1.1 (Non-text Content)]
** [http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html Understanding Success Criterion 1.1.1 (Non-text Content)]

== 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 <code>aria-hidden="true"</code> 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 ===

 &lt;style&gt;
  @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: &quot;\f005&quot;;
  }
  span.fa-star { 
  color:purple;
  background:white;
  font-size:3em;
  padding-left:0.2em;
  }
  p&gt;span+span {
  font-family:sans-serif;
  font-size:1.1em;
  display:block;
  padding-left:0.2em;
  } 
 &lt;/style&gt;

=== HTML ===

 &lt;p&gt;
  &lt;!-- Icon added visually. Voicing is suppressed. --&gt;
  &lt;span class=&quot;fa fa-star&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  &lt;!-- Accurate text alternative added--&gt;
  &lt;span&gt;Favorite&lt;/span&gt;
 &lt;/p&gt;

=== Live Example 1 ===
* [http://www.d.umn.edu/~lcarlson/wcagwg/tests/iconfonts/onscreen_alt.html Icon Font with an On-Screen Text Alternative]

== Example 2 ==

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

=== CSS ===

 &lt;style&gt;
  @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: &quot;\f0e0&quot;; 
  background:white;
  color:blue;
  font-size: 3em;
  } 
  a {
  text-decoration:none;
  }
  h2 {
  font-family:sans-serif;
  font-size:1.1em;
  margin:0em;
  }
 &lt;/style&gt;

=== HTML ===

 &lt;a href=&quot;email.html&quot;&gt;
  &lt;!-- Icon added visually. Voicing is suppressed. --&gt;
  &lt;span class=&quot;fa fa-envelope&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  &lt;!-- Accurate text alternative added--&gt;
  &lt;h2&gt;Email&lt;/h2&gt;
 &lt;/a&gt;

=== Live Example 2 ===
* [http://www.d.umn.edu/~lcarlson/wcagwg/tests/iconfonts/onscreen_alt_in_link.html Icon Font a in Link with an On-Screen Text Alternative]

== Resources ==

* [http://www.nngroup.com/articles/icon-usability/ Icon Usability] - Aurora Bedford, Nielsen Norman Group 
* [http://thomasbyttebier.be/blog/the-best-icon-is-a-text-label The Best Icon is a Text Label] - Thomas Byttebier 
* [https://speakerdeck.com/ninjanails/death-to-icon-fonts Death to Icon Fonts Speaker Deck] - Seren Davies
* [http://blog.cloudfour.com/seriously-dont-use-icon-fonts/ Seriously, Don’t Use Icon Fonts]  - Tyler Sticka

=== Related Techniques ===

* [https://www.w3.org/WAI/GL/wiki/Semantically_Identifying_Icon_Font_with_role%3Dimg Semantically Identifying Icon Font with role=img (Draft)]
* [https://www.w3.org/WAI/GL/wiki/Using_aria-hidden%3Dtrue_on_an_icon_font_that_AT_should_ignore Using aria-hidden="true" on an icon font that AT should ignore (Draft)]
* [https://www.w3.org/WAI/GL/wiki/Using_a_Decorative_Unicode_Character Using aria-hidden="true" on Unicode characters that AT should ignore (Draft)]
* [https://www.w3.org/WAI/GL/wiki/Providing_an_On-Screen_Text_Alternative_for_an_Icon_Font Unicode Character with an On-Screen Text Alternative (Draft)]
* [https://www.w3.org/TR/WCAG20-TECHS/H67.html H67: Using null alt text and no title attribute on img elements for images that AT should ignore]
* [https://www.w3.org/TR/WCAG20-TECHS/F3.html F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information]
* [https://www.w3.org/TR/WCAG20-TECHS/F87.html 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
: <blockquote>"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." -  [https://moz.com/ugc/3-solid-reasons-you-should-ditch-icon-images-for-fonts Cosette Jarrett]</blockquote>
: <blockquote>"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." - [https://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/ George Martsoukos]</blockquote> 
: <blockquote>"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." - [https://www.theedesign.com/blog/2014/icon-fonts-benefits Gabrielle Underhill]</blockquote>
: <blockquote>"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." - [https://www.ladysign-apps.com/developer/reverse-engineer-the-sencha-fontawesome-package-to-get-an-overview-of-icons/ Lee Boonstra]</blockquote>
: <blockquote>"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."  - [https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html Zach Leatherman]</blockquote>
;Unicode
: <blockquote>"Unicode provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language." - [http://unicode.org/standard/WhatIsUnicode.html Unicode.org]</blockquote>
;Unicode Private Use Area (PUA)
: <blockquote>"Any one of the three blocks of private-use code points in the Unicode Standard." - [http://unicode.org/glossary/#private_use_area Unicode.org]
: <blockquote>"a range of code points that, by definition, will not be assigned characters by the Unicode Consortium." - [https://en.wikipedia.org/wiki/Private_Use_Areas#Private_Use_Areas Wikipedia]</blockquote>

== Tests ==

=== Procedure ===

# Check if the icon font is hidden with <code>aria-hidden="true".</code>
# Check if an accurate text alternative is present.

=== Expected Results ===

* Tests 1 and 2 are true.