The page does not contain a heading, skip link, or landmark region

This is one of the easiest automated test to pass with Webflow. Technically, it is possible to fail this criteria by not using Headings (Add Elements (A) > Typography > Heading. But I can't really imagine it. If you use a heading, that's all you need to pass.

But using landmarks (or regions) is also helpful to  users of assistive tech to quickly move around the page. Webflow > Element Settings (D) > Tag Skip links help to avoid repetitive content such as menus.

‍

Skip links

A skip link helps users, especially screen readers users, to avoid having to listen to the whole menu on every page. They are also useful for people who navigate using the keyboard.

Note that skip links are particularly useful where there are multiple navigations (such as in Newspaper pages) or with mega-menus. If you only have a small menu a skip link is not essential.

‍

‍

When you're binge watching Netflix, do you always watch the intro credits? Or do you skip them and keep watching your programme?

Imagine you're listening to a website, using a screen reader. Do you really want to have to hear every menu item when you open a new page? Or touch your way through the menu with a braille reader?

If you add a skip link to your website, people who use assistive technology can miss out the menu every time and get straight to the main content.

On this site, I have a permanently visible skip link. This is because some people who zoom in a lot to see the page can find the skip link visually. Some people prefer to hide the skip link until the TAB key is pressed.

In the WCAG guidance, this technique is known as a bypass block, because it helps a user to bypass blocks of repeated content.

Webflow tips

Huge thanks to Kellie Kowalski for digging around and finding working code.

‍

In Webflow we need a little bit of code to make a skip link.

In the Project Settings > Custom Code > Footer Code add this:

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

‍

• The Element main is the anchor point (place on the page) that you want to skip to. This should be the main content of the page.
• The Element skip-link is the link on the page. Often this is hidden above the page and can only be seen when someone uses the keyboard.
• The skip-link should say something like Skip to main content. This is standard but could be changed to Jump to main content or Jump to main or what works for your site.

In the Element settings you must set the ID to main. You have to do this on every page for the skip link to work.

Hiding the skip link

Take a look at Paul Ryan's post on CSS tricks How to create a "skip to content" link.

What could Webflow do?

Webflow could create a skip link element. It could be part of the Nav Bar, but would be better as a stand alone element. Variables would include link text and anchor name for the ID. Forcing a named ID on every page would be useful too, to make sure it's not forgotten.

‍