library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

doc: updating a11y how-tos w/ aria-label method

Browse Source
This commit is contained in:
Brian Talbot 2016-07-18 08:30:31 -04:00
parent 4213679789
commit df55bbba7e
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/_includes/accessibility/accessibility-manual.html
View File

@ -79,12 +79,12 @@
<h4 class="margin-top-xl text-muted">If an icon represents an interactive element</h4> <h4 class="margin-top-xl text-muted">If an icon represents an interactive element</h4>
<p> <p>
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>&lt;span&gt;</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. 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>&lt;span&gt;</code> or similar. For instance, simply adding the <code>aria-label</code> attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip.
</p> </p>
<div class="margin-bottom-lg margin-top-lg"> <div class="margin-bottom-lg margin-top-lg">
{% highlight html %} {% highlight html %}
<a href="path/to/shopping/cart" title="View 3 items in your shopping cart"> <a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a> </a>
{% endhighlight %} {% endhighlight %}
@ -93,19 +93,18 @@
<div class="margin-bottom-lg margin-top-lg"> <div class="margin-bottom-lg margin-top-lg">
{% highlight html %} {% highlight html %}
<a href="#navigation-main" title="Skip to main navigation"> <a href="#navigation-main" aria-label="Skip to main navigation">
<i class="fa fa-bars" aria-hidden="true"></i> <i class="fa fa-bars" aria-hidden="true"></i>
</a> </a>
{% endhighlight %} {% endhighlight %}
<small class="text-muted">an icon being used as a link to a navigation menu</small> <small class="text-muted">an icon being used as a link to a navigation menu</small>
{% highlight html %} {% highlight html %}
<a class="btn btn-danger" href="path/to/settings" title="Delete"> <a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
<i class="fa fa-trash-o" aria-hidden="true"></i> <i class="fa fa-trash-o" aria-hidden="true" title="Delete"></i>
</a> </a>
{% endhighlight %} {% endhighlight %}
<small class="text-muted">an icon being used as a delete button's symbol</small> <small class="text-muted">an icon being used as a delete button's symbol with a <code>title</code> attribute to provide a native mouse tooltip</small>
</div> </div>