diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html
index 165e0777e6cffd040b7af0593edb0305038baaca..871370d4311daf45663b970a99a966e29d7b0f66 100644
--- a/docs/_includes/components/button-dropdowns.html
+++ b/docs/_includes/components/button-dropdowns.html
@@ -12,7 +12,7 @@
<p>Turn a button into a dropdown toggle with some basic markup changes.</p>
<div class="bs-example">
<div class="btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -22,7 +22,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -32,7 +32,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -42,7 +42,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -52,7 +52,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -62,7 +62,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -75,7 +75,7 @@
{% highlight html %}
<!-- Single button -->
<div class="btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <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" role="menu">
@@ -93,7 +93,7 @@
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default">Default</button>
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <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>
</button>
@@ -107,7 +107,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -121,7 +121,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -135,7 +135,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -149,7 +149,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -163,7 +163,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -180,7 +180,7 @@
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -199,7 +199,7 @@
<div class="bs-example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
- <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -213,7 +213,7 @@
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
- <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -227,7 +227,7 @@
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
- <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -243,7 +243,7 @@
{% highlight html %}
<!-- Large button group -->
<div class="btn-group">
- <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -253,7 +253,7 @@
<!-- Small button group -->
<div class="btn-group">
- <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -263,7 +263,7 @@
<!-- Extra small button group -->
<div class="btn-group">
- <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -278,7 +278,7 @@
<div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <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>
</button>
@@ -292,7 +292,7 @@
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -309,7 +309,7 @@
{% highlight html %}
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <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>
</button>
diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html
index 216e4426b4a780fe2257c5b6f63c5e67d721f08d..4a1fc86f825cf6dbd203585e14a4bc61913d1bb2 100644
--- a/docs/_includes/components/button-groups.html
+++ b/docs/_includes/components/button-groups.html
@@ -8,17 +8,24 @@
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Ensure correct <code>role</code> and provide a label</h4>
+ <p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
+ <p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
+ <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
+ </div>
+
<h3 id="btn-groups-single">Basic example</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-example">
- <div class="btn-group" style="margin: 9px 0 5px;">
+ <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
@@ -28,79 +35,74 @@
<h3 id="btn-groups-toolbar">Button toolbar</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<div class="bs-example">
- <div class="btn-toolbar" role="toolbar" style="margin: 0;">
- <div class="btn-group">
+ <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+ <div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
- <div class="btn-group">
+ <div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
- <div class="btn-group">
+ <div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
</div>
{% highlight html %}
-<div class="btn-toolbar" role="toolbar">
- <div class="btn-group">...</div>
- <div class="btn-group">...</div>
- <div class="btn-group">...</div>
+<div class="btn-toolbar" role="toolbar" aria-label="...">
+ <div class="btn-group" role="group" aria-label="...">...</div>
+ <div class="btn-group" role="group" aria-label="...">...</div>
+ <div class="btn-group" role="group" aria-label="...">...</div>
</div>
{% endhighlight %}
<h3 id="btn-groups-sizing">Sizing</h3>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
<div class="bs-example">
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group btn-group-lg">
- <button type="button" class="btn btn-default">Left</button>
- <button type="button" class="btn btn-default">Middle</button>
- <button type="button" class="btn btn-default">Right</button>
- </div>
+ <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group">
- <button type="button" class="btn btn-default">Left</button>
- <button type="button" class="btn btn-default">Middle</button>
- <button type="button" class="btn btn-default">Right</button>
- </div>
+ <br>
+ <div class="btn-group" role="group" aria-label="Default button group">
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group btn-group-sm">
- <button type="button" class="btn btn-default">Left</button>
- <button type="button" class="btn btn-default">Middle</button>
- <button type="button" class="btn btn-default">Right</button>
- </div>
+ <br>
+ <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group btn-group-xs">
- <button type="button" class="btn btn-default">Left</button>
- <button type="button" class="btn btn-default">Middle</button>
- <button type="button" class="btn btn-default">Right</button>
- </div>
+ <br>
+ <div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
-<div class="btn-group btn-group-lg">...</div>
-<div class="btn-group">...</div>
-<div class="btn-group btn-group-sm">...</div>
-<div class="btn-group btn-group-xs">...</div>
+<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
+<div class="btn-group" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
{% endhighlight %}
<h3 id="btn-groups-nested">Nesting</h3>
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-example">
- <div class="btn-group">
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
- <div class="btn-group">
- <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -112,12 +114,12 @@
</div>
</div>
{% highlight html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
- <div class="btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -132,11 +134,11 @@
<h3 id="btn-groups-vertical">Vertical variation</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
<div class="bs-example">
- <div class="btn-group-vertical">
+ <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
- <div class="btn-group">
- <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -147,8 +149,8 @@
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
- <div class="btn-group">
- <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -157,8 +159,8 @@
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
- <div class="btn-group">
- <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -167,8 +169,8 @@
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
- <div class="btn-group">
- <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -180,7 +182,7 @@
</div>
</div>
{% highlight html %}
-<div class="btn-group-vertical">
+<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
{% endhighlight %}
@@ -201,17 +203,17 @@
<h4>With <code><a></code> elements</h4>
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<div class="bs-example">
- <div class="btn-group btn-group-justified">
+ <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a>
</div>
<br>
- <div class="btn-group btn-group-justified">
+ <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
- <div class="btn-group">
- <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <div class="btn-group" role="group">
+ <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -225,35 +227,40 @@
</div>
</div>
{% highlight html %}
-<div class="btn-group btn-group-justified">
+<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
{% endhighlight %}
+ <div class="bs-callout bs-callout-warning">
+ <h4>Links acting as buttons</h4>
+ <p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
+ </div>
+
<h4>With <code><button></code> elements</h4>
- <p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p>
+ <p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can work around that.</p>
<div class="bs-example">
- <div class="btn-group btn-group-justified">
- <div class="btn-group">
+ <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
+ <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
- <div class="btn-group">
+ <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
- <div class="btn-group">
+ <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
{% highlight html %}
-<div class="btn-group btn-group-justified">
- <div class="btn-group">
+<div class="btn-group btn-group-justified" role="group" aria-label="...">
+ <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
- <div class="btn-group">
+ <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
- <div class="btn-group">
+ <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html
index 8f0b0c94276e49a0040d463e291a72231162e3d8..6bedbc81b566e581b766766d5d165465b1396bdd 100644
--- a/docs/_includes/components/dropdowns.html
+++ b/docs/_includes/components/dropdowns.html
@@ -7,7 +7,7 @@
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -21,7 +21,7 @@
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -54,7 +54,7 @@
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -80,7 +80,7 @@
<p>Add a divider to separate series of links in a dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -105,7 +105,7 @@
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
<div class="bs-example">
<div class="dropdown clearfix">
- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html
index bd29dbe4974c2fd34d666235a4b73c32baa83e46..31ddfd0c4c1142f03dda0f626e2f459e1cf58b82 100644
--- a/docs/_includes/components/input-groups.html
+++ b/docs/_includes/components/input-groups.html
@@ -187,7 +187,7 @@
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <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" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -203,7 +203,7 @@
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <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">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -221,7 +221,7 @@
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <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" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -237,7 +237,7 @@
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <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">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -258,7 +258,7 @@
<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 dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <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>
</button>
@@ -278,7 +278,7 @@
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <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>
</button>
diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html
index 5db4d52cf971846fe50b3c8e8242ea80af7315eb..d0f8a67d68bbcc9607b8567a7e672b7f678f2ee2 100644
--- a/docs/_includes/components/navbar.html
+++ b/docs/_includes/components/navbar.html
@@ -40,7 +40,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
- <li class="active"><a href="#">Link</a></li>
+ <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
@@ -95,7 +95,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
- <li class="active"><a href="#">Link</a></li>
+ <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index c9fc189c53dda76fabcad1072b87ee6856789f5f..2ea20d0e82ac9f9bbd221f984c983d14f6bfd655 100644
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -3,38 +3,45 @@
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
+ <div class="bs-callout bs-callout-info">
+ <h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
+ <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
+ </div>
+
+ <div class="bs-callout bs-callout-warning">
+ <h4>Make navs used as navigation accessible</h4>
+ <p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
+ </div>
+
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example">
- <ul class="nav nav-tabs" role="tablist">
+ <ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
- <div class="bs-callout bs-callout-info">
- <h4>Requires JavaScript tabs plugin</h4>
- <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
- </div>
+
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example">
- <ul class="nav nav-pills" role="tablist">
+ <ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills" role="tablist">
+<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
@@ -42,14 +49,14 @@
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example">
- <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
+ <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills nav-stacked" role="tablist">
+<ul class="nav nav-pills nav-stacked">
...
</ul>
{% endhighlight %}
@@ -63,23 +70,23 @@
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example">
- <ul class="nav nav-tabs nav-justified" role="tablist">
+ <ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<br>
- <ul class="nav nav-pills nav-justified" role="tablist">
+ <ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-tabs nav-justified" role="tablist">
+<ul class="nav nav-tabs nav-justified">
...
</ul>
-<ul class="nav nav-pills nav-justified" role="tablist">
+<ul class="nav nav-pills nav-justified">
...
</ul>
{% endhighlight %}
@@ -94,14 +101,14 @@
</div>
<div class="bs-example">
- <ul class="nav nav-pills" role="tablist">
+ <ul class="nav nav-pills">
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills" role="tablist">
+<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
@@ -114,11 +121,11 @@
<h3>Tabs with dropdowns</h3>
<div class="bs-example">
- <ul class="nav nav-tabs" role="tablist">
+ <ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -132,10 +139,10 @@
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -148,11 +155,11 @@
<h3>Pills with dropdowns</h3>
<div class="bs-example">
- <ul class="nav nav-pills" role="tablist">
+ <ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -166,10 +173,10 @@
</ul>
</div><!-- /example -->
{% highlight html %}
-<ul class="nav nav-pills" role="tablist">
+<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
diff --git a/docs/_includes/components/pagination.html b/docs/_includes/components/pagination.html
index 27e5b6247cc271c1186bdf8cd60defaf16860332..f5e78977afe9de9bfebf57e839831ff7e0af87e7 100644
--- a/docs/_includes/components/pagination.html
+++ b/docs/_includes/components/pagination.html
@@ -8,26 +8,26 @@
<div class="bs-example">
<nav>
<ul class="pagination">
- <li><a href="#">«</a></li>
+ <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</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="#">»</a></li>
+ <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
- <li><a href="#">«</a></li>
+ <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</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="#">»</a></li>
+ <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
{% endhighlight %}
@@ -37,30 +37,30 @@
<div class="bs-example">
<nav>
<ul class="pagination">
- <li class="disabled"><a href="#">«</a></li>
+ <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</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="#">»</a></li>
+ <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
- <li class="disabled"><a href="#">«</a></li>
+ <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
{% endhighlight %}
- <p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>
+ <p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
{% highlight html %}
<nav>
<ul class="pagination">
- <li class="disabled"><span>«</span></li>
+ <li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
@@ -73,35 +73,35 @@
<div class="bs-example">
<nav>
<ul class="pagination pagination-lg">
- <li><a href="#">«</a></li>
+ <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</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="#">»</a></li>
+ <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
- <li><a href="#">«</a></li>
+ <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</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="#">»</a></li>
+ <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
- <li><a href="#">«</a></li>
+ <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</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="#">»</a></li>
+ <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
@@ -139,16 +139,16 @@
<div class="bs-example">
<nav>
<ul class="pager">
- <li class="previous"><a href="#">← Older</a></li>
- <li class="next"><a href="#">Newer →</a></li>
+ <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
+ <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pager">
- <li class="previous"><a href="#">← Older</a></li>
- <li class="next"><a href="#">Newer →</a></li>
+ <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
+ <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
{% endhighlight %}
@@ -159,16 +159,16 @@
<div class="bs-example">
<nav>
<ul class="pager">
- <li class="previous disabled"><a href="#">← Older</a></li>
- <li class="next"><a href="#">Newer →</a></li>
+ <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
+ <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pager">
- <li class="previous disabled"><a href="#">← Older</a></li>
- <li class="next"><a href="#">Newer →</a></li>
+ <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
+ <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
{% endhighlight %}
diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html
index ee03c1d6571d972a22582376acaae50dc85571fc..1b3f46416d3063b292893ada98a064353fff0626 100644
--- a/docs/_includes/css/buttons.html
+++ b/docs/_includes/css/buttons.html
@@ -35,6 +35,11 @@
<button type="button" class="btn btn-link">Link</button>
{% endhighlight %}
+ <div class="bs-callout bs-callout-warning">
+ <h4>Conveying meaning to assistive technologies</h4>
+ <p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>sr-only</code> class.</p>
+ </div>
+
<h2 id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example">
@@ -88,7 +93,7 @@
<h2 id="buttons-active">Active state</h2>
- <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s should you need to replicate the active state programmatically.</p>
+ <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
<h3>Button element</h3>
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
@@ -147,7 +152,7 @@
</p>
<div class="bs-callout bs-callout-warning">
<h4>Link functionality caveat</h4>
- <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
+ <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Context-specific usage</h4>
@@ -170,6 +175,11 @@
<input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %}
+ <div class="bs-callout bs-callout-warning">
+ <h4>Links acting as buttons</h4>
+ <p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
+ </div>
+
<div class="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 33e0befb1ccf89e991890494eb8902de9888efe1..6fabb4c78dd8478b1919e1bdf5f369761adf34fb 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -63,7 +63,7 @@
</div>
<div class="bs-callout bs-callout-warning">
<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>
+ <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. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
</div>
<div class="bs-example">
<form class="form-inline" role="form">
@@ -91,14 +91,11 @@
</div><!-- /example -->
{% highlight html %}
<form class="form-inline" role="form">
- <div class="form-group">
- <label class="sr-only" for="exampleInputEmail2">Email address</label>
- <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
- </div>
<div class="form-group">
<div class="input-group">
+ <label class="sr-only" for="exampleInputEmail2">Email address</label>
<div class="input-group-addon">@</div>
- <input class="form-control" type="email" placeholder="Enter email">
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
</div>
<div class="form-group">
@@ -205,7 +202,7 @@
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<div class="bs-example">
<form role="form">
- <textarea class="form-control" rows="3"></textarea>
+ <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
@@ -334,18 +331,18 @@
</label>
{% endhighlight %}
- <h4>Checkboxes and radios without labels</h4>
- <p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong></p>
+ <h4>Checkboxes and radios without label text</h4>
+ <p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
<div class="bs-example">
<form role="form">
<div class="checkbox">
<label>
- <input type="checkbox" id="blankCheckbox" value="option1">
+ <input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
</label>
</div>
<div class="radio">
<label>
- <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
+ <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="Radio button without label text">
</label>
</div>
</form>
@@ -353,12 +350,12 @@
{% highlight html %}
<div class="checkbox">
<label>
- <input type="checkbox" id="blankCheckbox" value="option1">
+ <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
- <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
+ <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
{% endhighlight %}
@@ -464,7 +461,7 @@
</form>
{% endhighlight %}
- <h2 id="forms-control-focus">Input focus</h2>
+ <h2 id="forms-control-focus">Focus state</h2>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<div class="bs-example">
<form role="form">
@@ -477,7 +474,7 @@
</div>
- <h2 id="forms-control-disabled">Disabled inputs</h2>
+ <h2 id="forms-control-disabled">Disabled state</h2>
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
<div class="bs-example">
<form role="form">
@@ -547,7 +544,7 @@
{% endhighlight %}
- <h2 id="forms-control-readonly">Readonly inputs</h2>
+ <h2 id="forms-control-readonly">Readonly state</h2>
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
<div class="bs-example">
<form role="form">
@@ -562,6 +559,12 @@
<h2 id="forms-control-validation">Validation states</h2>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Conveying validation state to assistive technologies</h4>
+ <p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p>
+ <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
+ </div>
+
<div class="bs-example">
<form role="form">
<div class="form-group has-success">
@@ -648,40 +651,45 @@
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Conveying the icon's meaning to assistive technologies</h4>
+ <p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>sr-only</code> class, and the icon itself explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code><label></code> associated with the form control.</p>
+ <p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
+ </div>
<div class="bs-example">
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
- <input type="text" class="form-control" id="inputSuccess2">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Icon">
+ <span id="inputSuccess2Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
- <input type="text" class="form-control" id="inputWarning2">
- <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Icon">
+ <span id="inputWarning2Icon" class="glyphicon glyphicon-warning-sign form-control-feedback"><span class="sr-only">(warning)</span></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
- <input type="text" class="form-control" id="inputError2">
- <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Icon">
+ <span id="inputError2Icon" class="glyphicon glyphicon-remove form-control-feedback"><span class="sr-only">(error)</span></span>
</div>
</form>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
- <input type="text" class="form-control" id="inputSuccess2">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Icon">
+ <span id="inputSuccess2Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
- <input type="text" class="form-control" id="inputWarning2">
- <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Icon">
+ <span id="inputWarning2Icon" class="glyphicon glyphicon-warning-sign form-control-feedback"><span class="sr-only">(warning)</span></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
- <input type="text" class="form-control" id="inputError2">
- <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Icon">
+ <span id="inputError2Icon" class="glyphicon glyphicon-remove form-control-feedback"><span class="sr-only">(error)</span></span>
</div>
{% endhighlight %}
@@ -691,8 +699,8 @@
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
- <input type="text" class="form-control" id="inputSuccess3">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Icon">
+ <span id="inputSuccess3Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
</div>
</form>
@@ -702,8 +710,8 @@
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
- <input type="text" class="form-control" id="inputSuccess3">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Icon">
+ <span id="inputSuccess3Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
</div>
</form>
@@ -713,8 +721,8 @@
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
- <input type="text" class="form-control" id="inputSuccess4">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Icon">
+ <span id="inputSuccess4Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
</form>
</div>
@@ -722,8 +730,8 @@
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
- <input type="text" class="form-control" id="inputSuccess4">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Icon">
+ <span id="inputSuccess4Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
</form>
{% endhighlight %}
@@ -733,15 +741,15 @@
<div class="bs-example">
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
- <input type="text" class="form-control" id="inputSuccess5">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Icon">
+ <span id="inputSuccess5Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
- <input type="text" class="form-control" id="inputSuccess5">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+ <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Icon">
+ <span id="inputSuccess5Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
</div>
{% endhighlight %}
@@ -849,13 +857,23 @@
<h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
+ <div class="bs-callout bs-callout-info">
+ <h4>Associating help text with form controls</h4>
+ <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
+ </div>
<div class="bs-example">
<form role="form">
- <input type="text" class="form-control">
- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+ <div class="form-group">
+ <label for="inputHelpBlock">Input with help text</label>
+ <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+ </div>
+ <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
-<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+<label class="sr-only" for="inputHelpBlock">Input with help text</label>
+<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+...
+<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
</div>
diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 429ef90f946e33332009e10113c5953975ed723b..cea5b17ee8051bf8cb7854dc1723c9c5547e4830 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -226,7 +226,7 @@
</div>
{% endhighlight %}
- <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
+ <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h3>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index 9b7223740674e3a18e38d9c56faef450fb2b26d1..a661ded2254776ddbb9e982631b9e6976094d998 100644
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -23,6 +23,10 @@
<h4>Dealing with specificity</h4>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
</div>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Conveying meaning to assistive technologies</h4>
+ <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
+ </div>
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
@@ -44,6 +48,10 @@
<h4>Dealing with specificity</h4>
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p>
</div>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Conveying meaning to assistive technologies</h4>
+ <p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
+ </div>
<h3 id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html
index 011a4dbbaed68d5ea3ca973c1d73cb103be45b1f..d09c34068054dbd52eac264080bd3af554cfad5d 100644
--- a/docs/_includes/css/tables.html
+++ b/docs/_includes/css/tables.html
@@ -346,7 +346,10 @@
<td class="info">...</td>
</tr>
{% endhighlight %}
-
+ <div class="bs-callout bs-callout-warning">
+ <h4>Conveying meaning to assistive technologies</h4>
+ <p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>sr-only</code> class.</p>
+ </div>
<h2 id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html
index cb9b3e11e1bd656f50fb34f648d070f000884686..5a60bc83b8d35204998c0945834403e7a8d4db4e 100644
--- a/docs/_includes/getting-started/accessibility.html
+++ b/docs/_includes/getting-started/accessibility.html
@@ -17,9 +17,14 @@
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p>
<p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
+ <h3>Color contrast</h3>
+ <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="..css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
+
<h3>Additional resources</h3>
<ul>
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
+ <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
+ <li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
</ul>
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index aec6485aa27d3d52c73fa99b1914a0da5631e360..69f0cc45f206abf271ffa03c47c2b84efc3c9da3 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -3,7 +3,7 @@
<h2 id="tabs-examples">Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
- <div class="bs-example bs-example-tabs">
+ <div class="bs-example bs-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
@@ -59,20 +59,24 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
{% highlight html %}
-<!-- Nav tabs -->
-<ul class="nav nav-tabs" role="tablist">
- <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
- <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
- <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
- <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
-</ul>
+<div role="tabpanel">
+
+ <!-- Nav tabs -->
+ <ul class="nav nav-tabs" role="tablist">
+ <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
+ <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
+ <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
+ <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
+ </ul>
+
+ <!-- Tab panes -->
+ <div class="tab-content">
+ <div role="tabpanel" class="tab-pane active" id="home">...</div>
+ <div role="tabpanel" class="tab-pane" id="profile">...</div>
+ <div role="tabpanel" class="tab-pane" id="messages">...</div>
+ <div role="tabpanel" class="tab-pane" id="settings">...</div>
+ </div>
-<!-- Tab panes -->
-<div class="tab-content">
- <div role="tabpanel" class="tab-pane active" id="home">...</div>
- <div role="tabpanel" class="tab-pane" id="profile">...</div>
- <div role="tabpanel" class="tab-pane" id="messages">...</div>
- <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
{% endhighlight %}
@@ -94,10 +98,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</p>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab">
- <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
- <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
- <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
- <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
+ <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
+ <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
+ <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
+ <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html
index bf52d0e590d7b367a33d8679ee1b2adc4b22246e..9c5f5126fc6df2862ec64363a47bfc882d94cf7a 100644
--- a/docs/_includes/nav/components.html
+++ b/docs/_includes/nav/components.html
@@ -10,7 +10,7 @@
<a href="#dropdowns">Dropdowns</a>
<ul class="nav">
<li><a href="#dropdowns-example">Example</a></li>
- <li><a href="#dropdowns-alignment">Alignment options</a></li>
+ <li><a href="#dropdowns-alignment">Alignment</a></li>
<li><a href="#dropdowns-headers">Headers</a></li>
<li><a href="#dropdowns-divider">Divider</a></li>
<li><a href="#dropdowns-disabled">Disabled menu items</a></li>
@@ -24,7 +24,7 @@
<li><a href="#btn-groups-sizing">Sizing</a></li>
<li><a href="#btn-groups-nested">Nesting</a></li>
<li><a href="#btn-groups-vertical">Vertical variation</a></li>
- <li><a href="#btn-groups-justified">Justified link variation</a></li>
+ <li><a href="#btn-groups-justified">Justified button groups</a></li>
</ul>
</li>
<li>
@@ -52,7 +52,7 @@
<ul class="nav">
<li><a href="#nav-tabs">Tabs</a></li>
<li><a href="#nav-pills">Pills</a></li>
- <li><a href="#nav-justified">Justified nav</a></li>
+ <li><a href="#nav-justified">Justified</a></li>
<li><a href="#nav-disabled-links">Disabled links</a></li>
<li><a href="#nav-dropdowns">Using dropdowns</a></li>
</ul>
diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html
index ac86dffceccba52e7aad8bc49202f21e240d543b..fad72a61546570235883b208c22cd43560a96aef 100644
--- a/docs/_includes/nav/css.html
+++ b/docs/_includes/nav/css.html
@@ -16,8 +16,8 @@
<li><a href="#grid-options">Grid options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li>
<li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
- <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
- <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
+ <li><a href="#grid-example-mixed">Ex: Mobile and desktop</a></li>
+ <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
<li><a href="#grid-offsetting">Offsetting columns</a></li>
@@ -43,9 +43,9 @@
<li>
<a href="#code">Code</a>
<ul class="nav">
- <li><a href="#code-inline">Inline code</a></li>
+ <li><a href="#code-inline">Inline</a></li>
<li><a href="#code-user-input">User input</a></li>
- <li><a href="#code-block">Blocks of code</a></li>
+ <li><a href="#code-block">Basic block</a></li>
<li><a href="#code-variables">Variables</a></li>
<li><a href="#code-sample-output">Sample output</a></li>
</ul>
@@ -106,7 +106,7 @@
<li><a href="#helper-classes-center">Center content blocks</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li>
<li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
- <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
+ <li><a href="#helper-classes-screen-readers">Screen reader and keyboard navigation content</a></li>
<li><a href="#helper-classes-image-replacement">Image replacement</a></li>
</ul>
</li>
@@ -131,6 +131,6 @@
<a href="#sass">Using Sass</a>
<ul class="nav">
<li><a href="#sass-contents">What's included</a></li>
- <li><a href="#sass-installation">Rails install</a></li>
+ <li><a href="#sass-installation">Installation</a></li>
</ul>
</li>
diff --git a/docs/examples/cover/index.html b/docs/examples/cover/index.html
index 9fcbf7029f1b07dc957e26ecf766ea1c9cee5fd8..90d973016fd2b895945884bbd5f168a36589c692 100644
--- a/docs/examples/cover/index.html
+++ b/docs/examples/cover/index.html
@@ -38,11 +38,13 @@
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
- <ul class="nav masthead-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Features</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
+ <nav>
+ <ul class="nav masthead-nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Features</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </nav>
</div>
</div>
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index a38497280c0a79bcc4d4a426f8233c71deb9e12e..96dde75198ee169fe421cba84ddc9971c00952f6 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -58,7 +58,7 @@
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
- <li class="active"><a href="#">Overview</a></li>
+ <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
diff --git a/docs/examples/jumbotron-narrow/index.html b/docs/examples/jumbotron-narrow/index.html
index de54ad9d8a59de794e99cd1776d2e74c12ac07e5..fb0b076d11dfb2a8f83344605be09b37c2bb1da2 100644
--- a/docs/examples/jumbotron-narrow/index.html
+++ b/docs/examples/jumbotron-narrow/index.html
@@ -31,11 +31,13 @@
<div class="container">
<div class="header">
- <ul class="nav nav-pills pull-right" role="tablist">
- <li role="presentation" class="active"><a href="#">Home</a></li>
- <li role="presentation"><a href="#">About</a></li>
- <li role="presentation"><a href="#">Contact</a></li>
- </ul>
+ <nav>
+ <ul class="nav nav-pills pull-right">
+ <li role="presentation" class="active"><a href="#">Home</a></li>
+ <li role="presentation"><a href="#">About</a></li>
+ <li role="presentation"><a href="#">Contact</a></li>
+ </ul>
+ </nav>
<h3 class="text-muted">Project name</h3>
</div>
diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index defcdd2f0d95b6ba47ad535af72261407ff9deb8..141798b7bac1603109ec2131f279b60c57922c71 100644
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -33,14 +33,16 @@
<div class="masthead">
<h3 class="text-muted">Project name</h3>
- <ul class="nav nav-justified">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Projects</a></li>
- <li><a href="#">Services</a></li>
- <li><a href="#">Downloads</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
+ <div role="navigation">
+ <ul class="nav nav-justified">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Projects</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Downloads</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div>
</div>
<!-- Jumbotron -->
diff --git a/docs/examples/navbar-fixed-top/index.html b/docs/examples/navbar-fixed-top/index.html
index a066c551f08a6545ba7c54a0372ce5ebb9882b86..30524304e1520937951cb4cfb0093b7487763a0a 100644
--- a/docs/examples/navbar-fixed-top/index.html
+++ b/docs/examples/navbar-fixed-top/index.html
@@ -62,7 +62,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
- <li class="active"><a href="./">Fixed top</a></li>
+ <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
diff --git a/docs/examples/navbar-static-top/index.html b/docs/examples/navbar-static-top/index.html
index df484972544b5cc3269a58a8ac5ce15d9fc5ac7b..1ed8dcdb30cd494a3c622f20d322ab3abbe04801 100644
--- a/docs/examples/navbar-static-top/index.html
+++ b/docs/examples/navbar-static-top/index.html
@@ -61,7 +61,7 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
- <li class="active"><a href="./">Static top</a></li>
+ <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html
index 89fc7bc6dec7b3b237dd4f00f318c76686302b99..f598cebb0d0a18311f2adacfe0341daa9e0a8e89 100644
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -45,9 +45,9 @@
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
- <li class="active"><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
@@ -62,7 +62,7 @@
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
- <li class="active"><a href="./">Default</a></li>
+ <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
diff --git a/docs/examples/signin/index.html b/docs/examples/signin/index.html
index f759c2fb8439114228d8834f21118ef59245d89c..2aa524e2dc40694b01a8901bcfc195f92fe1962b 100644
--- a/docs/examples/signin/index.html
+++ b/docs/examples/signin/index.html
@@ -33,8 +33,10 @@
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
- <input type="email" class="form-control" placeholder="Email address" required autofocus>
- <input type="password" class="form-control" placeholder="Password" required>
+ <label for="inputEmail" class="sr-only">Email address</label>
+ <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+ <label for="inputPassword" class="sr-only">Email address</label>
+ <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me