No Skip Link . this is bad practice.
Skip links, also known as bypass links, are used to bypass content that repeats on multiple websites like navigation. Without a skip link, keyboard users are required to pass through reoccurring focusable elements on every page.
Look at this example!
With Skip Link . this is ok practice.
Using a skip link, users reliant on keyboard navigation can simply skip to the main content of the webpage without having to manually move through navigation and other repeated elements.
To achieve the jump, we need to give our main-Element or similar node an ID,
create an appropriate anchor element as the first focusable of the website, and
set the ID, prefixed with a pound symbol (),
as the href of the skip link anchor.
Look at this example!
Visually Hidden Skip Link . this is best practice.
To not visibly interfere with our layout, we can make the skip link visually hidden
by default and clearly visible when focused. Make sure to not use
display: none, visibility: hidden or the hidden attribute
as they make the element non-focusable and remove it from the accessibility tree.
Do try navigating with the tab key to see the block now or .
Look at this example!