Skip links jump to other parts of the page and should be the first interactive elements to enable users with assistive techologies to jump straight to the content they're interested in.
Skip links are simply Hyperlink Controls pointing to a control on the page with a specified Id.
It's common practice to hide skip links from view until they have the focus (i.e. until someone tabs to them). This way the aesthetic of the page is unaffected but keyboard-only users can still use the links.
Using display:none or visibility:hidden also hides elements from screen readers, so to hide a skip link some CSS trickery is required. For example:
.skip-link {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.skip-link:focus, .skip-link:active{
clip: auto;
height: auto;
overflow: visible;
position: static;
white-space: normal;
width: auto;
}
Bootstrap provides screen reader visibilty classes sr-only and sr-only-focusable to achieve the same effect.
While it isn't necessary to use skip links if you're using Landmark Containers, it can help your users to navigate more efficiently.
If your page doesn't use Landmark Containers or skip links, your page will fail an accessibility audit.