Screen reader text is visible

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.



Source link