Give forms and search fields proper ARIA roles

http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/#tablex

http://www.w3.org/TR/wai-aria/roles#form

http://www.w3.org/TR/wai-aria/roles#search

diff --git a/components.html b/components.html
index 8a10b21f845371a013a2d188be35f0bba0b154cb..ea75fe32d452443f68fecb84797e444970c63bdc 100644 (file)
--- a/components.html
+++ b/components.html
@@ -532,7 +532,7 @@ base_url: "../"
     </div>
 
     <h2 id="input-groups-basic">Basic input group</h2>
-    <form class="bs-example bs-example-form">
+    <form class="bs-example bs-example-form" role="form">
       <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" placeholder="Username">
@@ -569,7 +569,7 @@ base_url: "../"
 
     <h2 id="input-groups-sizes">Optional sizes</h2>
     <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
-    <form class="bs-example bs-example-form">
+    <form class="bs-example bs-example-form" role="form">
       <div class="input-group">
         <span class="input-group-addon input-lg">@</span>
         <input type="text" class="form-control input-lg" placeholder="Username">
@@ -692,7 +692,7 @@ base_url: "../"
 
     <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
     <p></p>
-    <form class="bs-example bs-example-form">
+    <form class="bs-example bs-example-form" role="form">
       <div class="row">
         <div class="col-lg-6">
           <div class="input-group">
@@ -762,7 +762,7 @@ base_url: "../"
 {% endhighlight %}
 
     <h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
-    <form class="bs-example bs-example-form">
+    <form class="bs-example bs-example-form" role="form">
       <div class="row">
         <div class="col-lg-6">
           <div class="input-group">
@@ -1083,14 +1083,14 @@ base_url: "../"
     <div class="bs-example">
 
       <nav class="navbar" role="navigation">
-        <form class="navbar-form pull-left">
+        <form class="navbar-form pull-left" role="form">
           <input type="text" class="form-control" style="width: 200px;">
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
       </nav>
 
       <nav class="navbar" role="navigation">
-        <form class="navbar-form pull-left">
+        <form class="navbar-form pull-left" role="form">
           <select name="" id="" class="form-control" style="width: 200px;">
             <option value="1">1</option>
             <option value="2">2</option>
@@ -1102,7 +1102,7 @@ base_url: "../"
       </nav>
 
       <nav class="navbar" role="navigation">
-        <form class="navbar-form pull-left">
+        <form class="navbar-form pull-left" role="form">
           <input type="text" class="form-control" style="width: 200px;">
           <input type="checkbox">
           <button type="submit" class="btn btn-default">Submit</button>
@@ -1110,7 +1110,7 @@ base_url: "../"
       </nav>
 
       <nav class="navbar" role="navigation">
-        <form class="navbar-form pull-left">
+        <form class="navbar-form pull-left" role="form">
           <input type="text" class="form-control" style="width: 200px;">
           <label class="checkbox-inline">
             <input type="checkbox"> Remember me
@@ -1121,7 +1121,7 @@ base_url: "../"
 
     </div><!-- /example -->
 {% highlight html %}
-<form class="navbar-form pull-left">
+<form class="navbar-form pull-left" role="form">
   <input type="text" class="form-control" style="width: 200px;">
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
@@ -1285,8 +1285,8 @@ body { padding-bottom: 70px; }
                 </ul>
               </li>
             </ul>
-            <form class="navbar-form pull-left" action="">
-              <input type="text" class="form-control col-lg-8" placeholder="Search">
+            <form class="navbar-form pull-left" action="" role="form">
+              <input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -1355,8 +1355,8 @@ body { padding-bottom: 70px; }
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
             </ul>
-            <form class="navbar-form pull-left" action="">
-              <input type="text" class="form-control col-lg-8" placeholder="Search">
+            <form class="navbar-form pull-left" action="" role="form">
+              <input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
             </form>
           </div><!-- /.nav-collapse -->
         </div><!-- /.container -->
@@ -1405,8 +1405,8 @@ body { padding-bottom: 70px; }
                 </ul>
               </li>
             </ul>
-            <form class="navbar-form pull-left" action="">
-              <input type="text" class="form-control col-lg-8" placeholder="Search">
+            <form class="navbar-form pull-left" action="" role="form">
+              <input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>

diff --git a/css.html b/css.html
index 665d8cfbfe18b9a840ef57a8502dfd0d7319b049..eb2c8c64c69a77da0b720fda207ac0153e7a7575 100644 (file)
--- a/css.html
+++ b/css.html
@@ -1242,7 +1242,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-example">Basic example</h2>
     <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
-    <form class="bs-example">
+    <form class="bs-example" role="form">
       <fieldset>
         <legend>Legend</legend>
         <div class="form-group">
@@ -1267,7 +1267,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </fieldset>
     </form><!-- /example -->
 {% highlight html %}
-<form>
+<form role="form">
   <fieldset>
     <legend>Legend</legend>
     <div class="form-group">
@@ -1304,7 +1304,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <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 forms, you can hide the labels using the <code>.sr-only</code> class.</p>
     </div>
-    <form class="bs-example form-inline">
+    <form class="bs-example form-inline" role="form">
       <label class="sr-only" for="exampleInputEmail">Email address</label>
       <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
       <label class="sr-only" for="exampleInputPassword">Password</label>
@@ -1317,7 +1317,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <button type="submit" class="btn btn-default">Sign in</button>
     </form><!-- /example -->
 {% highlight html %}
-<form class="form-inline">
+<form class="form-inline" role="form">
   <label class="sr-only" for="exampleInputEmail">Email address</label>
   <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
   <label class="sr-only" for="exampleInputPassword">Password</label>
@@ -1362,7 +1362,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html %}
-<form class="form-horizontal">
+<form class="form-horizontal" role="form">
   <div class="form-group">
     <label for="inputEmail" class="col-lg-2 control-label">Email</label>
     <div class="col-lg-10">
@@ -1544,7 +1544,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html %}
-<form class="form-horizontal">
+<form class="form-horizontal" role="form">
   <div class="form-group">
     <label for="inputEmail2" class="col-lg-2 control-label">Email</label>
     <div class="col-lg-10">
@@ -1616,7 +1616,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </fieldset>
     </form>
 {% highlight html %}
-<form class="form-inline">
+<form class="form-inline" role="form">
   <fieldset disabled>
     <div class="form-group">
       <label for="disabledInput">Disabled input</label>

diff --git a/customize.html b/customize.html
index 8c407beef5a084fa14b12675f424385c62d3873d..ab62f5c3a2e29580b406ce48f7ba5aae3a2312ed 100644 (file)
--- a/customize.html
+++ b/customize.html
@@ -8,7 +8,7 @@ base_url: "../"
 
 <!-- Customize
 ================================================== -->
-<form class="bs-customizer">
+<form class="bs-customizer" role="form">
   <div class="bs-docs-section" id="less-section">
     <div class="page-header">
       <button class="btn btn-default toggle" type="button">Toggle all</button>