diff options
| author | Chris Rebert <code@rebertia.com> | 2014-02-10 22:46:17 +0400 |
|---|---|---|
| committer | Chris Rebert <code@rebertia.com> | 2014-02-10 22:46:17 +0400 |
| commit | dc5917bedfda321b72310209d2807ea10347f7ed (patch) | |
| tree | fe3f6162a936804f2670572c8ea11c8dcf83f31f /docs | |
| parent | c4e242bdb170be26e64e859c5636f3cb0285f679 (diff) | |
update docs to include+use .sr-only-focusable
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_layouts/default.html | 2 | ||||
| -rw-r--r-- | docs/_layouts/home.html | 2 | ||||
| -rw-r--r-- | docs/css.html | 7 | ||||
| -rw-r--r-- | docs/getting-started.html | 2 |
4 files changed, 7 insertions, 6 deletions
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 4416eba867..17ef8abc74 100644 --- 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 index ace3190383..99b863f9b0 100644 --- 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/css.html b/docs/css.html index 2a2d500977..7ed142cc87 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2530,15 +2530,16 @@ For example, <code><section></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 %} diff --git a/docs/getting-started.html b/docs/getting-started.html index 25209c1322..70d08cff2a 100644 --- 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><body></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> |