sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-31 00:04:27 -04:00
Code Issues Projects Releases Wiki Activity

Expand/clarify advice about skip links

Browse Source
This commit is contained in:
Patrick H. Lauke 2014-12-14 14:47:05 +00:00
parent d5647e1f62
commit 2d41894ce5
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/_includes/getting-started/accessibility.html
View File

@ -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> <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> <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 %} {% highlight html %}
<body> <body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a> <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content"> <div class="container" id="content">
The main page content. <!-- The main page content -->
</div> </div>
</body> </body>
{% endhighlight %} {% endhighlight %}