Skip to content

B
bootstrap
Commit bb89657b authored by Patrick H. Lauke's avatar Patrick H. Lauke Committed by Heinrich Fenkart
Browse files
Options

Assorted accessibility (and some consistency) fixes for documentation 

Closes #14951 by merging it.
parent 99919c03
Expand all Show whitespace changes
Inline Side-by-side
Showing with 322 additions and 252 deletions
docs/_includes/components/dropdowns.html
View file @ bb89657b
......@@ -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>&lt;li&gt;</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>
......
docs/_includes/components/input-groups.html
View file @ bb89657b
......@@ -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>
......
docs/_includes/components/navbar.html
View file @ bb89657b
......@@ -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>
......
docs/_includes/components/navs.html
View file @ bb89657b
......@@ -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>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</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">
......
docs/_includes/components/pagination.html
View file @ bb89657b
......@@ -8,26 +8,26 @@
<div class="bs-example">
<nav>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</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="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</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="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</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="#">&laquo;</a></li>
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</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="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</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>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</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>&laquo;</span></li>
<li class="disabled"><span aria-hidden="true">&laquo;</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="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</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="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</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="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</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="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</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="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
{% endhighlight %}
......@@ -159,16 +159,16 @@
<div class="bs-example">
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
{% endhighlight %}
......
docs/_includes/css/buttons.html
View file @ bb89657b
......@@ -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>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</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>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</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>&lt;a&gt;</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>&lt;a&gt;</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>&lt;a&gt;</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>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
......
docs/_includes/css/forms.html
View file @ bb89657b
This diff is collapsed.
docs/_includes/css/grid.html
View file @ bb89657b
......@@ -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">
......
docs/_includes/css/helpers.html
View file @ bb89657b
......@@ -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>&lt;span&gt;</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>&lt;div&gt;</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>
......
docs/_includes/css/tables.html
View file @ bb89657b
......@@ -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>
......
docs/_includes/getting-started/accessibility.html
View file @ bb89657b
......@@ -17,9 +17,14 @@
<p>When nesting headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>), your primary document header should be an <code>&lt;h1&gt;</code>. Subsequent headings should make logical use of <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</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>
......
docs/_includes/js/tabs.html
View file @ bb89657b
......@@ -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">
<!-- Tab panes -->
<div class="tab-content">
<!-- 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>
</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">
......
docs/_includes/nav/components.html
View file @ bb89657b
......@@ -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>
......
docs/_includes/nav/css.html
View file @ bb89657b
......@@ -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>
docs/examples/cover/index.html
View file @ bb89657b
......@@ -38,11 +38,13 @@
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<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>
......
docs/examples/dashboard/index.html
View file @ bb89657b
......@@ -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>
......
docs/examples/jumbotron-narrow/index.html
View file @ bb89657b
......@@ -31,11 +31,13 @@
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right" role="tablist">
<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>
......
docs/examples/justified-nav/index.html
View file @ bb89657b
......@@ -33,6 +33,7 @@
<div class="masthead">
<h3 class="text-muted">Project name</h3>
<div role="navigation">
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
......@@ -42,6 +43,7 @@
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- Jumbotron -->
<div class="jumbotron">
......
docs/examples/navbar-fixed-top/index.html
View file @ bb89657b
......@@ -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>
......
docs/examples/navbar-static-top/index.html
View file @ bb89657b
......@@ -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 -->
......
docs/examples/navbar/index.html
View file @ bb89657b
......@@ -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>
......
docs/examples/signin/index.html
View file @ bb89657b
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment