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

Update Interactive Element Accessibility Documentation

src/_includes/accessibility/accessibility-manual.html

@@ -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>
 
 

src/_includes/examples/accessible.html

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