Skip link: HTML works fine, but not working on webflow page

[Jonathan_Holden]

I have set up a “skip to main content” WCAG Bypass Block

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.

However, in Webflow it does not work. The next TAB press takes you back to the menu.

Live site is: https://wfsg2.webflow.io/test-skip

---

Here is my site Read-Only: https://preview.webflow.com/preview/wfsg2?utm_medium=preview_link&utm_source=designer&utm_content=wfsg2&preview=6f56064d9d71ad264033e2edf8743089&pageId=5e58acbb1c2c9310b0d15489&mode=preview
(how to share your site Read-Only link)

[vincent (Vincent Bidaux)]

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.

Add width:100% to the image itself.

[Jonathan_Holden]

Hey @vincent… I think you dropped that in the wrong place…

[Kellie]

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:

document.getElementById('skip-link').addEventListener('click', function(e) {
  e.preventDefault();
  var target = document.getElementById('skip-target');
  target.setAttribute('tabindex', '-1');
  target.focus();
});

I made a clonable project example too. Hope that helps.
https://webflow.com/website/skip-link

[Jonathan_Holden]

Fantastic!! It’s working!!!

I’ll add it to my blog too, if that’s ok… a11y.webflow.io

[Kellie]

Yay, glad that helped! Totally ok with me if you add to your blog. The more a11y resources for Webflow the better.

[Jonathan_Holden]

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.

[Kellie]

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.