Skip to main content link

Design help Animations & Interactions
1

Reading everything I can find about links, skip etc on the Forums and University and the WWW, but can’t find a way to simply add a .

I would like the skip to go to the (only) H1 on the page.

How?

I’ve got my link at the top of the page, and I have a Heading.

I’ve given the Heading a role=“main” but that’s not creating any kind of anchor point to link to.

thanks!

Here is my public share link: https://preview.webflow.com/preview/jonathans-blank-site-71b734?utm_medium=preview_link&utm_source=designer&utm_content=jonathans-blank-site-71b734&preview=aa7262d9cfca903738221d1bc46a02a6&pageId=5d09249de2f0f22cee7d4d84&mode=preview
(how to access public share link)

2

I came to the same conclusion too. This is what I came up with:

var h1s = document.getElementsByTagName("h1");
h1s[0].id = "skipto";
document.getElementById("skip").href = "#skipto";

It assumes there is a button with id “skip”.
It renames the first h1 (should be 1 anyway)
Then sets the “Skip to Content” button’s href to the newly named h1 tag.

1 Like
3

interesting. where do you put this code? In the project settings??
I would think a link with id “skip” rather than a button (it’s called a skip link after all!)
I’d also name the H1 “main”, so we can “skip to main”

I like this a lot. Hopefully makes things easier to set up without having to remember to give the id on every page

Thanks

4

Yes, if you want to easily add it to all pages, then the footer code in project settings would probably be best.

5

What is the guidance on hiding it visually and have it hidden so that only screen readers can find it?
and how do you hide it via webflow?

6

hey… sorry for the slow response… it’s all about position. Set the position to a negative and it’ll be off the screen. on focus it should then be shown on screen

7

Thanks @Jonathan_Holden. I got it working!

8

That’s brilliant!!!

let’s see… (or not see, as it’s hidden… :wink: