<ahref="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update"data-toggle="tooltip"data-container="body"data-placement="bottom"data-html="true"title="Take your front end game<br>to the next level!">
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://fontawesome.io"data-text="Font Awesome, the iconic font and CSS framework"data-counturl="http://fortawesome.github.com/Font-Awesome/"data-count="horizontal"data-via="fontawesome"data-related="davegandy:Creator of Font Awesome">Tweet</a>
Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible.
</p>
<pclass="lead">
When creating web sites and apps, that means making sure our icons play well with assistive tech when users are navigating apps and sites.
</p>
</div>
</section>
<divid="background">
<h2class="page-header">Icon Fonts & Accessibility</h2>
<p>
Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When trying our default markup for rendering icons, assisistive technology may have the following problems.
</p>
<ul>
<li>
The assistive technology may not find any content to read out to a user
<h2class="page-header">Using Font Awesome with Acessibility in mind</h2>
<p>
When using icons in your UI, there are ways to help assistive technology either ignore or better understand Font Awesome.
</p>
<h3>Icons used for pure decoration or visual styling</h3>
<p>
If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup.
Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
<spanclass="nt"></h1></span>
</code></pre></div>
<smallclass="text-muted">an icon being used as a logo</small>
</div>
<divclass="margin-bottom-lg">
<divclass="highlight"><pre><codeclass="html"><spanclass="nt"><a</span><spanclass="na">href=</span><spanclass="s">"https://github.com/FortAwesome/Font-Awesome"</span><spanclass="nt">><i</span><spanclass="na">class=</span><spanclass="s">"fa fa-github"</span><spanclass="na">aria-hidden=</span><spanclass="s">"true"</span><spanclass="nt">></i></span> View this project's code on Github<spanclass="nt"></a></span>
</code></pre></div>
<smallclass="text-muted">an icon being used in front of link text</small>
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this:
</p>
<h4>If an icon is <strong>not</strong> an interactive element</h4>
The simplest way to provide a text alternative is to use the <code>aria-hidden="true"</code> attribute on the icon and to include the text with an additional element, such as a <code><span></code>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a <code>title</code> attribute on the icon to provide a tooltip for sighted mouse users.
<spanclass="nt"><i</span><spanclass="na">class=</span><spanclass="s">"fa fa-car"</span><spanclass="na">aria-hidden=</span><spanclass="s">"true"</span><spanclass="na">title=</span><spanclass="s">"Time to destination by car"</span><spanclass="nt">></i></span>
<spanclass="nt"><span</span><spanclass="na">class=</span><spanclass="s">"sr-only"</span><spanclass="nt">></span>Time to destination by car:<spanclass="nt"></span></span>
<spanclass="nt"><i</span><spanclass="na">class=</span><spanclass="s">"fa fa-bicycle"</span><spanclass="na">aria-hidden=</span><spanclass="s">"true"</span><spanclass="na">title=</span><spanclass="s">"Time to destination by bike"</span><spanclass="nt">></i></span>
<spanclass="nt"><span</span><spanclass="na">class=</span><spanclass="s">"sr-only"</span><spanclass="nt">></span>Time to destination by bike:<spanclass="nt"></span></span>
<divclass="highlight"><pre><codeclass="html"><spanclass="nt"><i</span><spanclass="na">class=</span><spanclass="s">"fa fa-hourglass"</span><spanclass="na">aria-hidden=</span><spanclass="s">"true"</span><spanclass="na">title=</span><spanclass="s">"60 minutes remain in your exam"</span><spanclass="nt">></i></span>
<spanclass="nt"><span</span><spanclass="na">class=</span><spanclass="s">"sr-only"</span><spanclass="nt">></span>60 minutes remain in your exam<spanclass="nt"></span></span>
<spanclass="nt"><i</span><spanclass="na">class=</span><spanclass="s">"fa fa-hourglass-half"</span><spanclass="na">aria-hidden=</span><spanclass="s">"true"</span><spanclass="na">title=</span><spanclass="s">"30 minutes remain in your exam"</span><spanclass="nt">></i></span>
<spanclass="nt"><span</span><spanclass="na">class=</span><spanclass="s">"sr-only"</span><spanclass="nt">></span>30 minutes remain in your exam<spanclass="nt"></span></span>
<spanclass="nt"><i</span><spanclass="na">class=</span><spanclass="s">"fa fa-hourglass-end"</span><spanclass="na">aria-hidden=</span><spanclass="s">"true"</span><spanclass="na">title=</span><spanclass="s">"0 minutes remain in your exam"</span><spanclass="nt">></i></span>
<spanclass="nt"><span</span><spanclass="na">class=</span><spanclass="s">"sr-only"</span><spanclass="nt">></span>0 minutes remain in your exam<spanclass="nt"></span></span>
In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code><span></code> or similar. For instance, simply adding the <code>title</code> attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip.
<divclass="highlight"><pre><codeclass="html"><spanclass="nt"><a</span><spanclass="na">href=</span><spanclass="s">"path/to/shopping/cart"</span><spanclass="na">title=</span><spanclass="s">"View 3 items in your shopping cart"</span><spanclass="nt">></span>
<divclass="highlight"><pre><codeclass="html"><spanclass="nt"><a</span><spanclass="na">href=</span><spanclass="s">"#navigation-main"</span><spanclass="na">title=</span><spanclass="s">"Skip to main navigation"</span><spanclass="nt">></span>
Bootstrap comes with a <ahref="http://getbootstrap.com/css/#callout-has-feedback-icon-accessibility">utility class to visually hide content, but keep it semantically accessible</a>. If you're not using Bootstrap, there are <ahref="https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">plenty</a> of <ahref="https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L124">recipes</a> to roll your own from.
While the scenarios and techniques above help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend.
We'll continue to work on these under the larger topic of accessibility, but in the meantime, <ahref="../community/#reporting-bugs">let us know if any bugs or issues</a>.
Documentation licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
</div>
<div>
Thanks to <ahref="http://tracking.maxcdn.com/c/148092/3982/378/"><iclass="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <ahref="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
