Skip to content

B
bootstrap
Commit 29f23576 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #12679 from twbs/sr-only-focusable 

add .sr-only-focusable
parents 5e6d16ef d8bc65b9
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 11 deletions
dist/css/bootstrap-rtl.css
View file @ 29f23576
......@@ -1250,6 +1250,16 @@ hr {
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
h1,
h2,
h3,
......
dist/css/bootstrap-rtl.min.css
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.css
View file @ 29f23576
......@@ -973,6 +973,15 @@ hr {
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
h1,
h2,
h3,
......
dist/css/bootstrap.css.map
View file @ 29f23576
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_layouts/default.html
View file @ 29f23576
......@@ -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 %}
......
docs/_layouts/home.html
View file @ 29f23576
......@@ -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 %}
......
docs/assets/js/raw-files.min.js
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/css.html
View file @ 29f23576
......@@ -2611,15 +2611,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 %}
......
docs/dist/css/bootstrap-rtl.min.css
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.css.map
View file @ 29f23576
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/getting-started.html
View file @ 29f23576
......@@ -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>
......
less/scaffolding.less
View file @ 29f23576
......@@ -132,3 +132,19 @@ hr {
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
.sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment