What is the HTML for that link?
Are there errors in the browser console?
The html for the screen reader link is just inside the site-container div:<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'spacelift-products' ); ?></a>
Here is what is in my console:DevTools failed to load SourceMap: Could not load content for https://www.spacelift-theme.markhannondesign.com/wp-content/themes/spacelift-products/js/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
OK, on my test site, the skip to content link is
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
and this is the related CSS
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
Check the CSS for that class.
It looks OK to me:
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
Hello Steven, just letting you know I solved it. The problem turned out to be a missing “}” farther down in the CSS.
I am using the Underscores theme and fortunately the team that built it organized the CSS into sections. I deleted all the sections and replaced them one by one until the screen reader text reappeared.