diff options
Diffstat (limited to 'docs/_includes/components')
| -rw-r--r-- | docs/_includes/components/button-dropdowns.html | 46 | ||||
| -rw-r--r-- | docs/_includes/components/button-groups.html | 143 | ||||
| -rw-r--r-- | docs/_includes/components/dropdowns.html | 10 | ||||
| -rw-r--r-- | docs/_includes/components/glyphicons.html | 47 | ||||
| -rw-r--r-- | docs/_includes/components/input-groups.html | 12 | ||||
| -rw-r--r-- | docs/_includes/components/media.html | 10 | ||||
| -rw-r--r-- | docs/_includes/components/navbar.html | 12 | ||||
| -rw-r--r-- | docs/_includes/components/navs.html | 57 | ||||
| -rw-r--r-- | docs/_includes/components/pagination.html | 46 |
9 files changed, 211 insertions, 172 deletions
diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index 165e0777e..871370d43 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 216e4426b..4a1fc86f8 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 8f0b0c942..6bedbc81b 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/glyphicons.html b/docs/_includes/components/glyphicons.html index c614103c6..b5f5178df 100644 --- a/docs/_includes/components/glyphicons.html +++ b/docs/_includes/components/glyphicons.html @@ -7,7 +7,7 @@ <ul class="bs-glyphicons-list"> {% for iconClassName in site.data.glyphicons %} <li> - <span class="glyphicon {{ iconClassName }}"></span> + <span class="glyphicon {{ iconClassName }}" aria-hidden="true"></span> <span class="glyphicon-class">glyphicon {{ iconClassName }}</span> </li> {% endfor %} @@ -35,8 +35,14 @@ </ul> <p>Use whatever option best suits your specific development setup.</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Accessible icons</h4> + <p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p> + <p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p> + <p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p> + </div> {% highlight html %} -<span class="glyphicon glyphicon-search"></span> +<span class="glyphicon glyphicon-search" aria-hidden="true"></span> {% endhighlight %} @@ -45,22 +51,41 @@ <div class="bs-example"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span> <span class="sr-only">Left Align</span></button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span> <span class="sr-only">Center Align</span></button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span> <span class="sr-only">Right Align</span></button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span> <span class="sr-only">Justify</span></button> + <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button> + <button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button> + <button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button> + <button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button> </div> </div> <div class="btn-toolbar" role="toolbar"> - <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button> - <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button> - <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button> + <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button> + <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button> + <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button> + <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button> </div> </div> {% highlight html %} +<button type="button" class="btn btn-default" aria-label="Left Align"> + <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> +</button> + <button type="button" class="btn btn-default btn-lg"> - <span class="glyphicon glyphicon-star"></span> Star + <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> {% endhighlight %} + <p>An icon used in an <a href="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p> + <div class="bs-example"> + <div class="alert alert-danger" role="alert"> + <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> + <span class="sr-only">Error:</span> + Enter a valid email address + </div> + </div> +{% highlight html %} +<div class="alert alert-danger" role="alert"> + <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> + <span class="sr-only">Error:</span> + Enter a valid email address +</div> +{% endhighlight %} </div> diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index bd29dbe49..31ddfd0c4 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/media.html b/docs/_includes/components/media.html index 1ea4176d4..d77a2520c 100644 --- a/docs/_includes/components/media.html +++ b/docs/_includes/components/media.html @@ -43,16 +43,16 @@ </a> </div> <div class="media"> - <a class="pull-right" href="#"> - <img data-src="holder.js/64x64" alt="Generic placeholder image"> - </a> - <a class="pull-left" href="#"> + <a class="media-left" href="#"> <img data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> - <h4 class="media-heading">Deprecated pull-right pull-left example</h4> + <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div> + <a class="media-right" href="#"> + <img data-src="holder.js/64x64" alt="Generic placeholder image"> + </a> </div> </div><!-- /.bs-example --> {% highlight html %} diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index 5db4d52cf..e876e80a3 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -40,10 +40,10 @@ <!-- 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> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -64,7 +64,7 @@ <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -95,10 +95,10 @@ <!-- 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> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -119,7 +119,7 @@ <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 0e9af578a..2ea20d0e8 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 %} @@ -60,26 +67,26 @@ <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p> <div class="bs-callout bs-callout-warning"> <h4>Safari and responsive justified navs</h4> - <p>As of v7.1, 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> + <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 27e5b6247..f5e78977a 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 %} |