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
*