Skip to content
Accessible Astro Docs Accessible Astro Docs

SkipLinks

SkipLinks provide users utilizing assistive technologies to skip directly to the main content of a website, bypassing repeated content like the site header and navigation.

Prerequisites

The page must have one of the following, or a warning will be logged to the console.

  1. An element with an id of main-content
  2. An <h1> element

Accessibility features

  • Allows users utilizing assistive technologies to skip to the main content of a page

Usage

Accessible Astro exports one skip links-related component:

  • SkipLinks: The link and scripts associated to allow users to skip to the main content of a page

Props

The SkipLinks component does not accept any props.

Example

Skip to main content 
---
import { SkipLinks } from 'accessible-astro-components'
---
<SkipLinks />

Style customization

Customize styles by:

  • setting individual properties with a :global(body .{class) selector (see Anatomy for class name reference)
  • setting a global style tag to define styles

Anatomy

ClassUse
skip-linksThe root class for the SkipLinks component

Example

<style lang="scss" is:global>
  body .skiplinks a {
    color: white;
    background-color: purple;


    &:hover
    &:focus {
      background-color: indigo;
    }
  }
</style>