From d5647e1f6277864cb776e4f958a54f6f5c30b6e6 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 14 Dec 2014 14:31:02 +0000 Subject: [PATCH 1/2] Make skip link look less "bare bones" Additional markup for the skip link (to ensure it has the same effective width as the main content, and to provide an outline around just the link text) plus some basic styles...make it look a bit more in keeping with the overall look and feel of the docs. --- docs/_layouts/default.html | 2 +- docs/_layouts/home.html | 2 +- docs/assets/css/src/docs.css | 20 ++++++++++++++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 51191dc5eb..ea69962ee3 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 9b1eee6ed3..15a78adee7 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/assets/css/src/docs.css b/docs/assets/css/src/docs.css index 4cc1fa843a..4f63b33cd8 100644 --- a/docs/assets/css/src/docs.css +++ b/docs/assets/css/src/docs.css @@ -89,6 +89,26 @@ body { } +/* + * Fancy skip link + * + * Make it look a bit less "bare bones" + */ + +#skippy { + display: block; + padding: 1em; + color: #fff; + background-color: #6F5499; + outline: 0; +} + +#skippy .skiplink-text { + padding: 0.5em; + outline: 1px dotted; +} + + /* * Main navigation * From 2d41894ce51a1ae3b6e9d96eb63bf9cc3b50f64b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 14 Dec 2014 14:47:05 +0000 Subject: [PATCH 2/2] Expand/clarify advice about skip links --- docs/_includes/getting-started/accessibility.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html index 37c19315ce..cbb528dce2 100644 --- a/docs/_includes/getting-started/accessibility.html +++ b/docs/_includes/getting-started/accessibility.html @@ -3,12 +3,13 @@

Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.

Skip navigation

-

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)

+

If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link before the navigation (read why). Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).

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