Issue

Lack of skip links makes keyboard navigation tedious

Skip links are essential for keyboard users to skip repeated content and directly access the main content of the page. Without skip links, users may have to press the Tab key multiple times, approximately 15 times in this case, to access the main content of the page.

Suggestion

Add a skip link as the first focusable element on the page

I suggest creating the skip link using the same pseudo-button style as seen elsewhere on the page for the sake of visual consistency.

Suggested skip link implementation

Suggested skip link implementation

The recommended implementation would be to place this <a> element as the very first element on the page, or at least the first tab stop, and make it hidden until it receives focus. The href attribute of the link should ideally reference the id of the <main> element.

Please see the example code snippets below for reference.


<a href="#main" class="skip-link sr-only sr-only-focusable">Skip to content</a>
	...
<main id="main">...</main>

//hide until focused, but keep it discoverable for assistive technologies
.sr-only.skip-link{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
//on focus show it for everyone
.sr-only-focusable.skip-link:focus-visible{
	position: absolute;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	top: var(--default-gap);
	left: var(--default-gap);
}