From c4e242bdb170be26e64e859c5636f3cb0285f679 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Feb 2014 10:34:38 -0800 Subject: [PATCH 1/2] add .sr-only-focusable; fixes #12259 --- dist/css/bootstrap.css | 9 +++++++++ less/scaffolding.less | 16 ++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 329b4fa2ed..a0689a31d7 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -346,6 +346,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, diff --git a/less/scaffolding.less b/less/scaffolding.less index fe29f2d62c..c658d7bf5b 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -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; + } +} From dc5917bedfda321b72310209d2807ea10347f7ed Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Feb 2014 10:46:17 -0800 Subject: [PATCH 2/2] update docs to include+use .sr-only-focusable --- docs/_layouts/default.html | 2 +- docs/_layouts/home.html | 2 +- docs/css.html | 7 ++++--- docs/getting-started.html | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 4416eba867..17ef8abc74 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -5,7 +5,7 @@ {% include header.html %} - Skip to main content + Skip to main content {% include nav-main.html %} diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html index ace3190383..99b863f9b0 100644 --- a/docs/_layouts/home.html +++ b/docs/_layouts/home.html @@ -5,7 +5,7 @@ {% include header.html %} - Skip to main content + Skip to main content {% include nav-main.html %} diff --git a/docs/css.html b/docs/css.html index 2a2d500977..7ed142cc87 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2530,15 +2530,16 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Screen reader content

-

Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.

+

Screen reader and keyboard navigation content

+

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

{% highlight html %} -Skip to main content +Skip to main content {% 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 25209c1322..70d08cff2a 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -621,7 +621,7 @@ if (isAndroid) {

If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link immediately after your opening <body> tag. (read why)

{% highlight html %} - Skip to main content + Skip to main content
The main page content.