VCU Compass Web Framework

Skip Link 

<nav class="cwf-skip-links" id="cwf-skip-links" aria-label="Skip links">
    <a class="cwf-skip-links__link" href="#cwf-content" tabindex="1">
        Skip to content
    </a>
    <a class="cwf-skip-links__link" href="#cwf-footer" tabindex="2">
        Skip to footer
    </a>
</nav>
 
<nav class="cwf-skip-links" id="{{ id }}" aria-label="Skip links">
    {% for link in links %}
        <a class="cwf-skip-links__link" href="{{ link.url }}" tabindex="{{ loop.index }}">
            {{ link.name }}
        </a>
    {% endfor %}
</nav>
 
{
  "id": "cwf-skip-links",
  "links": [
    {
      "name": "Skip to content",
      "url": "#cwf-content"
    },
    {
      "name": "Skip to footer",
      "url": "#cwf-footer"
    }
  ]
}
  • Content: 
    // Skip link component styles

@import "../../shared/scss/animation";
@import "../../shared/scss/style";

.cwf-skip-links {
    --skip-links-bg: #{style__color(black)};
    --skip-links-fg: #{style__color(gold)};
}

.cwf-skip-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin-left: 0;
    list-style: outside none;
}

.cwf-skip-links .cwf-skip-links__link {
    position: absolute;
    left: 15px;
    top: -100px;
    z-index: 10002;
    height: auto;
    margin: 0 auto;
    padding: 10px 15px;
    background-color: transparent;
    color: var(--skip-links-fg);
    outline: none;
    @include animation__transition(top, background-color);
}

.cwf-skip-links .cwf-skip-links__link:active,
.cwf-skip-links .cwf-skip-links__link:focus {
    top: 0;
    background-color: var(--skip-links-bg);
}
  • URL: /components/raw/skip-link/_styles.scss
  • Filesystem Path: src/components/skip-link/_styles.scss
  • Size: 831 Bytes

Skip-link

The skip-link component is a navigation item providing links to key areas of interest on the current page, usually to the main content area and footer information. This component is not visible unless focused, and is intended mainly for screen reader users to bypass repetitive web page content to quickly get to critical information.

Structure

This component can contain any number of links, which have an href attribute set to the ID of the HTML element they point to. In addition, each link has a tabindex attribute set, the first with a tabindex of 1 and following links incrementing up by 1 from this; This ensures that these links are the first set of focusable elements on the page despite where it is included.

Usage

This component is to be the first within the body of every page.