feat(a11y): Add skip link pattern.

Add a skip link pattern so keyboard users can tab to content, search results, the footer, etc. more
efficiently.

Closes #123.

rocketbelt/base/_base.scss

@@ -1,4 +1,5 @@
-@import 'animation/animation',
+@import 'a11y/a11y',
+        'animation/animation',
         'color/color',
         'grid/grid',
         'layout/layout',

rocketbelt/base/a11y/_a11y-skip-links.pug

@@ -0,0 +1,5 @@
+ul.skip.list-reset
+  li
+    a.button-sm.button-secondary(href='#content') Skip to Main Content
+  li
+    a.button-sm.button-secondary(href='#footer') Skip to Footer

rocketbelt/base/a11y/_a11y.scss

@@ -0,0 +1,19 @@
+.skip {
+  a {
+    @extend %visually-hidden;
+    @extend %focusable;
+
+    min-width: 0;
+    text-transform: none;
+    opacity: 0;
+    transition: opacity 100ms;
+
+    &:focus,
+    &:active {
+      // Don't forget to add top/left positioning properties for your use case!
+      position: absolute;
+      padding: 0.125rem;
+      opacity: 1;
+    }
+  }
+}

rocketbelt/tools/placeholders/_visually-hidden.scss

@@ -16,18 +16,20 @@
   border: 0;
   white-space: nowrap;
   clip-path: inset(50%);
+}
 
-
-  // Genius idea from H5BP. See https://github.com/h5bp/html5-boilerplate/blob/024b8a05ee9acf99393469c0622e55a694542493/src/css/main.css#L147
-  &.focusable:active,
-    &.focusable:focus {
-      position: static;
-      overflow: visible;
-      clip: auto;
-      margin: 0;
-      width: auto;
-      height: auto;
-      white-space: inherit;
-      clip-path: none;
+// Genius idea from H5BP. See https://github.com/h5bp/html5-boilerplate/blob/024b8a05ee9acf99393469c0622e55a694542493/src/css/main.css#L147
+%focusable {
+  &:active,
+  &:focus {
+    position: static;
+    overflow: visible;
+    clip: auto;
+    margin: 0;
+    width: auto;
+    height: auto;
+    white-space: inherit;
+    clip-path: none;
   }
+
 }

templates/_layout.pug

@@ -19,6 +19,7 @@ html(lang='en')
       script(src='https://code.jquery.com/jquery-2.2.4.min.js')
 
   body.grid-fluid
+    include /base/a11y/_a11y-skip-links.pug
     #docs-wrapper.row
       nav#docs-leftnav.nav.col.xs-12.md-3.xl-2
         a.rb-header.grid-fluid(href='/')

templates/_mixins.pug

@@ -102,7 +102,7 @@ mixin buildNav(navObject, rootHref)
         if shortName !== 'img'
           li.category(ref=shortName)
             if _.find(item.children, function (i) { return ( i.name && i.name.indexOf('index.') > -1 ) })
-              a(href=newRootHref + '/' + item.name.replace('jade', 'html')) #{name.replace('.jade', '')}
+              a(href=newRootHref + '/' + item.name.replace('jade', 'html')) #{name.replace('.jade', '').replace('A11y', 'Accessibility')}
             else
               input.category-toggle(id=name, type='checkbox', name=name)
               label.category-label(for=name) #{name}

templates/base/a11y/index.pug

@@ -0,0 +1,15 @@
+extends /_layout.pug
+
+block vars
+  - var title = 'Accessibility'
+
+block content
+  article.grid-article
+    h1 Accessibility
+    | Rocketbelt strives to be accessible out of the box.
+
+    h2 Skip Links
+    | Main content or items in a page's footer may require dozens or hundreds Tab presses to interact with if a user is navigating via keyboard. Skip links make this interaction much less tedious by using an on-page href. The link is visually hidden unless it is focused via keyboard.
+
+    +exampleCodeOnly
+      include _a11y-skip-links.pug

templates/scss/_a11y.scss

@@ -0,0 +1,9 @@
+.skip {
+  a {
+    &:focus,
+    &:active {
+      top: 0.5rem;
+      left: 12rem;
+    }
+  }
+}

templates/scss/site.scss

@@ -1,5 +1,6 @@
 @import 'vendor/vendor',
         '../../rocketbelt/tools/tools',
+        'a11y',
         'color',
         'grid',
         'icons',