Site logo

[Resolved] element for Skip to content produces HTML validation error

Home Forums Support [Resolved] element for Skip to content produces HTML validation error

Home Forums Support element for Skip to content produces HTML validation error

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1756215
    Charles

    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?

    #1756220
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1756331
    Charles

    Thanks for the quick response! I’m also recently updated Gutenberg, maybe it’s responsible for the new element.

    #1756374
    Charles

    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?

    #1756530
    Elvin
    Staff
    Customer Support

    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?

    #1756632
    Charles

    Thank you, I disabled Gutenberg and it went away.

    #1756759
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.