Use nav for proper HTML5 ARIA role mapping

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

http://dev.w3.org/html5/spec/sections.html#the-nav-element

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

diff --git a/_includes/nav-main.html b/_includes/nav-main.html
index 6b5742cd1f31ec7724d4a83bf68d8f3e8ea178e6..7a2ded3be40d3e91ccb98fff6dd8129825c4269c 100644 (file)
--- a/_includes/nav-main.html
+++ b/_includes/nav-main.html
@@ -1,4 +1,4 @@
-<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation">
+<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
   <div class="container">
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
@@ -7,7 +7,7 @@
       <span class="icon-bar"></span>
     </button>
     <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
-    <div class="nav-collapse collapse bs-navbar-collapse">
+    <nav class="nav-collapse collapse bs-navbar-collapse" role="navigation">
       <ul class="nav navbar-nav">
         <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
           <a href="{{ page.base_url }}getting-started">Getting started</a>
@@ -25,6 +25,6 @@
           <a href="{{ page.base_url }}customize">Customize</a>
         </li>
       </ul>
-    </div>
+    </nav>
   </div>
 </div>

diff --git a/components.html b/components.html
index 250fd47a4b85744897de05fc475f7d465b1579b5..b61d1997ec2a8c7c7e2c68459b6f01d623c24ed6 100644 (file)
--- a/components.html
+++ b/components.html
@@ -940,22 +940,24 @@ base_url: "../"
 
     <h3>Tabs with dropdowns</h3>
     <div class="bs-example">
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-            Dropdown <span class="caret"></span>
-          </a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
+      <nav class="navbar" role="navigation">
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Help</a></li>
+          <li class="dropdown">
+            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+              Dropdown <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Action</a></li>
+              <li><a href="#">Another action</a></li>
+              <li><a href="#">Something else here</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Separated link</a></li>
+            </ul>
         </li>
       </ul>
+      </nav>
     </div>
 {% highlight html %}
 <ul class="nav nav-tabs">
@@ -1020,24 +1022,24 @@ base_url: "../"
     <h2 id="navbar-basic">Basic navbar</h2>
     <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <a class="navbar-brand" href="#">Title</a>
         <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
         </ul>
-      </div>
+      </nav>
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar" role="navigation">
+<nav class="navbar" role="navigation">
   <a class="navbar-brand" href="#">Title</a>
   <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
   </ul>
-</div>
+</nav>
 {% endhighlight %}
 <div class="bs-callout bs-callout-warning">
   <h4>Make navbars accessible</h4>
@@ -1049,9 +1051,9 @@ base_url: "../"
     <h3 id="navbar-brand">Brand</h3>
     <p>A simple link to show your brand or project name only requires an anchor tag.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <a class="navbar-brand" href="#">Title</a>
-      </div>
+      </nav>
     </div><!-- /example -->
 {% highlight html %}
 <a class="navbar-brand" href="#">Title</a>
@@ -1060,13 +1062,13 @@ base_url: "../"
     <h3 id="navbar-nav">Nav links</h3>
     <p>Nav items are simple to add via unordered lists.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
           <li class="disabled"><a href="#">Disabled</a></li>
         </ul>
-      </div>
+      </nav>
     </div><!-- /example -->
 {% highlight html %}
 <ul class="nav navbar-nav">
@@ -1080,14 +1082,14 @@ base_url: "../"
     <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
     <div class="bs-example">
 
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <form class="navbar-form pull-left">
           <input type="text" class="form-control" style="width: 200px;">
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
-      </div>
+      </nav>
 
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <form class="navbar-form pull-left">
           <select name="" id="" class="form-control" style="width: 200px;">
             <option value="1">1</option>
@@ -1097,17 +1099,17 @@ base_url: "../"
           </select>
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
-      </div>
+      </nav>
 
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <form class="navbar-form pull-left">
           <input type="text" class="form-control" style="width: 200px;">
           <input type="checkbox">
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
-      </div>
+      </nav>
 
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <form class="navbar-form pull-left">
           <input type="text" class="form-control" style="width: 200px;">
           <label class="checkbox-inline">
@@ -1115,7 +1117,7 @@ base_url: "../"
           </label>
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
-      </div>
+      </nav>
 
     </div><!-- /example -->
 {% highlight html %}
@@ -1128,10 +1130,10 @@ base_url: "../"
     <h3 id="navbar-buttons">Buttons</h3>
     <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <a href="#" class="navbar-brand">Brand</a>
         <button type="button" class="btn btn-default navbar-btn">Sign in</button>
-      </div>
+      </nav>
     </div>
 {% highlight html %}
 <button type="button" class="btn btn-default navbar-btn">Sign in</button>
@@ -1140,31 +1142,31 @@ base_url: "../"
     <h3 id="navbar-text">Text</h3>
     <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <a href="#" class="navbar-brand">Brand</a>
         <p class="navbar-text">Signed in as Mark Otto</p>
-      </div>
+      </nav>
     </div>
 {% highlight html %}
-<div class="navbar" role="navigation">
+<nav class="navbar" role="navigation">
   <a href="#" class="navbar-brand">Brand</a>
   <p class="navbar-text">Signed in as Mark Otto</p>
-</div>
+</nav>
 {% endhighlight %}
 
     <h3 id="navbar-links">Links</h3>
     <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <a href="#" class="navbar-brand">Brand</a>
         <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
