FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2025-02-07 02:48:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding in accessibility-minded examples

Browse Source
This commit is contained in:
Brian Talbot 2016-04-01 17:13:44 -04:00
parent b35a05cce6
commit 092d523f3b
2 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/_includes/examples/accessible.html Normal file
View File

@ -0,0 +1,96 @@
<section id="accessible">
<h2 class="page-header">
Accessibility-Minded
</h2>
<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" aria-hidden="true"><span class="sr-only">Settings</span></i>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" aria-hidden="true"><span class="sr-only">Delete</span></i>
</a>
<a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true"><span class="sr-only">Skip to main navigation</span></i>
</a>
</p>
<p>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i>
</p>
<p>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</p>
<p>
<a href="path/to/shopping/cart" class="btn btn-primary">
<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>
</p>
<p>
<i class="fa fa-battery-half" aria-hidden="true"></i><span class="sr-only">Battery Remaining: 50%;</span>
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
With <a href="{{ page.relative_path }}accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
</p>
{% highlight html %}
<a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" aria-hidden="true"><span class="sr-only">Settings</span></i>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" aria-hidden="true"><span class="sr-only">Delete</span></i>
</a>
<a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true"><span class="sr-only">Skip to main navigation</span></i>
</a>
{% endhighlight %}
{% highlight html %}
<i class="fa fa-refresh fa-spin" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i>
<i class="fa fa-cog fa-spin" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i>
{% endhighlight %}
{% highlight html %}
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
{% endhighlight %}
{% highlight html %}
<a href="path/to/shopping/cart" class="btn btn-primary">
<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 %}
{% highlight html %}
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery Remaining: 50%;</span>
{% endhighlight %}
</div>
</div>
</section>

1
src/examples.html
View File

@ -26,6 +26,7 @@ relative_path: ../
{% include examples/list.html %}
{% include examples/bordered-pulled.html %}
{% include examples/animated.html %}
{% include examples/accessible.html %}
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
{% include examples/bootstrap.html %}