Merge pull request #15327 from patrickhlauke/docs-accessibility-tweaks2

More docs accessibility tweaks

docs/_includes/components/input-groups.html

@@ -16,7 +16,11 @@
     <h4>Don't mix with other components</h4>
     <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
   </div>
-
+  <div class="bs-callout bs-callout-warning" id="callout-inputgroup-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 input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
+    <p>The exact technique to be used (<code>&lt;label&gt;</code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
+  </div>
 
   <h2 id="input-groups-basic">Basic example</h2>
   <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
@@ -24,35 +28,35 @@
   <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
   <form class="bs-example bs-example-form" data-example-id="simple-input-groups">
     <div class="input-group">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
+      <span class="input-group-addon" id="basic-addon1">@</span>
+      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
     </div>
     <br>
     <div class="input-group">
-      <input type="text" class="form-control">
-      <span class="input-group-addon">.00</span>
+      <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+      <span class="input-group-addon" id="basic-addon2">@example.com</span>
     </div>
     <br>
     <div class="input-group">
       <span class="input-group-addon">$</span>
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
       <span class="input-group-addon">.00</span>
     </div>
   </form>
 {% highlight html %}
 <div class="input-group">
-  <span class="input-group-addon">@</span>
-  <input type="text" class="form-control" placeholder="Username">
+  <span class="input-group-addon" id="basic-addon1">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
 </div>
 
 <div class="input-group">
-  <input type="text" class="form-control">
-  <span class="input-group-addon">.00</span>
+  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+  <span class="input-group-addon" id="basic-addon2">@example.com</span>
 </div>
 
 <div class="input-group">
   <span class="input-group-addon">$</span>
-  <input type="text" class="form-control">
+  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
   <span class="input-group-addon">.00</span>
 </div>
 {% endhighlight %}
@@ -61,34 +65,34 @@
   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
   <form class="bs-example bs-example-form" data-example-id="input-group-sizing">
     <div class="input-group input-group-lg">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
+      <span class="input-group-addon" id="sizing-addon1">@</span>
+      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
     </div>
     <br>
     <div class="input-group">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
+      <span class="input-group-addon" id="sizing-addon2">@</span>
+      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
     </div>
     <br>
     <div class="input-group input-group-sm">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
+      <span class="input-group-addon" id="sizing-addon3">@</span>
+      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
     </div>
   </form>
 {% highlight html %}
 <div class="input-group input-group-lg">
-  <span class="input-group-addon">@</span>
-  <input type="text" class="form-control" placeholder="Username">
+  <span class="input-group-addon" id="sizing-addon1">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
 </div>
 
 <div class="input-group">
-  <span class="input-group-addon">@</span>
-  <input type="text" class="form-control" placeholder="Username">
+  <span class="input-group-addon" id="sizing-addon2">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
 </div>
 
 <div class="input-group input-group-sm">
-  <span class="input-group-addon">@</span>
-  <input type="text" class="form-control" placeholder="Username">
+  <span class="input-group-addon" id="sizing-addon3">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
 </div>
 {% endhighlight %}
 
@@ -100,17 +104,17 @@
       <div class="col-lg-6">
         <div class="input-group">
           <span class="input-group-addon">
-            <input type="checkbox">
+            <input type="checkbox" aria-label="Checkbox for following text input">
           </span>
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" aria-label="Text input with checkbox">
         </div><!-- /input-group -->
       </div><!-- /.col-lg-6 -->
       <div class="col-lg-6">
         <div class="input-group">
           <span class="input-group-addon">
-            <input type="radio">
+            <input type="radio" aria-label="Radio button for following text input">
           </span>
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" aria-label="Text input with radio button">
         </div><!-- /input-group -->
       </div><!-- /.col-lg-6 -->
     </div><!-- /.row -->
@@ -120,17 +124,17 @@
   <div class="col-lg-6">
     <div class="input-group">
       <span class="input-group-addon">
-        <input type="checkbox">
+        <input type="checkbox" aria-label="...">
       </span>
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" aria-label="...">
     </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
   <div class="col-lg-6">
     <div class="input-group">
       <span class="input-group-addon">
-        <input type="radio">
+        <input type="radio" aria-label="...">
       </span>
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" aria-label="...">
     </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
 </div><!-- /.row -->
@@ -146,12 +150,12 @@
           <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
           </span>
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" placeholder="Search for...">
         </div><!-- /input-group -->
       </div><!-- /.col-lg-6 -->
       <div class="col-lg-6">
         <div class="input-group">
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" placeholder="Search for...">
           <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
           </span>
@@ -166,12 +170,12 @@
       <span class="input-group-btn">
         <button class="btn btn-default" type="button">Go!</button>
       </span>
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" placeholder="Search for...">
     </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
   <div class="col-lg-6">
     <div class="input-group">
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" placeholder="Search for...">
       <span class="input-group-btn">
         <button class="btn btn-default" type="button">Go!</button>
       </span>
@@ -196,12 +200,12 @@
               <li><a href="#">Separated link</a></li>
             </ul>
           </div><!-- /btn-group -->
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" aria-label="Text input with dropdown button">
         </div><!-- /input-group -->
       </div><!-- /.col-lg-6 -->
       <div class="col-lg-6">
         <div class="input-group">
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" aria-label="Text input with dropdown button">
           <div class="input-group-btn">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -230,12 +234,12 @@
           <li><a href="#">Separated link</a></li>
         </ul>
       </div><!-- /btn-group -->
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" aria-label="...">
     </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
   <div class="col-lg-6">
     <div class="input-group">
-      <input type="text" class="form-control">
+      <input type="text" class="form-control" aria-label="...">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -257,7 +261,7 @@
       <div class="col-lg-6">
         <div class="input-group">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default" tabindex="-1">Action</button>
+            <button type="button" class="btn btn-default">Action</button>
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
@@ -270,14 +274,14 @@
               <li><a href="#">Separated link</a></li>
             </ul>
           </div>
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
         </div><!-- /.input-group -->
       </div><!-- /.col-lg-6 -->
       <div class="col-lg-6">
         <div class="input-group">
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default" tabindex="-1">Action</button>
+            <button type="button" class="btn btn-default">Action</button>
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
@@ -299,11 +303,11 @@
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
-  <input type="text" class="form-control">
+  <input type="text" class="form-control" aria-label="...">
 </div>
 
 <div class="input-group">
-  <input type="text" class="form-control">
+  <input type="text" class="form-control" aria-label="...">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>

docs/_includes/components/pagination.html

@@ -9,9 +9,8 @@
     <nav>
       <ul class="pagination">
         <li>
-          <a href="#">
+          <a href="#" aria-label="Previous">
             <span aria-hidden="true">&laquo;</span>
-            <span class="sr-only">Previous</span>
           </a>
         </li>
         <li><a href="#">1</a></li>
@@ -20,9 +19,8 @@
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
         <li>
-          <a href="#">
+          <a href="#" aria-label="Next">
             <span aria-hidden="true">&raquo;</span>
-            <span class="sr-only">Next</span>
           </a>
         </li>
       </ul>
@@ -32,9 +30,8 @@
 <nav>
   <ul class="pagination">
     <li>
-      <a href="#">
+      <a href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
-        <span class="sr-only">Previous</span>
       </a>
     </li>
     <li><a href="#">1</a></li>
@@ -43,9 +40,8 @@
     <li><a href="#">4</a></li>
     <li><a href="#">5</a></li>
     <li>
-      <a href="#">
+      <a href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
-        <span class="sr-only">Next</span>
       </a>
     </li>
   </ul>
@@ -57,20 +53,20 @@
   <div class="bs-example" data-example-id="disabled-active-pagination">
     <nav>
       <ul class="pagination">
-        <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
         <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+        <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
      </ul>
    </nav>
   </div>
 {% highlight html %}
 <nav>
   <ul class="pagination">
-    <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
     ...
   </ul>
@@ -83,7 +79,6 @@
     <li class="disabled">
       <span>
         <span aria-hidden="true">&laquo;</span>
-        <span class="sr-only">Previous</span>
       </span>
     </li>
     <li class="active">
@@ -100,35 +95,35 @@
   <div class="bs-example" data-example-id="pagination-sizing">
     <nav>
       <ul class="pagination pagination-lg">
-        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+        <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+        <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
       </ul>
     </nav>
     <nav>
       <ul class="pagination">
-        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+        <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+        <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
       </ul>
     </nav>
     <nav>
       <ul class="pagination pagination-sm">
-        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
+        <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
-        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
+        <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
       </ul>
     </nav>
   </div>

docs/_includes/css/forms.html

@@ -378,7 +378,6 @@
 {% endhighlight %}
 
   <h3>Selects</h3>
-  <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
   <div class="bs-example" data-example-ids="select-form-control">
     <form>
       <select class="form-control">
@@ -388,14 +387,6 @@
         <option>4</option>
         <option>5</option>
       </select>
-      <br>
-      <select multiple class="form-control">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
-      </select>
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
@@ -406,7 +397,23 @@
   <option>4</option>
   <option>5</option>
 </select>
+{% endhighlight %}
 
+  <p>For <code>&lt;select&gt;</code> controls with the <code>multiple</code> attribute, multiple options are shown by default.</p>
+
+  <div class="bs-example" data-example-ids="select-multiple-form-control">
+    <form>
+      <select multiple class="form-control">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </form>
+  </div><!-- /.bs-example -->
+
+{% highlight html %}
 <select multiple class="form-control">
   <option>1</option>
   <option>2</option>
@@ -764,7 +771,7 @@
 {% endhighlight %}
 
   <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
-  <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
+  <p>If you use the <code>.sr-only</code> class to hide a form control's <code>&lt;label&gt;</code> (rather than using other labelling options, such as the <code>aria-label</code> attribute), Bootstrap will automatically adjust the position of the icon once it's been added.</p>
   <div class="bs-example" data-example-id="form-validation-state-with-icon-without-label">
     <div class="form-group has-success has-feedback">
       <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>