-      </div>
+      </nav>
     </div>
 {% highlight html %}
-<div class="navbar" role="navigation">
+<nav class="navbar" role="navigation">
   <a href="#" class="navbar-brand">Brand</a>
   <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
-</div>
+</nav>
 {% endhighlight %}
 
     <h3 id="navbar-component-alignment">Component alignment</h3>
@@ -1189,9 +1191,9 @@ base_url: "../"
       </div>
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-fixed-top" role="navigation">
   ...
-</div>
+</nav>
 {% endhighlight %}
 
     <div class="bs-callout bs-callout-danger">
@@ -1206,7 +1208,7 @@ body { padding-top: 70px; }
     <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
     <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
     <div class="bs-example bs-navbar-bottom-example">
-      <div class="navbar navbar-fixed-bottom" role="navigation">
+      <nav class="navbar navbar-fixed-bottom" role="navigation">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
           <ul class="nav navbar-nav">
@@ -1215,12 +1217,12 @@ body { padding-top: 70px; }
             <li><a href="#">Link</a></li>
           </ul>
         </div>
-      </div>
+      </nav>
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar navbar-fixed-bottom" role="navigation">
+<nav class="navbar navbar-fixed-bottom" role="navigation">
   ...
-</div>
+</nav>
 {% endhighlight %}
 
     <div class="bs-callout bs-callout-danger">
@@ -1235,7 +1237,7 @@ body { padding-bottom: 70px; }
     <h3 id="navbar-static-top">Static top navbar</h3>
     <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
     <div class="bs-example bs-navbar-top-example">
-      <div class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;">
+      <nav class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
           <ul class="nav navbar-nav">
@@ -1244,19 +1246,19 @@ body { padding-bottom: 70px; }
             <li><a href="#">Link</a></li>
           </ul>
         </div>
-      </div>
+      </nav>
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar navbar-static-top" role="navigation">
+<nav class="navbar navbar-static-top" role="navigation">
   ...
-</div>
+</nav>
 {% endhighlight %}
 
 
     <h2 id="navbar-responsive">Responsive navbar</h2>
     <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
     <div class="bs-example">
-      <div class="navbar" role="navigation">
+      <nav class="navbar" role="navigation">
         <div class="container">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
             <span class="sr-only">Toggle navigation</span>
@@ -1304,7 +1306,7 @@ body { padding-bottom: 70px; }
       </div><!-- /.navbar -->
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar" role="navigation">
+<nav class="navbar" role="navigation">
   <div class="container">
 
     <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
@@ -1323,7 +1325,7 @@ body { padding-bottom: 70px; }
       ...
     </div><!-- /.nav-collapse -->
   </div><!-- /.container -->
-</div><!-- /.navbar -->
+</nav><!-- /.navbar -->
 {% endhighlight %}
 
     <div class="bs-callout bs-callout-danger">
@@ -1377,7 +1379,7 @@ body { padding-bottom: 70px; }
     <h2 id="navbar-inverted">Inverted variation</h2>
     <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
     <div class="bs-example">
-      <div class="navbar navbar-inverse" role="navigation">
+      <nav class="navbar navbar-inverse" role="navigation">
         <div class="container">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
             <span class="icon-bar"></span>
@@ -1421,12 +1423,12 @@ body { padding-bottom: 70px; }
             </ul>
           </div><!-- /.nav-collapse -->
         </div><!-- /.container -->
-      </div><!-- /.navbar -->
+      </nav><!-- /.navbar -->
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar navbar-inverse" role="navigation">
+<nav class="navbar navbar-inverse" role="navigation">
   ...
-</div>
+</nav>
 {% endhighlight %}
 
   </div>

diff --git a/javascript.html b/javascript.html
index 2d48e26e05936a78a73aa5011965381d503ae07f..8c1bd27af3efc8792f52e359621403dd7bf8ed76 100644 (file)
--- a/javascript.html
+++ b/javascript.html
@@ -355,7 +355,7 @@ $('#myModal').on('hidden.bs.modal', function () {
 
     <h3>Within a navbar</h3>
     <div class="bs-example">
-      <div id="navbar-example" class="navbar navbar-static" role="navigation">
+      <nav id="navbar-example" class="navbar navbar-static" role="navigation">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Project Name</a>
           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
@@ -365,7 +365,7 @@ $('#myModal').on('hidden.bs.modal', function () {
             <span class="icon-bar"></span>
           </button>
           <div class="nav-collapse collapse bs-js-navbar-collapse">
-            <ul class="nav navbar-nav" role="navigation">
+            <ul class="nav navbar-nav">
               <li class="dropdown">
                 <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                 <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
@@ -493,7 +493,7 @@ $('.dropdown-toggle').dropdown()
     <h2 id="scrollspy-examples">Example in navbar</h2>
     <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
     <div class="bs-example">
-      <div id="navbar-example2" class="navbar navbar-static" role="navigation">
+      <nav id="navbar-example2" class="navbar navbar-static" role="navigation">
         <div class="navbar-inner">
           <div class="container" style="width: auto;">
             <a class="navbar-brand" href="#">Project Name</a>
@@ -511,7 +511,7 @@ $('.dropdown-toggle').dropdown()
               </li>
             </ul>
           </div>
-        </div>
+        </nav>
       </div>
       <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
         <h4 id="fat">@fat</h4>