FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-26 13:31:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #9586 from FortAwesome/talbs/update-a11y-doc

Browse Source 
Update Interactive Element Accessibility Documentation
This commit is contained in:
Brian Talbot 2016-07-29 10:13:04 -04:00 committed by GitHub
commit c734a87028
2 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
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>
<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. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the <code>title</code> attribute or a <a href="https://github.com/chinchang/hint.css">custom tooltip</a> solution.
</p>
<div class="margin-bottom-lg margin-top-lg">
{% 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>
</a>
{% endhighlight %}
@ -93,19 +93,20 @@
<div class="margin-bottom-lg margin-top-lg">
{% 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>
</a>
{% endhighlight %}
<small class="text-muted">an icon being used as a link to a navigation menu</small>
</div>
<div class="margin-bottom-lg margin-top-lg">
{% highlight html %}
<a class="btn btn-danger" href="path/to/settings" title="Delete">
<i class="fa fa-trash-o" aria-hidden="true"></i>
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
<i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i>
</a>
{% 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>

40
src/_includes/examples/accessible.html
View File

@ -5,19 +5,16 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
<a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
<span class="sr-only">Skip to main navigation</span>
<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</p>
@ -41,9 +38,8 @@
</p>
<p>
<a href="path/to/shopping/cart" class="btn btn-primary">
<i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
<span class="sr-only">View 3 items in your shopping cart</span>
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
</p>
@ -58,19 +54,16 @@
</p>
{% highlight html %}
<a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
<a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
<span class="sr-only">Skip to main navigation</span>
<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
{% endhighlight %}
@ -94,9 +87,8 @@
{% endhighlight %}
{% highlight html %}
<a href="path/to/shopping/cart" class="btn btn-primary">
<i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
<span class="sr-only">View 3 items in your shopping cart</span>
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
{% endhighlight %}