Skip to content

[ArakTaiRoth]

A Skip-link is an accessibility consideration to be included on every page for navigation using a screen reader. For reference: https://www.w3schools.com/accessibility/accessibility_skip_links.php

Acceptance criteria:

• If a user initiates page navigation using a keyboard (tab) on first page load, show a “skip link” bar at the top of the page. This allows a user to bypass the navigation and move directly to the page content.
• The Skip-link only comes up if a user hits tab right after page loads
  • ie. They don't interact with the page in anyway before hitting tab
• A listener for focusing a specific piece of content (first tab order item), not a listener for the tab key
• Follow Figma design and work with @twjeffery to review
• Determine how this should be included in the design system components
  • eg. as part of the site header
    • if so, we might need to wrap the skip link, microsite header, and site header together as a grouped component
• consult with @chrisolsen for implementation and @vanessatran-ddi for accessibility considerations
• Once issue has passed code review, inform @twjeffery so that he can prepare the Figma assets for release

Note for Testing:

This may not work in Safari, or at least as described

[ArakTaiRoth]

@twjeffery Make ready once you have a finalized design and can provide link above