diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html
index 0b9b423277baf0a6197beb3e71289b9f34a18b04..db157de7c8d40ab26b8b0059eecefa3125c4bf12 100644
--- a/docs/_includes/components/navbar.html
+++ b/docs/_includes/components/navbar.html
@@ -25,11 +25,11 @@
</div>
<div class="bs-callout bs-callout-warning" id="callout-navbar-role">
<h4>Make navbars accessible</h4>
- <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
+ <p>Be sure to use a <code><nav></code> element or, if using a more generic element such as a <code><div></code>, add a <code>role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</p>
</div>
<div class="bs-example">
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
@@ -84,7 +84,7 @@
</nav>
</div>
{% highlight html %}
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
@@ -143,7 +143,7 @@
<h2 id="navbar-brand-image">Brand image</h2>
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<div class="bs-example">
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
@@ -154,7 +154,7 @@
</nav>
</div>
{% highlight html %}
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
@@ -170,7 +170,7 @@
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<div class="bs-example">
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
@@ -215,7 +215,7 @@
<h2 id="navbar-buttons">Buttons</h2>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<div class="bs-example">
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
@@ -244,7 +244,7 @@
<h2 id="navbar-text">Text</h2>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
<div class="bs-example">
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
@@ -269,7 +269,7 @@
<h2 id="navbar-links">Non-nav links</h2>
<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">
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
@@ -304,7 +304,7 @@
<h2 id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<div class="bs-example bs-navbar-top-example">
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
@@ -328,7 +328,7 @@
</nav>
</div><!-- /example -->
{% highlight html %}
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
@@ -348,7 +348,7 @@ body { padding-top: 70px; }
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<div class="bs-example bs-navbar-bottom-example">
- <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-bottom">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
@@ -372,7 +372,7 @@ body { padding-top: 70px; }
</nav>
</div><!-- /example -->
{% highlight html %}
-<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
@@ -393,7 +393,7 @@ body { padding-bottom: 70px; }
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>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">
- <nav class="navbar navbar-default navbar-static-top" role="navigation">
+ <nav class="navbar navbar-default navbar-static-top">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
@@ -418,7 +418,7 @@ body { padding-bottom: 70px; }
</nav>
</div><!-- /example -->
{% highlight html %}
-<nav class="navbar navbar-default navbar-static-top" role="navigation">
+<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
@@ -429,7 +429,7 @@ body { padding-bottom: 70px; }
<h2 id="navbar-inverted">Inverted navbar</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example">
- <nav class="navbar navbar-inverse" role="navigation">
+ <nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
@@ -454,7 +454,7 @@ body { padding-bottom: 70px; }
</nav>
</div><!-- /example -->
{% highlight html %}
-<nav class="navbar navbar-inverse" role="navigation">
+<nav class="navbar navbar-inverse">
...
</nav>
{% endhighlight %}
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html
index 2268b578002ee15812a076b5abf14fcbc9cc87eb..19e0245b2ca6c9ccc3a85afe443f3614f88757db 100644
--- a/docs/_includes/js/dropdowns.html
+++ b/docs/_includes/js/dropdowns.html
@@ -6,7 +6,7 @@
<h3>Within a navbar</h3>
<div class="bs-example">
- <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+ <nav id="navbar-example" class="navbar navbar-default navbar-static">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html
index 4f660b40e6ba2f09ae89f01243fd80becde199a1..b2dd07ae98774f98023987511f8766ab6640deba 100644
--- a/docs/_includes/js/scrollspy.html
+++ b/docs/_includes/js/scrollspy.html
@@ -4,7 +4,7 @@
<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">
- <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
+ <nav id="navbar-example2" class="navbar navbar-default navbar-static">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
diff --git a/docs/_includes/nav/main.html b/docs/_includes/nav/main.html
index a9e09a081d5ceebd52f1ecf562f2e38fc123c27d..530430615001b670ec3dc6171e1fcf7a3b14b440 100644
--- a/docs/_includes/nav/main.html
+++ b/docs/_includes/nav/main.html
@@ -9,7 +9,7 @@
</button>
<a href="../" class="navbar-brand">Bootstrap</a>
</div>
- <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+ <nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="../getting-started/">Getting started</a>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index 0bc56ad8f2f203a88a29417a2ed593c93924e0e5..2c8d1178494e6a218af8d046746b0d9140dbe0be 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -32,7 +32,7 @@
<div class="navbar-wrapper">
<div class="container">
- <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 96dde75198ee169fe421cba84ddc9971c00952f6..e98ccbb179de536fed0c4703bfe9118f5ee7b68f 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -29,7 +29,7 @@
<body>
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html
index 8480d1dbeda7f2074df5c8fdb16570862a369f9b..570907b972f8cbf19d8d1dca5b443741036ce2c6 100644
--- a/docs/examples/jumbotron/index.html
+++ b/docs/examples/jumbotron/index.html
@@ -29,7 +29,7 @@
<body>
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index 141798b7bac1603109ec2131f279b60c57922c71..fc51f3db94950a8cedf296fdb6583f13b5076c9a 100644
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -33,7 +33,7 @@
<div class="masthead">
<h3 class="text-muted">Project name</h3>
- <div role="navigation">
+ <nav>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
@@ -42,7 +42,7 @@
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
- </div>
+ </nav>
</div>
<!-- Jumbotron -->
diff --git a/docs/examples/navbar-fixed-top/index.html b/docs/examples/navbar-fixed-top/index.html
index 4cd4a0b8be6c160efb115215ce4dc29021f07dc9..a32e52bc80425011865a0c9cc29fc828e444645f 100644
--- a/docs/examples/navbar-fixed-top/index.html
+++ b/docs/examples/navbar-fixed-top/index.html
@@ -30,7 +30,7 @@
<body>
<!-- Fixed navbar -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/navbar-static-top/index.html b/docs/examples/navbar-static-top/index.html
index 05c9e25d5e3976d639a83d5cb1255b98cdd574fb..06c213a113d67d746688ee41c6f2e2e4f2e6e541 100644
--- a/docs/examples/navbar-static-top/index.html
+++ b/docs/examples/navbar-static-top/index.html
@@ -30,7 +30,7 @@
<body>
<!-- Static navbar -->
- <nav class="navbar navbar-default navbar-static-top" role="navigation">
+ <nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html
index 07fc651f3d0e7af93de15dfe5db7194431224bea..5d285c26e614e089461726697be9289f2c30263d 100644
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -32,7 +32,7 @@
<div class="container">
<!-- Static navbar -->
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/non-responsive/index.html b/docs/examples/non-responsive/index.html
index 4f0b050f9b7346481fc12ba496fc2463a25cb6ef..d30d3c3c26b53de92e3c426d99dfb8f00865b4c8 100644
--- a/docs/examples/non-responsive/index.html
+++ b/docs/examples/non-responsive/index.html
@@ -32,7 +32,7 @@
<body>
<!-- Fixed navbar -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index eee2918c436fb7941cff5cec822ed20538cad3e0..5db233d7416c54ead0109253ff55c6ecfc43724e 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -28,7 +28,7 @@
</head>
<body>
- <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+ <nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -95,7 +95,7 @@
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
- <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
+ <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html
index 7c0f62c59260eddc298c5c80934c91a86565c3c8..cea798f701441172020637174d542355f3d0a780 100644
--- a/docs/examples/starter-template/index.html
+++ b/docs/examples/starter-template/index.html
@@ -29,7 +29,7 @@
<body>
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html
index 526b351359ad59fe1dbbb77ceaf72021b9813249..a6a728b8f21c853941503a8af8f05e4c27912c6e 100644
--- a/docs/examples/sticky-footer-navbar/index.html
+++ b/docs/examples/sticky-footer-navbar/index.html
@@ -30,7 +30,7 @@
<body>
<!-- Fixed navbar -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index 9407a0880d774985aac5e78f12ac7fb6285d97be..a687732aa6611661f830c8320c43ffa506dc7306 100644
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -32,7 +32,7 @@
<body role="document">
<!-- Fixed navbar -->
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">