Skip Link

A Skip Link or Skip to Main link allows keyboard or other accessible device users to skip past the Navbar and other navigation elements to go immediately to the main content of a page. You can read more about the Skip Link on WebAIM

The Skip link should be the first navigable link on a site so that it is the first keyboard focusable item. You can find it on this page as the first item of the header in the navigation tree.
‍

Unlike many other accessible components the Skip Link can be created entirely in the webflow styles panel without any custom code.

For this demo it is wrapped in Skip to Main Link component. The skip-to-main-content-link is set to position absolute. The positioning and style will vary depending on your design but it should be placed somewhere easy to see with a high z-index.

It is styled using two states. The None or base and the focused (keyboard) For the None state it visually is hidden from the page. One way to do this in webflow is to set height and width to 1px , opacity to 0% and Events to None. It is important to only visually hide it not set display to none as that will prevent it from being tabbable on page load.

For the focused(keyboard) state you can style the link however you want it to appear. Remember to set opacity to 100% and Events to auto.
‍

Lastly you need to set your main content Landmark HTML tag and add tabindex = -1 to custom attributes. Then you can set the skip-to-main-content-link to the page section based on the ID. You will know it is setup properly when you publish the page. Upon page load the link will not be visible but when you hit tab the skip link will appear on the page. If you press enter or space bar you may see the page scroll slightly to main section. If you hit tab again the first link in that main section should be in focus, bypassing your navigation menu or any other elements before the <MAIN> tag. Setting the tabindex to -1 also allows you to browse the content in the main landmark with arrow key.