rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Improve accessibility (Section 508, WCAG)

Browse Source 
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.

What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.

What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo

Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
This commit is contained in:
adamjacobbecker 2013-08-06 21:25:36 -07:00
parent d1e712d848
commit a8d95d4721
14 changed files with 189 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/nav-getting-started.html
View File

@ -17,6 +17,9 @@
<li> <li>
<a href="#third-parties">Third party support</a> <a href="#third-parties">Third party support</a>
</li> </li>
<li>
<a href="#accessibility">Accessibility</a>
</li>
<li> <li>
<a href="#license-faqs">License FAQs</a> <a href="#license-faqs">License FAQs</a>
</li> </li>

3
_includes/nav-main.html
View File

@ -1,6 +1,7 @@
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav"> <div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation">
<div class="container"> <div class="container">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>

4
_includes/social-buttons.html
View File

@ -1,10 +1,10 @@
<div class="bs-social"> <div class="bs-social">
<ul class="bs-social-buttons"> <ul class="bs-social-buttons">
<li> <li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px" title="Star on GitHub"></iframe>
</li> </li>
<li> <li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px" title="Fork on GitHub"></iframe>
</li> </li>
<li class="follow-btn"> <li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>

5
_layouts/customize.html
View File

@ -6,12 +6,13 @@
<!-- Place anything custom after this. --> <!-- Place anything custom after this. -->
</head> </head>
<body data-spy="scroll" data-target=".bs-sidebar"> <body data-spy="scroll" data-target=".bs-sidebar">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-header"> <div class="bs-header" id="content" role="banner">
<div class="container"> <div class="container">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p> <p>{{ page.lead }}</p>
@ -22,7 +23,7 @@
<!-- Callout for the old docs link --> <!-- Callout for the old docs link -->
{% include old-bs-docs.html %} {% include old-bs-docs.html %}
<div class="bs-customize-placeholder"> <div class="bs-customize-placeholder" role="main">
<div class="container bs-docs-container"> <div class="container bs-docs-container">
<p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p> <p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
</div> </div>

9
_layouts/default.html
View File

@ -6,12 +6,13 @@
<!-- Place anything custom after this. --> <!-- Place anything custom after this. -->
</head> </head>
<body> <body>
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-header"> <div class="bs-header" id="content" role="banner">
<div class="container"> <div class="container">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p> <p>{{ page.lead }}</p>
@ -25,7 +26,7 @@
<div class="container bs-docs-container"> <div class="container bs-docs-container">
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<div class="bs-sidebar"> <div class="bs-sidebar" role="complementary">
<ul class="nav bs-sidenav"> <ul class="nav bs-sidenav">
{% if page.slug == "getting-started" %} {% if page.slug == "getting-started" %}
{% include nav-getting-started.html %} {% include nav-getting-started.html %}
@ -41,7 +42,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9" role="main">
{{ content }} {{ content }}
</div> </div>
</div> </div>
@ -50,7 +51,7 @@
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="bs-footer"> <footer class="bs-footer" role="contentinfo">
{% include social-buttons.html %} {% include social-buttons.html %}
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>

3
_layouts/home.html
View File

@ -6,6 +6,7 @@
<!-- Place anything custom after this. --> <!-- Place anything custom after this. -->
</head> </head>
<body class="bs-docs-home"> <body class="bs-docs-home">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
@ -16,7 +17,7 @@
<!-- Callout for the old docs link --> <!-- Callout for the old docs link -->
{% include old-bs-docs.html %} {% include old-bs-docs.html %}
<div class="container"> <div class="container" role="contentinfo">
{% include social-buttons.html %} {% include social-buttons.html %}
<ul class="bs-masthead-links"> <ul class="bs-masthead-links">

126
components.html
View File

