mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-28 06:21:30 +08:00
adding accessibility informational page
* adding to main Font Awesome navigation * adding background, use cases + how-to's, and more information sections
This commit is contained in:
Brian Talbot
parent
f97ab41d18
commit
b35a05cce6
15
src/_includes/accessibility/background.html
Normal file
15
src/_includes/accessibility/background.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="background">
|
||||
<h2 class="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 finding any content to read out to a user
|
||||
</li>
|
||||
<li>
|
||||
The assistive technolog may read the unicode equivalent which could not match up to what the icon means in context or worse is just plain confusing
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
16
src/_includes/accessibility/other.html
Normal file
16
src/_includes/accessibility/other.html
Normal file
@ -0,0 +1,16 @@
|
||||
<div id="other">
|
||||
<h2 class="page-header">Other cases and information</h2>
|
||||
<p>
|
||||
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 quality vision using high contrast mode to better see UI. There are some great tools and resources to learning and work on these out there. Here are a few reads we recommend.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html">https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html</a></li>
|
||||
<li><a href="https://css-tricks.com/html-for-icon-font-usage/">https://css-tricks.com/html-for-icon-font-usage/</a></li>
|
||||
<li><a href="http://www.sitepoint.com/icon-fonts-vs-svg-debate/">http://www.sitepoint.com/icon-fonts-vs-svg-debate/</a></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>.
|
||||
</p>
|
||||
</div>
|
||||
78
src/_includes/accessibility/using-with-accessibility.html
Normal file
78
src/_includes/accessibility/using-with-accessibility.html
Normal file
@ -0,0 +1,78 @@
|
||||
<div id="using-with-accessibility">
|
||||
<h2 class="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> attribute to your Font Awesome markup.
|
||||
</p>
|
||||
|
||||
<div class="margin-top-lg margin-bottom-lg">
|
||||
{% highlight html %}
|
||||
<i class="fa fa-fighter-jet" aria-hidden="true"></i>
|
||||
{% endhighlight %}
|
||||
<small>an icon being used as pure decoration</small>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-lg">
|
||||
{% highlight html %}
|
||||
<h1 class="logo">
|
||||
<i class="fa fa-pied-piper" aria-hidden="true"></i>
|
||||
Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
|
||||
</h1>
|
||||
{% endhighlight %}
|
||||
<small>an icon being used as a logo</small>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-lg">
|
||||
{% highlight html %}
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
|
||||
{% endhighlight %}
|
||||
<small>an icon being used in front of link text</small>
|
||||
</div>
|
||||
|
||||
<h3>Icons that with semantic or interactive purpose</h3>
|
||||
<p>
|
||||
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 – for instance, include additional content that's visually hidden to users but semantically avaiable to screen readers. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.).
|
||||
</p>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<ul class="fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-info-circle fa-li fa-lg"></i>
|
||||
Bootstrap comes with a <a href="http://getbootstrap.com/css/#callout-has-feedback-icon-accessibility">utility class to visually hide content, but make semantically accessible</a>. Not using Bootstrap, there are <a href="https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">plenty</a> of <a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L124">recipes</a> to roll your own from.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-lg margin-top-lg">
|
||||
{% highlight html %}
|
||||
<a href="path/to/shopping/cart">
|
||||
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
|
||||
<span class="sr-only">View </span>3<span class="sr-only"> items in your shopping cart</span>
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
<small>an icon being used to communicate shopping cart state</small>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-lg margin-top-lg">
|
||||
{% highlight html %}
|
||||
<a href="#navigation-main">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
<span class="sr-only">Skip to main navigation</span>
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
<small>an icon being used as a link to a navigation menu</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<ul class="fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-info-circle fa-li fa-lg"></i>
|
||||
<a href="{{ page.relative_path }}examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -96,6 +96,7 @@
|
||||
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li{% if page.navbar_active == "accessibility" %} class="active"{% endif %}><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li>
|
||||
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
|
||||
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
|
||||
</ul>
|
||||
|
||||
28
src/accessibility.html
Normal file
28
src/accessibility.html
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
layout: base
|
||||
title: Font Awesome & Accessibility
|
||||
navbar_active: accessibility
|
||||
relative_path: ../
|
||||
---
|
||||
{% capture jumbotron_h1 %}<i class="fa fa-wheelchair"></i> Accessibility{% endcapture %}
|
||||
{% capture jumbotron_p %}How to make your icons awesome for all of your users{% endcapture %}
|
||||
|
||||
{% include jumbotron.html %}
|
||||
{% include stripe-social.html %}
|
||||
|
||||
<div class="container">
|
||||
{% capture stripe_ad_content %}
|
||||
<p class="lead">
|
||||
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>
|
||||
|
||||
<p class="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>
|
||||
{% endcapture %}
|
||||
{% include stripe-ad.html %}
|
||||
|
||||
{% include accessibility/background.html %}
|
||||
{% include accessibility/using-with-accessibility.html %}
|
||||
{% include accessibility/other.html %}
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user