It skips without problems, but does not move the focus of the TAB, so the next keypress takes you to the navigation menu - which is obviously not what’s needed.
The HTML alone DOES work. I have made a codepen and with just the HTML, it works fine.
Your Landscape version works on mobile, just load the page from that state, or refresh fro that state. You’re turning your phone from portrait to landscape and you expect the image to resize accordingly, but it doesn’t, the reason is that the image doesn’t have a width set. So on load it gets a default 100% but that isn’t reapplied when your turn your phone.
Hi @Jonathan_Holden, I’ve been having an issue with skip navs in Webflow too, but I think I may have finally found something that works.
Axess Lab has a great article on how basic skip nav links are breaking on mobile screen readers and has several solutions, which seems to solve the issue in Webflow too. https://axesslab.com/skip-links/
I’ve used the vanilla JavaScript solution on my last couple of projects, and as far as I can tell, it’s working as it should.
It works like this:
create a link with an id of “skip-link”
add an id of “skip-target” to your content section
add the following script to your project settings footer code:
Do you have any other accessibility tips for webflow? This job is too big for me alone, and, what with the new “community” vibe happening at Webflow, I think this is one we all need to build together.
Yeah, I’ve discovered a couple of tricks so far. Do you have a thread devoted to all accessibility hacks/workarounds? I can post my findings there so this thread doesn’t get too off-topic.