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