skip links

Skip Links (landmarks menu)

There are a couple different ways of going about adding skip links to your application with the pattern library...

Option 1

This first option simply requires you to have an empty skip container element like this: <div class="dqpl-skip-container"></div> Any element on the page with role="main", role="banner", role="navigation", or data-skip-target="true" will have a skip link created for it. You can provide the "Skip to" text via data-skip-to-text attribute in which the label (aria-label or aria-labelledby) or simply role name will be appended to in the text of the link.

NOTE: If you'd like to prevent an element from having a skip link created for it, simply add data-no-skip="true" to the element.

Example (using role):

The target element is a role="navigation" and the data-skip-to-text is "Skip to" so the link's text will be "Skip to navigation"

<div class="dqpl-skip-container" data-skip-to-text="Skip to"></div>
<div role="navigation">...</div>

Additional example (using label)

The skip link's text here would be: "Skip to Foo section"

<div class="dqpl-skip-container" data-skip-to-text="Skip to"></div>
<div role="banner" aria-label="Foo Section"></div>

Option 2

In addition to the above method, you can override the role or label readout ("navigation" or "banner" in the above examples) by adding a data-skip-to-name attribute.

Example:

The following markup would result in a skip link's text: "Jump to Cats"

<div class="dqpl-skip-container" data-skip-to-text="Jump to"></div>
<div role="navigation" data-skip-to-name="Cats">

Option 3

The 3rd option is much different than the above... It lets you have complete control of the link's text. You can create your own skip links within the "dqpl-skip-container" element in which you just have to create links with the class "dqpl-skip-link" and have the href attribute point to the id of the target of the skip link.

Example:

 	<div class="dqpl-skip-container">
 		<ul>
 			<li><a class="dqpl-skip-link" href="#main-content">Skip to main content</a></li>
 			<li><a class="dqpl-skip-link" href="#side-bar">Jump to side bar</a></li>
 			<li><a class="dqpl-skip-link" href="#other-thing">Hop to other thing</a></li>
 		</ul>
 	</div>
 	<div id="main-content" role="main">
 		I am the target of the first skip link "Skip to main content"
 	</div>
 	<div id="side-bar">
 		I am the target of the second skip link "Jump to side bar"
 	</div>
 	<div id="other-thing">
 		I am the target of the third skip link "Hop to other thing"
 	</div>

NOTE(recommended): add data-remove-tabindex-on-blur="true" to the skip container if you want tabindex to be removed from a skip target on blur (so when you click inside of a container the focus ring doesn't show up)