doc: updating a11y examples to use aria-label method

diff --git a/src/_includes/accessibility/accessibility-manual.html b/src/_includes/accessibility/accessibility-manual.html
index 5864c681910fd91f6380175f74bcc8a1d9214cab..c886ba85bd82dc0a71e6f8c1028daac7dbf5032c 100644 (file)
--- a/src/_includes/accessibility/accessibility-manual.html
+++ b/src/_includes/accessibility/accessibility-manual.html
@@ -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>

diff --git a/src/_includes/examples/accessible.html b/src/_includes/examples/accessible.html
index 2f51aed9c098e3c74bbbe3e43651bcec61bfad1d..0360a46213fa685564996b7642b85cf5689c77c4 100644 (file)
--- a/src/_includes/examples/accessible.html
+++ b/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 %}