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: [PATCH 1/4] ``aria-label="close"`` instead of sr-only ``span``

shorter, neater, well supported
---
 docs/_includes/components/alerts.html |  4 ++--
 docs/_includes/css/helpers.html       |  4 ++--
 docs/_includes/js/alerts.html         |  7 +++----
 docs/_includes/js/modal.html          | 16 ++++++++--------
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html
index 717308354c22..7487a968aa05 100644
--- a/docs/_includes/components/alerts.html
+++ b/docs/_includes/components/alerts.html
@@ -40,13 +40,13 @@ <h4>Requires JavaScript alert plugin</h4>
   </div>
   <div class="bs-example" data-example-id="dismissible-alert-css">
     <div class="alert alert-warning alert-dismissible" role="alert">
-      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
   </div>
 {% highlight html %}
 <div class="alert alert-warning alert-dismissible" role="alert">
-  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
 {% endhighlight %}
diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index c6701bfdcc65..db60f0ad81ea 100644
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -56,10 +56,10 @@ <h4>Conveying meaning to assistive technologies</h4>
   <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 %}
 
 
diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index f93abc8b242e..399cd732f3f2 100644
--- a/docs/_includes/js/alerts.html
+++ b/docs/_includes/js/alerts.html
@@ -6,12 +6,12 @@ <h2 id="alerts-examples">Example alerts</h2>
   <p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p>
   <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
     <div class="alert alert-warning alert-dismissible fade in" role="alert">
-      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
     </div>
 
     <div class="alert alert-danger alert-dismissible fade in" role="alert">
-      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <h4>Oh snap! You got an error!</h4>
       <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
       <p>
@@ -27,9 +27,8 @@ <h2 id="alerts-usage">Usage</h2>
   <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p>
 
 {% highlight html %}
-<button type="button" class="close" data-dismiss="alert">
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <span aria-hidden="true">&times;</span>
-  <span class="sr-only">Close</span>
 </button>
 {% endhighlight %}
 
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index 83c047904ef3..f5861f4a5f96 100644
--- a/docs/_includes/js/modal.html
+++ b/docs/_includes/js/modal.html
@@ -31,7 +31,7 @@ <h3>Static example</h3>
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title">Modal title</h4>
           </div>
           <div class="modal-body">
@@ -50,7 +50,7 @@ <h4 class="modal-title">Modal title</h4>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title">Modal title</h4>
       </div>
       <div class="modal-body">
@@ -73,7 +73,7 @@ <h3>Live demo</h3>
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
@@ -124,7 +124,7 @@ <h4>Overflowing text to show scroll behavior</h4>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
@@ -186,7 +186,7 @@ <h2 id="modals-sizes">Optional sizes</h2>
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
         </div>
         <div class="modal-body">
@@ -200,7 +200,7 @@ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
       <div class="modal-content">
 
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
         </div>
         <div class="modal-body">
@@ -230,7 +230,7 @@ <h2 id="modals-related-target">Varying modal content based on trigger button</h2
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title" id="exampleModalLabel">New message</h4>
           </div>
           <div class="modal-body">
@@ -263,7 +263,7 @@ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="exampleModalLabel">New message</h4>
       </div>
       <div class="modal-body">

From 8af8f7d5404536782f76e0ca02e01497f1e8b0ae Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 7 Dec 2014 14:43:50 +0000
Subject: [PATCH 2/4] Make sidebar navigation actual ``<nav>``

---
 docs/_layouts/default.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 40ff5e0cc5e3..51191dc5ebee 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -26,8 +26,8 @@ <h1>{{ page.title }}</h1>
           {{ content }}
         </div>
         {% unless page.fullwidth == true %}
-        <div class="col-md-3">
-          <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
+        <div class="col-md-3" role="complementary">
+          <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
             <ul class="nav bs-docs-sidenav">
               {% if page.slug == "getting-started" %}
                 {% include nav/getting-started.html %}
@@ -53,7 +53,7 @@ <h1>{{ page.title }}</h1>
               Preview theme
             </a>
             {% endif %}
-          </div>
+          </nav>
         </div>
         {% endunless %}
       </div>

From 353d8395aea20dad7d59bb54b8972a29ab2cb6e2 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 7 Dec 2014 15:11:28 +0000
Subject: [PATCH 3/4] Expand advice about adding labels

Harmonizing this with same advice given for CSS inline forms
---
 docs/_includes/components/navbar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html
index c8107c017a92..6cd731ac6ce8 100644
--- a/docs/_includes/components/navbar.html
+++ b/docs/_includes/components/navbar.html
@@ -208,7 +208,7 @@ <h4>Mobile device caveats</h4>
 
   <div class="bs-callout bs-callout-warning" id="callout-navbar-form-labels">
     <h4>Always add labels</h4>
-    <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
+    <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
   </div>
 
 

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: [PATCH 4/4] ``<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(-)

diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html
index 18cd9646412f..294a1df292ab 100644
--- a/docs/_includes/css/type.html
+++ b/docs/_includes/css/type.html
@@ -220,10 +220,9 @@ <h2 id="type-transformation">Transformation classes</h2>
 
   <!-- 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>