Merge pull request twbs#15363 from patrickhlauke/docs-nicer-skip-link

patrickhlauke · patrickhlauke · commit c187f77e65d1 · 2014-12-14T23:30:37.000Z
Make skip link look less "bare bones"
diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html
@@ -3,12 +3,13 @@ <h1 id="accessibility" class="page-header">Accessibility</h1>
   <p class="lead">Bootstrap follows common web standards and&mdash;with minimal extra effort&mdash;can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
 
   <h3>Skip navigation</h3>
-  <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>
+  <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 before the navigation <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a>. Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
 {% highlight html %}
 <body>
   <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
+  ...
   <div class="container" id="content">
-    The main page content.
+    <!-- The main page content -->
   </div>
 </body>
 {% endhighlight %}
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -5,7 +5,7 @@
     {% include header.html %}
   </head>
   <body>
-    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
+    <a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
 
     <!-- Docs master nav -->
     {% include nav/main.html %}
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -5,7 +5,7 @@
     {% include header.html %}
   </head>
   <body class="bs-docs-home">
-    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
+    <a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
 
     <!-- Docs master nav -->
     {% include nav/main.html %}
diff --git 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
  *
