From c609272ac199cc9806ad6c4cf8c7f8f4253fb347 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 7 Dec 2014 14:29:03 +0000
Subject: ``aria-label="close"`` instead of sr-only ``span``

shorter, neater, well supported
---
 docs/_includes/css/helpers.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index c6701bfdc..db60f0ad8 100644
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -56,10 +56,10 @@
   <h3 id="helper-classes-close">Close icon</h3>
   <p>Use the generic close icon for dismissing content like modals and alerts.</p>
   <div class="bs-example" data-example-id="close-icon">
-    <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
+    <p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p>
   </div>
 {% highlight html %}
-<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 {% endhighlight %}
 
 
-- 
cgit v1.2.3


From 202f1f8d69b119fd63d6788ee98e40321f53423b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 7 Dec 2014 15:17:49 +0000
Subject: ``<abbr>`` with title also useful for AT

...and remove the redundant paragraph for basic abbreviation, which
simply repeats what was just said above.
---
 docs/_includes/css/type.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html
index 18cd96464..294a1df29 100644
--- a/docs/_includes/css/type.html
+++ b/docs/_includes/css/type.html
@@ -220,10 +220,9 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <!-- Abbreviations -->
   <h2 id="type-abbreviations">Abbreviations</h2>
-  <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
+  <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p>
 
   <h3>Basic abbreviation</h3>
-  <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
   <div class="bs-example" data-example-id="simple-abbr">
     <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
   </div>
-- 
cgit v1.2.3