@ -1020,7 +1020,7 @@ base_url: "../"
<h2 id="navbar-basic">Basic navbar</h2> <h2 id="navbar-basic">Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p> <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
@ -1030,7 +1030,7 @@ base_url: "../"
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar"> <div class="navbar" role="navigation">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
@ -1039,13 +1039,17 @@ base_url: "../"
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div>
<h2>Navbar components</h2> <h2>Navbar components</h2>
<h3 id="navbar-brand">Brand</h3> <h3 id="navbar-brand">Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p> <p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
@ -1056,7 +1060,7 @@ base_url: "../"
<h3 id="navbar-nav">Nav links</h3> <h3 id="navbar-nav">Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p> <p>Nav items are simple to add via unordered lists.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
@ -1076,14 +1080,14 @@ base_url: "../"
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p> <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</div> </div>
<div class="navbar"> <div class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<select name="" id="" class="form-control" style="width: 200px;"> <select name="" id="" class="form-control" style="width: 200px;">
<option value="1">1</option> <option value="1">1</option>
@ -1095,7 +1099,7 @@ base_url: "../"
</form> </form>
</div> </div>
<div class="navbar"> <div class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<input type="checkbox"> <input type="checkbox">
@ -1103,7 +1107,7 @@ base_url: "../"
</form> </form>
</div> </div>
<div class="navbar"> <div class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<label class="checkbox-inline"> <label class="checkbox-inline">
@ -1124,7 +1128,7 @@ base_url: "../"
<h3 id="navbar-buttons">Buttons</h3> <h3 id="navbar-buttons">Buttons</h3>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p> <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<button type="button" class="btn btn-default navbar-btn">Sign in</button> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div> </div>
@ -1136,13 +1140,13 @@ base_url: "../"
<h3 id="navbar-text">Text</h3> <h3 id="navbar-text">Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="navbar"> <div class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
</div> </div>
@ -1151,13 +1155,13 @@ base_url: "../"
<h3 id="navbar-links">Links</h3> <h3 id="navbar-links">Links</h3>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="navbar"> <div class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div> </div>
@ -1185,7 +1189,7 @@ base_url: "../"
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top" role="navigation">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1202,7 +1206,7 @@ body { padding-top: 70px; }
<h3 id="navbar-fixed-bottom">Fixed to bottom</h3> <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p> <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-example bs-navbar-bottom-example"> <div class="bs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom"> <div class="navbar navbar-fixed-bottom" role="navigation">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
@ -1214,7 +1218,7 @@ body { padding-top: 70px; }
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-fixed-bottom"> <div class="navbar navbar-fixed-bottom" role="navigation">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1231,7 +1235,7 @@ body { padding-bottom: 70px; }
<h3 id="navbar-static-top">Static top navbar</h3> <h3 id="navbar-static-top">Static top navbar</h3>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p> <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;"> <div class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
@ -1243,7 +1247,7 @@ body { padding-bottom: 70px; }
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-static-top"> <div class="navbar navbar-static-top" role="navigation">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1252,9 +1256,10 @@ body { padding-bottom: 70px; }
<h2 id="navbar-responsive">Responsive navbar</h2> <h2 id="navbar-responsive">Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p> <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar"> <div class="navbar" role="navigation">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -1299,11 +1304,12 @@ body { padding-bottom: 70px; }
</div><!-- /.navbar --> </div><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar"> <div class="navbar" role="navigation">
<div class="container"> <div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content --> <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -1371,7 +1377,7 @@ body { padding-bottom: 70px; }
<h2 id="navbar-inverted">Inverted variation</h2> <h2 id="navbar-inverted">Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse" role="navigation">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -1418,7 +1424,7 @@ body { padding-bottom: 70px; }
</div><!-- /.navbar --> </div><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse" role="navigation">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1498,7 +1504,7 @@ body { padding-bottom: 70px; }
<div class="bs-example"> <div class="bs-example">
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li> <li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</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="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
@ -1509,7 +1515,7 @@ body { padding-bottom: 70px; }
{% highlight html %} {% highlight html %}
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li> <li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -1517,7 +1523,7 @@ body { padding-bottom: 70px; }
{% highlight html %} {% highlight html %}
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><span>&laquo;</span></li> <li class="disabled"><span>&laquo;</span></li>
<li class="active"><span>1</span></li> <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -1964,12 +1970,12 @@ body { padding-bottom: 70px; }
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width: 60%;"></div> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width: 60%;"></div> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1977,30 +1983,38 @@ body { padding-bottom: 70px; }
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
</div> </div>
<div class="progress" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
</div> </div>
<div class="progress" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"></div> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -2008,30 +2022,38 @@ body { padding-bottom: 70px; }
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
</div> </div>
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
</div> </div>
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
</div> </div>
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div> </div>
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 40%"></div> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div> </div>
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div> </div>
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -2039,12 +2061,14 @@ body { padding-bottom: 70px; }
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class='sr-only'>45% Complete</span>
</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -2052,16 +2076,16 @@ body { padding-bottom: 70px; }
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div> <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div> <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div> <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div> <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div> </div>

