diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 4416eba86..17ef8abc7 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -5,7 +5,7 @@
{% include header.html %}
- Skip to main content
+ Skip to main content
{% include nav-main.html %}
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
index ace319038..99b863f9b 100644
--- a/docs/_layouts/home.html
+++ b/docs/_layouts/home.html
@@ -5,7 +5,7 @@
{% include header.html %}
- Skip to main content
+ Skip to main content
{% include nav-main.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, <section> should be wrapped as inline.
{% endhighlight %}
- Screen reader content
- Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.
+ Screen reader and keyboard navigation content
+ Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
{% highlight html %}
-Skip to main content
+Skip to main content
{% endhighlight %}
{% highlight scss %}
// Usage as a Mixin
.skip-navigation {
.sr-only();
+ .sr-only-focusable();
}
{% endhighlight %}
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 25209c132..70d08cff2 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -621,7 +621,7 @@ if (isAndroid) {
If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link immediately after your opening <body> tag. (read why)
{% highlight html %}
- Skip to main content
+ Skip to main content
The main page content.