twbs · mdo · Mar 9, 2014 · Feb 10, 2014 · Feb 10, 2014 · Mar 9, 2014
diff --git a/dist/css/bootstrap-rtl.css b/dist/css/bootstrap-rtl.css
diff --git a/dist/css/bootstrap-rtl.min.css b/dist/css/bootstrap-rtl.min.css
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
diff --git a/dist/css/bootstrap.css.map b/dist/css/bootstrap.css.map
diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -5,7 +5,7 @@
     {% include header.html %}
   </head>
   <body>
-    <a class="sr-only" href="#content">Skip to main content</a>
+    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}

diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -5,7 +5,7 @@
     {% include header.html %}
   </head>
   <body class="bs-docs-home">
-    <a class="sr-only" href="#content">Skip to main content</a>
+    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}

diff --git a/docs/assets/js/raw-files.min.js b/docs/assets/js/raw-files.min.js
diff --git a/docs/css.html b/docs/css.html
@@ -2611,15 +2611,16 @@ <h3 id="helper-classes-show-hide">Showing and hiding content</h3>
 {% endhighlight %}
 
 
-  <h3 id="helper-classes-screen-readers">Screen reader content</h3>
-  <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
+  <h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
+  <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
 {% highlight html %}
-<a class="sr-only" href="#content">Skip to main content</a>
+<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 {% endhighlight %}
 {% highlight scss %}
 // Usage as a Mixin
 .skip-navigation {
   .sr-only();
+  .sr-only-focusable();
 }
 {% endhighlight %}
 

diff --git a/docs/dist/css/bootstrap-rtl.min.css b/docs/dist/css/bootstrap-rtl.min.css
diff --git a/docs/dist/css/bootstrap.css.map b/docs/dist/css/bootstrap.css.map
diff --git a/docs/dist/css/bootstrap.min.css b/docs/dist/css/bootstrap.min.css
diff --git a/docs/getting-started.html b/docs/getting-started.html
@@ -621,7 +621,7 @@ <h3>Skip navigation</h3>
   <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code>&lt;body&gt;</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 main content</a>
+  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
   <div class="container" id="content">
     The main page content.
   </div>

diff --git a/less/scaffolding.less b/less/scaffolding.less
@@ -132,3 +132,19 @@ hr {
   clip: rect(0,0,0,0);
   border: 0;
 }
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}