deblan-mirror/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome synced 2024-06-23 15:50:16 +02:00
Code Issues Projects Releases Wiki Activity

updating a11y how-tos and examples w/ aria-label method

Browse source
This commit is contained in:
Brian Talbot 2016-07-29 10:17:06 -04:00
parent f0c9879216
commit 703fda0939
3 changed files with 24 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
accessibility/index.html
View file

@ -323,11 +323,11 @@
<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">
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;path/to/shopping/cart&quot;</span> <span class="na">title=</span><span class="s">&quot;View 3 items in your shopping cart&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;path/to/shopping/cart&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;View 3 items in your shopping cart&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-shopping-cart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</code></pre></div>
@ -335,18 +335,19 @@
</div>
<div class="margin-bottom-lg margin-top-lg">
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#navigation-main&quot;</span> <span class="na">title=</span><span class="s">&quot;Skip to main navigation&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#navigation-main&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;Skip to main navigation&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</code></pre></div>
<small class="text-muted">an icon being used as a link to a navigation menu</small>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span> <span class="na">title=</span><span class="s">&quot;Delete&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<div class="margin-bottom-lg margin-top-lg">
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;Delete&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span> <span class="na">title=</span><span class="s">&quot;Delete this item?&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</code></pre></div>
<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>

BIN
assets/font-awesome-4.6.3.zip
View file

Binary file not shown.

40
examples/index.html
View file

@ -715,19 +715,16 @@ fa-ban on fa-camera
<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>
@ -751,9 +748,8 @@ fa-ban on fa-camera
</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>
@ -767,19 +763,16 @@ fa-ban on fa-camera
With <a href="../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>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog&quot;</span> <span class="na">title=</span><span class="s">&quot;Settings&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/span&gt;</span>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;Settings&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o&quot;</span> <span class="na">title=</span><span class="s">&quot;Delete&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Delete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;Delete&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">href=</span><span class="s">&quot;#navigation-main&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span> <span class="na">title=</span><span class="s">&quot;Skip to main navigation&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Skip to main navigation<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">href=</span><span class="s">&quot;#navigation-main&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;Skip to main navigation&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</code></pre></div>
@ -800,9 +793,8 @@ fa-ban on fa-camera
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;path/to/shopping/cart&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-shopping-cart&quot;</span> <span class="na">title=</span><span class="s">&quot;View 3 items in your shopping cart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>View 3 items in your shopping cart<span class="nt">&lt;/span&gt;</span>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;path/to/shopping/cart&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">aria-label=</span><span class="s">&quot;View 3 items in your shopping cart&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-shopping-cart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
</code></pre></div>