In the generated HTML markup, I can see a there is a style for a skip link. However, there is no actual skip link present.
Do we have to build our own skip link? Is it intentional? Or does Cwicly theme come with skip link pre-configured but I can’t see it?
Hi there @Dev.tomi,
The styling is part of WordPress generated classes → The CSS class screen-reader-text – Make WordPress Accessible
The reason you might not see any skip link appear in the markup is because it relies on a <main> tag. If no <main> tag is present in the markup, the skip link is not added.
Hope that helps!
Thank you @Louis ,
once I set the <main> tag, I now see the skip link.
There is, however, an issue with where it is located. It should be the first thing/link on a website that user can navigate to with keyboard. But it is showing below the header, which is not very good for accessibility reasons.
User should be able to skip to the main content immediately, without needing to go through the whole <header>
Indeed! Might I ask if that is a global fragment you are using for the <header>?
Yes, it is a global fragment.
Thanks.
Since the WordPress script uses the class .wp-site-blocks to insert before, it will appear after the global header.
Moving this to bugs as this is an issue with our Global Fragments, thanks for bringing it up!
Apologies for the inconvenience.
No worries, I am glad to be able to participate in the development through this way.
Just wanted to chime in to say thanks for bringing up this issue. I’m learning accessibility bit by bit, and this just added to the knowledge I have now.
