Archived topic
element for Skip to content produces HTML validation error
6 replies · Started by Charles on April 29, 2021
I recently updated to GP Premium 2.0.1 and I noticed that my posts now contain a <script> element inside the page's <body> with styles pertaining to the "Skip to content" link. Thus when the post is submitted to W3.org's HTML Validator, it reports the following error:
Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
From line 355, column 3; to line 355, column 31
/div>↩↩↩ <style id="skip-link-styles">↩ .sk
Contexts in which element style may be used:
Where metadata content is expected.
In a noscript element that is a child of a head element.
Content model for element body:
Flow content.
Can this style element be moved to the head?
Hi there,
Is this an Element you've added? If so, you should be able to simply change the hook to wp_head instead of where it's at now.
That Element isn't standard in GPP/GP.
Let us know :)
Thanks for the quick response! I'm also recently updated Gutenberg, maybe it's responsible for the new element.
Here is the full text of the style element that is causing the problem:
<style id="skip-link-styles">
.skip-link.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;
}
.skip-link.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
</style>I found this exchange in the support forum that pointed me in the direction of GeneratePress's screen reader functionality:
https://generatepress.com/forums/topic/screen-reader-text/
It turns out my posts contain the following link that gets styled by the problematic style element:
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
While removing the generate_do_skip_to_content_link action per the above forum thread does indeed remove this screen reader link, the style element remains.
Are there third party plugins that style the GP "skip to content" link?
Are there third party plugins that style the GP “skip to content” link?
The theme, GB or GPP doesn't add that.
The way to find out if it's from a plugin is to disable ALL plugins and see if its still there.
Can you disable all plugins except GP Premium and check?
Thank you, I disabled Gutenberg and it went away.
Nice one. Glad you got it sorted.
