The intent of screen reader text is to hide explanatory text that is not needed for a visual user.
The intent of skip links is for keyboard users, who may or may not be visual. Only certain elements are focusable with the keyboard, and skip links should not be visible unless focused.
Since you as a theme author don’t know what other elements might be added to the page by core or plugins, it’s best to keep the style generic, like core uses in the admin. The admin bar has some links that can be triggered by keyboard, and plugins can add other things.
Hi Joy,
Thanks for your reply. Guess you’re right.
The default snippet contains CSS that’s not the correct CSS for every element, such as left: 5px; and top: 5px;. Correct for the skip link, but may not be correct for other elements. That’s why I started to think about this..
Meanwhile I checked the Twenty Twenty-One stylesheet and this theme only adds :focus styling to the skip link (link).
Guido
With Twenty Twenty-One in mind I’ve decided to use this for my theme:
/* TEXT FOR SCREEN READERS */
.screen-reader-text {position:absolute; overflow:hidden; height:1px; width:1px; margin:-1px; padding:0; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); word-wrap:normal;}
/* SKIP TO CONTENT LINK */
.skip-link {top:0; left:0;}
.skip-link:focus {display:block; height:auto; width:auto; top:5px; left:5px; padding:10px; clip:auto; clip-path:none; background:#f8f8f8; z-index:100000;}
(my skip-to-content link has both classes, similar to the one in Twenty Twenty-One)
Guido
