From dc5917bedfda321b72310209d2807ea10347f7ed Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 10 Feb 2014 10:46:17 -0800
Subject: update docs to include+use .sr-only-focusable

---
 docs/css.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 2a2d50097..7ed142cc8 100644
--- 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 %}
 
-- 
cgit v1.2.3