HTML Code
The html.html.twig file contains the visually hidden hyperlink that will jump to the main content area, thus bypassing all marketing and navigation elements in the header.
<body>
<a class="skip_link" id="skip_to_content" href="#page_main_content">{{ 'Skip to Main Content'|t }}</a>The page.html.twig file contains the
<!-- Page -->
<div class="page_inner js-page-inner">
{% if layout != "home" %}
{% include directory ~ "/templates/partials/sticky-header.twig" with { page: page } %}
{% if page.feature %}
<div class="page_feature">
{{ page.feature }}
</div>
{% endif %}
{% else %}
<main id="page_main_content" itemprop="mainContentOfPage">
.......
.....
</main>
CSS Code
.skip-link {
font-family: 'Montserrat',sans-serif;
font-weight: 700;
cursor: pointer;
text-align: center;
display: inline-block;
background: #EAEAEA;
color: #666666;
-webkit-transition: background .25s,color .25s;
transition: background .25s,color .25s;
display: block;
position: absolute;
top: 0;
left: 50%;
z-index: 100;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
-webkit-transform: translate(-50%,-200%);
transform: translate(-50%,-200%);
-webkit-transition: -webkit-transform .35s;
transition: -webkit-transform .35s;
transition: transform .35s;
transition: transform .35s,-webkit-transform .35s;
}
.skip-link:focus {
-webkit-transform: translate(-50%,40px);
transform: translate(-50%,40px);
background: #CCCCCC;
color: #333333;
}