Skip Link for Drupal 9 on UMassp.edu

HTML Code

The html.html.twig file contains the base layout for all content types.  Just inside the body field the following code allows that skip link to render:

<a href="#main-content" class="visually-hidden focusable skip-link">
  {{ 'Skip to main content'|t }}
</a>

The page.html.twig file contains the structural elements of each page including the "Main" div and the bookmark that skip link is linking to.

<div id="main" class="{{ container }}">
    <a id="main-content" tabindex="-1"></a>
 	.......
 	......
 </div><!-- end main -->

CSS Code

Multiple classes make the skip link appear on keyboard tab and style the link so that it stands out visually.

.skip-link { 
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 50;
	background: #444;
	background: rgba(0,0,0,0.6);
	font-size: 0.94em;
	line-height: 1.7em;
	padding: 1px 10px 2px;
	border-radius: 0 0 10px 10px;
	border-bottom-width: 0;
	outline: 0;
}

.visually-hidden {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	width: 1px;
	height: 1px;
	word-wrap: normal;
}	

.skip-link.visually-hidden.focusable:focus { 
	position: absolute !important;
	color: #fff;
	overflow: visible;
	clip: auto;
	width: auto;
	height: auto;
}

The focus outline is overridden in the custom UMass theme for all elements but then specifically changed for items in the header as the green is not enough contrast against the blue.

*:focus { outline: 2px solid #148071; }
  a.skip-link:focus { outline: 2px solid #D72FE1; }