]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c4e242b)
update docs to include+use .sr-only-focusable
authorChris Rebert <code@rebertia.com>
Mon, 10 Feb 2014 18:46:17 +0000 (10:46 -0800)
committerChris Rebert <code@rebertia.com>
Mon, 10 Feb 2014 18:46:17 +0000 (10:46 -0800)
docs/_layouts/default.html patch | blob | blame | history
docs/_layouts/home.html patch | blob | blame | history
docs/css.html patch | blob | blame | history
docs/getting-started.html patch | blob | blame | history

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 4416eba867ef11d1e486d36c6797b693b81b90c3..17ef8abc747ed24d76e4d9e532d3577bc490670d 100644 (file)
--- 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 ace3190383bbaae017040afbd28d1f8389d2134c..99b863f9b054af6a311b04f68adadea99fb5ccf0 100644 (file)
--- 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 2a2d500977ac17d58f60385bad2e33d893ebc64a..7ed142cc87a4ab83a0ca934cf27268612c937721 100644 (file)
--- 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 %}
 
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 25209c13221e27f4245ef3aa353401030638c629..70d08cff2a233dd5f46e10f498018f3b675e6ae3 100644 (file)
--- 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>
Mirror of https://github.com/twbs/bootstrap.git