Skip to content

Latest commit

 

History

History

skip-nav

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

styles

styles

 
 

readme.md

readme.md

 
 

readme.md

Willow-Skip-Nav

The Skip Navigation or Skip Link is an accessibility component that allows motor and sight impaired users to skip navigation and scroll to to content identified as the main content of the page. This is also useful for sighted users relying on the keyboard for navigation.

The willow-skip-nav is hidden visibly until a user navigates or focuses on the component with their keyboard, at which point it will be displayed.

HTML Snippet

<div class="willow-skip-nav">
    <a href="" class="willow-skip-nav__link" aria-label="skip to main content">Skip to Content</a>
</div>

Elements

willow-skip-nav

  • Required
  • Restrictions
    • Should Contain: willow-skip-nav elements

Notes

  • willow-skip-nav component should be included only once on a site and be placed before the willow-page-header component
  • If the site has a global alert, the willow-skip-nav should be placed after the willow-global-alert component

willow-skip-nav__link

  • Required
  • Restrictions
    • Should Contain: text

Notes

  • Set the href value of willow-skip-nav__link equal to the id value of the willow-page-content component
  • willow-skip-nav__link needs an aria-label value if the text content of the link doesn't clearly represent where the user will go after clicking the link