Translated Web Content Accessibility Guidelines (WCAG) conformant, accessible - yet invisible - skip links.
The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. The official recommendation for WCAG 2.1 was published in 2018 and was adopted by the European Union (EU) as the digital accessibility standard the same year.
Skip links are a mechanism to bypass blocks of content that are repeated on multiple Web pages (WCAG Success Criterion 2.4.1 Bypass Blocks).
Skip links help people, who navigate sequentially through content, to access the primary content of a Web page more directly. Skip links help to skip repeated blocks of content like logos and navigation links.
Create Skip links by following the instructions below.
- Place a HTML skip link on all of your Web pages, ideally before any other content. E.g.:
<body>
<a href="#main-content" class="visually-hidden focusable skip-link">Skip to main content</a>
…- Add
id="main-content"attribute to an HTML element, that marks the beginning of the main content. E.g.:
…
<main id="main-content">
…Add the following to your Cascading Style Sheets (CSS):
/* Hide visually but not from screen readers */
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Allow the Skip link to be focusable when navigated to via the keyboard */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
.skip-link.visually-hidden.focusable:focus {
background: #ffffff;
color: #000000;
left: .2em;
padding: .1em 2em;
top: 0;
width: auto;
z-index: 99999;
}Set up translations. The translation table, international-skip-link_link-texts.csv, uses the ISO 639-1 and ISO 639-2/B language codes to identify ~28 languages. Help with translations is appreciated.
You can inspect the example implementation by using the Tab key to navigate the rendered version of the example skip-link-example.html.
You can find the file itself on GitHub.
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG
- https://www.w3.org/TR/WCAG21/
- https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
- https://www.w3.org/TR/WCAG20-TECHS/G1
Responsive Images is a small, private project. The author makes absolutely no claims and representations to warranties regarding the accuracy or completeness of the information provided. However, you can use the information in this repository AT YOUR OWN RISK.
This work (WCAG skip links, by Jonas Jacek), identified by Jonas Jacek, is free of known copyright restrictions.
Found a mistake? Open an issue or send a merge request. Want to help in another way? Contact me.