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

More docs accessibility tweaks

1 files changed, 17 insertions, 10 deletions

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 3ab202f7c..031dcd879 100644
--- a/docs/_includes/css/forms.html
+++ b/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>