Streaming live at 10am (PST)

Skip link works.... but focus does not set to main content


#1

I can get skip link to work, but when I continue to TAB, focus goes back to the Nav bar. I want it to move on to the next link (a hyperlink in the text) .

How?
tried onfocus, but not allowed!

Project link https://mdl.webflow.io

Here is my public share link: https://preview.webflow.com/preview/mdl?utm_source=mdl&preview=0a526b5485ae73dca5b0372e6238e743

thanks to you all

(how to access public share link)


#2

Could you please share a published link to your project? It would be easier to review with devtools in a browser.


#3

webdev

thanks for the reply, I’ve added the link in the op.


#4

Try moving your jump to main content link to be the first child of #header>container so it sits as the first link on the page. That is really where it belongs to do its job. When clicked (enter on keyboard) it will take the user to the anchor destination. Moving it up to the top makes it the first tab, then to the brand link , then menu items, etc… Tabs will follow the source order of your content.

So if you really wanted it to tab flow from it to some content (below your nav) you have to change the source order. You can’t control that behavior any other way.

Here is a good resource for Skip Navigation Links

https://webaim.org/techniques/skipnav/


#5

So I’ve moved things about, but obviously I can’t move the main content above the Nav Bar!

The webaim site was my first port of call, and I feel the problem is somewhere here:

Blockquote Browser Quirks

“Skip navigation” links are such a simple concept that it’s hard to believe there would be any browser quirks in implementing it, but there are. Some browsers do not fully support in-page links. While they may visually shift focus to the location of the target or named anchor for the “skip” link, they do not actually set keyboard focus to this location. These bugs can potentially be addressed by using JavaScript to set focus (using JavaScript focus() ) to the target element.

Blockquote

I haven’t found a useful resources from Webflow on how I might implement that.


#6

Actually if you use css grid you can have the content anywhere you want with any source order you wish.

I would like to see a list of these.