update docs to include+use .sr-only-focusable

dc5917be · Chris Rebert · c4e242bd · dc5917be · dc5917be · dc5917be
Commit dc5917be authored Feb 10, 2014 by Chris Rebert
Showing with 7 additions and 6 deletions

docs/_layouts/default.html docs/_layouts/default.html +1 -1

docs/_layouts/home.html docs/_layouts/home.html +1 -1

docs/css.html docs/css.html +4 -3

docs/getting-started.html docs/getting-started.html +1 -1

No files found.
--- 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 %}

--- 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 %}

--- a/docs/css.html
+++ b/docs/css.html
@@ -2530,15 +2530,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% 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 %}


--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -621,7 +621,7 @@ if (isAndroid) {
  <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>