FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2024-12-27 14:01:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

doc: updating a11y examples to use aria-label method

Browse Source
This commit is contained in:
Brian Talbot 2016-07-18 08:45:39 -04:00
parent df55bbba7e
commit 98475f44f1
2 changed files with 20 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,7 +79,7 @@
<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>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.
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">
@ -98,10 +98,12 @@
</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" aria-label="Delete">
<i class="fa fa-trash-o" aria-hidden="true" title="Delete"></i>
<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 with a <code>title</code> attribute to provide a native mouse tooltip</small>

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 %}