VCU Compass Web Framework

Skip Links 

<nav class="cwf-skip-links" id="example-skip-links" aria-label="Skip links">
    <a class="cwf-skip-links__link" href="#" tabindex="1">
        Skip to content
    </a>
    <a class="cwf-skip-links__link" href="#" tabindex="2">
        Skip to footer
    </a>
</nav>
 
<nav class="cwf-skip-links"
    id="{{ id ?? 'cwf-skip-links' }}"
    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": "example-skip-links",
  "links": [
    {
      "name": "Skip to content",
      "url": "#"
    },
    {
      "name": "Skip to footer",
      "url": "#"
    }
  ]
}
  • Content: 
    // Skip link component styles

@use "../../shared/animation";
@use "../../shared/style";
@use "../../shared/theme";

// Selector prefix
$prefix: "cwf" !default;

$background-color: style.color("black") !default;
$color: style.color("gold") !default;

.#{$prefix}-skip-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin-left: 0;
    list-style: outside none;
    font-family: theme.font--sans-serif();
    --cwf-skip-links--background-color: #{$background-color};
    --cwf-skip-links--foreground-color: #{$color};

    &__link {
        position: absolute;
        left: 15px;
        top: -100px;
        @include style.z-index("modal", "top");
        height: auto;
        margin: 0 auto;
        padding: 10px 15px;
        background-color: transparent;
        text-decoration: none;
        outline: none;
        @include animation.transition(top, background-color);
        --cwf-link--color: var(--cwf-skip-links--foreground-color);
        --cwf-link--active--color: var(--cwf-skip-links--foreground-color);

        &:active,
        &:focus {
            top: 0;
            background-color: var(--cwf-skip-links--background-color);
        }
    }
}
  • URL: /components/raw/skip-links/_index.scss
  • Filesystem Path: components/skip-links/_index.scss
  • Size: 1.2 KB

Skip links

The skip links 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. Each link has a tabindex attribute set, the first link with tabindex="1" and all 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.

Styles

This component is visually hidden. When any of its links become focused, that link will animate into the viewport at the top right of the webpage and become visible. When the link becomes unfocused, it will animate out of the viewport and either the next skip link will be focused and animated in, or the next link within the tab order wil become focused.

Functionality

This component does not include javascript to provide additional, custom functionality.

Usage

This component is automatically included in the page layout and is the first element within the page body. By default, the following links, in order, will be added to the skip links navigation when the page is rendered:

  1. “Skip to header” - Focuses the header component
  2. “Skip to main navigation” - Focuses the main navigation component
  3. “Skip to sub navigation” - Focuses the sub navigation component
  4. “Skip to main content” - Focuses the main column of content
  5. “Skip to sidebar” - Focuses the righthand sidebar of content
  6. “Skip to footer” - Focuses the footer component

When one or more of the above key areas are not found within the page, they will be not be added to the skip links navigation, and the tab order of each link will shift to accommodate this.

T4 implementation

The skip links component is not tied to a specific content type. Its styles are included in the Compass T4 page layout CSS, and is used by the page layout to provide skip links on every page.

Skip links provided on every page of a Compass T4 website will only include links to areas of interest if a). the area of interest exists and b). the area of interest contains content. This means the absence of a header component on a page will drop the “Skip to header” link, and a right sidebar void of any content will drop the “Skip to sidebar” link.