aboutsummaryrefslogtreecommitdiff
path: root/_includes
diff options
context:
space:
mode:
authoradamjacobbecker <[email protected]>2013-08-06 21:25:36 -0700
committeradamjacobbecker <[email protected]>2013-08-06 21:58:09 -0700
commita8d95d4721e714a7e1d683e14e997faa5ccddaff (patch)
tree13b2659725668e0dde39f1f15810a8303443aa16 /_includes
parentd1e712d84882953b7d2a43a8e70aa3b976da5fcd (diff)
downloadbootstrap-a8d95d4721e714a7e1d683e14e997faa5ccddaff.tar.xz
bootstrap-a8d95d4721e714a7e1d683e14e997faa5ccddaff.zip
Improve accessibility (Section 508, WCAG)
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.
Diffstat (limited to '_includes')
-rw-r--r--_includes/nav-getting-started.html3
-rw-r--r--_includes/nav-main.html3
-rw-r--r--_includes/social-buttons.html4
3 files changed, 7 insertions, 3 deletions
diff --git a/_includes/nav-getting-started.html b/_includes/nav-getting-started.html
index 9788facdd..ad574b621 100644
--- a/_includes/nav-getting-started.html
+++ b/_includes/nav-getting-started.html
@@ -18,6 +18,9 @@
<a href="#third-parties">Third party support</a>
</li>
<li>
+ <a href="#accessibility">Accessibility</a>
+</li>
+<li>
<a href="#license-faqs">License FAQs</a>
</li>
<li>
diff --git a/_includes/nav-main.html b/_includes/nav-main.html
index a9604f588..6b5742cd1 100644
--- a/_includes/nav-main.html
+++ b/_includes/nav-main.html
@@ -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">
<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>
diff --git a/_includes/social-buttons.html b/_includes/social-buttons.html
index 3700ecd14..b52cac2f6 100644
--- a/_includes/social-buttons.html
+++ b/_includes/social-buttons.html
@@ -1,10 +1,10 @@
<div class="bs-social">
<ul class="bs-social-buttons">
<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>
- <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 class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>