Every time a page loads, keyboard and screen reader users start at the top of the page, navigating through a header section that contains the organization’s name or page title, site navigation, and who knows what else until they get to the unique content on that page. If a user stays on their site, this process is repeated with every new page.
Providing “Skip Links” for each page of your website allows visitors to bypass or “skip” this repetitive content. In short, Skip Links are important to your site’s usability.
Skip Links are practical and essential for web accessibility. Skip Links can also be designed to reflect the look and feel of the site as well.
To help with design inspiration, here are a handful of sites utilizing Skip Links that work well with their site’s brand:
Chase
Using a white background with blue text to create a stark contrast to the background image and black gradient, Chase’s Skip Link is easy to see even for people with low vision.
18F
Using a subtle animation, 18F slides the Skip Link into focus.
Starbucks
A well-executed Skip Links by Starbucks is readily visible and works well with their brand.
Harvard
Harvard’s Skip Link uses the university’s crimson school color.
Microsoft
Microsoft’s Skip Link does not mess around. You can’t miss it as their Skip Link covers up the entire header navigation.
Oracle
When the Skip Link is activated, Oracle visually displays three options at once: Home, Skip to Content, and Skip to Search.
Knowbility
Simple and to the point, our own site’s Skip Link appears in the center of the header.
Conclusion
Hopefully, this handy list of Skip Link examples inspires you to add a flourish to your site. Once you’ve built yours or if you find a Skip Links design you like, let us know on Twitter.