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:
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.
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.
PDF Document Remediation · Workshop (September 17, 2020)
This class will start with the very basics of document remediation. We will work our way from start to finish to complete a full WCAG compliant document. We will cover: Language Specification/Page Properties, Common Tags, Alt-text, Reading Order, Headings, Hyperlinks, Lists, Tables, and Fillable Forms.