aboutsummaryrefslogtreecommitdiff
path: root/docs/_includes/getting-started
diff options
context:
space:
mode:
authorPatrick H. Lauke <[email protected]>2014-12-14 23:30:37 +0000
committerPatrick H. Lauke <[email protected]>2014-12-14 23:30:37 +0000
commitc187f77e65d177c3a0e662b99d5bff63ee47b3db (patch)
treecc4910d9ccc81f23cfa585a4d94f6293b1931bdd /docs/_includes/getting-started
parentf11a3a31f1382f212f9255671535d87060078355 (diff)
parent2d41894ce51a1ae3b6e9d96eb63bf9cc3b50f64b (diff)
downloadbootstrap-c187f77e65d177c3a0e662b99d5bff63ee47b3db.tar.xz
bootstrap-c187f77e65d177c3a0e662b99d5bff63ee47b3db.zip
Merge pull request #15363 from patrickhlauke/docs-nicer-skip-link
Make skip link look less "bare bones"
Diffstat (limited to 'docs/_includes/getting-started')
-rw-r--r--docs/_includes/getting-started/accessibility.html5
1 files changed, 3 insertions, 2 deletions
diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html
index 37c19315c..cbb528dce 100644
--- a/docs/_includes/getting-started/accessibility.html
+++ b/docs/_includes/getting-started/accessibility.html
@@ -3,12 +3,13 @@
<p class="lead">Bootstrap follows common web standards and&mdash;with minimal extra effort&mdash;can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
<h3>Skip navigation</h3>
- <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>
+ <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 before the navigation <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a>. Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
{% highlight html %}
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
+ ...
<div class="container" id="content">
- The main page content.
+ <!-- The main page content -->
</div>
</body>
{% endhighlight %}