rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

update docs to include+use .sr-only-focusable

Browse Source
This commit is contained in:
Chris Rebert 2014-02-10 10:46:17 -08:00
parent c4e242bdb1
commit dc5917bedf
4 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_layouts/default.html
View File

@ -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 %}

2
docs/_layouts/home.html
View File

@ -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 %}

7
docs/css.html
View File

@ -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 %}

2
docs/getting-started.html
View File

@ -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>