Skip Navigation Link

This component is only visible when it has focus. Put focus into the <iframe> below and press the tab key, that will put focus on the element, therefore making it visible. The intention is to allow keyboard users to quickly tab over repeative content — <header> and <nav> — present on every page.

This component relys upon the target element to have an id of #main. It is currently pointing to the <main> tag on on the page.

See webaim.org for more information about this approach.

skip-nav

<!-- start `skip-nav` component; -->
<nav class="skip-nav"><a href="#main">Skip to main content</a> </nav>
<!-- end `skip-nav` component; -->

.skip-nav {
  a {
    position: absolute;
    top: -1000px;
    left: -1000px;
    background: $color__backgroundDark;
    color: $color__highlightDark;
    font-size: $font-size__small;
    font-weight: 700;
    line-height: $line-height__medium;
    padding: size(0.25) size(0.5);
    text-decoration: none;
    text-transform: uppercase;
    width: size(7);

    // on small devices cover the logo completely;
    // visually this is better than just covering part of it;
    &:focus {
      top: size(1.25);
      left: 50%;
      margin-left: size(-3.5);
      outline: 1px solid $color__highlightDark;

      // once we have enough horizontal space that the link won't overlap the logo;
      // push it to the left, next to the hamburger link;
      @include breakpoint($breakpoint--sm) {
        top: size(1.25);
        left: size(3);
        margin-left: 0;
      }
    }
  }
}