22
css.html
View File

@ -1300,9 +1300,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Requires custom widths</h4> <h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div> </div>
<div class="bs-callout bs-callout-danger">
<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>
</div>
<form class="bs-example form-inline"> <form class="bs-example form-inline">
<input type="text" class="form-control" placeholder="Email"> <label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="password" class="form-control" placeholder="Password"> <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@ -1312,8 +1318,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form><!-- /example --> </form><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
<input type="text" class="form-control" placeholder="Email"> <label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="password" class="form-control" placeholder="Password"> <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@ -1985,6 +1993,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
.element { .element {
.clearfix(); .clearfix();
} }
{% endhighlight %}
<h3>.sr-only</h3>
<p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
{% highlight html %}
<a class="sr-only" href="#content">Skip to content</a>
{% endhighlight %} {% endhighlight %}
</div> </div>

11
dist/css/bootstrap.css vendored
View File

@ -356,6 +356,17 @@ hr {
border-top: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
p { p {
margin: 0 0 10px; margin: 0 0 10px;
} }

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

33
getting-started.html
View File

@ -206,6 +206,39 @@ img { max-width: none; }
<!-- Accessibility
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="accessibility">Accessibility</h1>
</div>
<p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to users using assistive technology (AT). However, it's useful to take the following into consideration:</p>
<p>If your navigation contains many links and comes before your main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>body</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
{% highlight html %}
<body>
<a href="#content" class="sr-only">Skip to content</a>
...
<div class="container" id="content">
The main page content.
</div>
...
</body>
{% endhighlight %}
<p>Another "gotcha" has to do with how you nest your <code>header</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>h2</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p>
<h4>Resources</h4>
<ul>
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<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>
</div>
<!-- License FAQs <!-- License FAQs
================================================== --> ================================================== -->

2
index.html
View File

@ -4,7 +4,7 @@ title: Bootstrap
base_url: "./" base_url: "./"
--- ---
<div class="bs-masthead"> <div class="bs-masthead" id="content" role="main">
<div class="container"> <div class="container">
<h1>Bootstrap 3</h1> <h1>Bootstrap 3</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p> <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>

22
javascript.html
View File

@ -196,7 +196,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="myModal"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -215,6 +215,17 @@ $('#myModal').on('show.bs.modal', function (e) {
</div><!-- /.modal --> </div><!-- /.modal -->
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Make modals accessible</h4>
<p>
Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code>&lt;div&gt;</code> to point to this description (this is not shown in the above example).
</p>
</div>
<h2 id="modals-usage">Usage</h2> <h2 id="modals-usage">Usage</h2>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
@ -344,10 +355,11 @@ $('#myModal').on('hidden.bs.modal', function () {
<h3>Within a navbar</h3> <h3>Within a navbar</h3>
<div class="bs-example"> <div class="bs-example">
<div id="navbar-example" class="navbar navbar-static"> <div id="navbar-example" class="navbar navbar-static" role="navigation">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a> <a class="navbar-brand" href="#">Project Name</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -481,7 +493,7 @@ $('.dropdown-toggle').dropdown()
<h2 id="scrollspy-examples">Example in navbar</h2> <h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example"> <div class="bs-example">
<div id="navbar-example2" class="navbar navbar-static"> <div id="navbar-example2" class="navbar navbar-static" role="navigation">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a> <a class="navbar-brand" href="#">Project Name</a>
@ -1671,6 +1683,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger">
<h4>Accessibility issue</h4>
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
</div>
<h2 id="carousel-usage">Usage</h2> <h2 id="carousel-usage">Usage</h2>

14
less/scaffolding.less
View File

@ -93,3 +93,17 @@ hr {
border-top: 1px solid @hr-border; border-top: 1px solid @hr-border;
} }
// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content/
// -------------------------
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}