Skip links are not focusable

How To
1

Hi, I am getting a “Skip links are not focusable” warning in Lighthouse.

I read the Bricks documentation and it says:

One of the key aspects of keyboard navigation is to have a visual hint of where the focus is. Bricks 1.3 introduces default CSS to style the :focus property.

You can set your own focus style under “Settings > Theme Styles > Typography > Focus Outline”. Although not recommended, if you want to remove this focus outline default, simply set it to “none”.

The links show in the code as:

Skip to main content
Skip to footer

with this css:

.skip-link, .link–skip {

position: absolute;

inset-block-start: 1rem;

inset-inline-start: 1rem;

transform: translateY(-250%);

I am guessing that Lighthouse doesn’t like the:

transform: translateY(-250%);

as if the link isn’t on the screen then it isn’t focusable…

I can find that css in the automatic-bricks.css stylesheet.

Is there a setting in Bricks for skip links? Any ideas to correct this warning please?

https://sctm4h5zdl.onrocket.site/

2

Can you maybe post a screenshot of that lighthouse warning? I have never seen this warning with my bricks sites (though i don’t use automatic-css).

One css issue you have on your site is that, your #brx-header has a z-index of 9999 aswell as the skip-links. because your header comes after the links in the dom, it overlaps them and you can’t see the skip links. maybe reduce the header z-index a bit then you will see the skip-links once you tab through your page :wink:

3

Thank you very much for the reply and good catch about the z-index. I have changed it as you suggested to:

#brx-header {
background-color: var(–v-header-color);
box-shadow: var(–v-header-box-shadow);
z-index: 999;
}

This fixes the visibility issue but I still get the same warning from Lighthouse in an Incognito window. Any ideas how to fix this warning please?

https://sctm4h5zdl.onrocket.site/template/header/

error
error1297×1298 227 KB