doc: updating a11y how-tos w/ aria-label method

diff --git a/src/_includes/accessibility/accessibility-manual.html b/src/_includes/accessibility/accessibility-manual.html
index 2389783efe23b1851c83a235a76acf3b251fc189..5864c681910fd91f6380175f74bcc8a1d9214cab 100644 (file)
--- a/src/_includes/accessibility/accessibility-manual.html
+++ b/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, as well as providing the mouse tooltip.
   </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,18 @@
 
   <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>
 
 {% 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"></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>