SOLVED: Skip to main content and Skip to footer links show in public site

Bugs
1

Bricks Version: 1.3
Browser: Chrome 91
OS: Windows
URL: https://www.larenaissance.ro/

Why are these 2 links present on my frontend page? What are they and how can I remove them? They show up on the frontend before all the CSS and JS is loaded, which in my case it’s loaded on User Interaction so they are visible until a mouse moves or touch on smartphones.

Here is the HTML code of the links in question which shows up right after the <body> element in my frontend HTML:

<a class="skip-link" href="#bricks-content-wrapper" aria-label="Skip to main content">Skip to main content</a>
<a class="skip-link" href="#bricks-footer-wrapper" aria-label="Skip to footer">Skip to footer</a>

image
image1920×1095 421 KB

2

Hello @cristianuibar

Since Bricks 1.3 we introduced a11y improvements. One of these are the skip to content links.

They are suppose to not show unless you press the tab key, but unfortunately I do see that in your site they appear due to the way you setup the CSS load.

As a quick workaround, please add the following snippet to your child theme in order to avoid rendering the skip links:

<?php
// Do not render skip links
add_action('init', function() {
    remove_action( 'bricks_body', [Bricks\Theme::instance()->frontend, 'add_skip_link'] );
});

We’ll probably add a setting to Bricks settings on coming release.

1 Like
3

Thank you. That worked perfectly.

4

I encounter a similar problem with my test setup (mostly unstyled bricks default demo page)

Screen Shot 2022-05-17 at 16.58.01
Screen Shot 2022-05-17 at 16.58.011920×1564 219 KB

The “Skip to main content” isn’t visible by default, but it will peek through above the navigation with Safari’s bouncy scroll animations when reaching the very top of the page.

My main concern with this is that the element seems to get inserted BEFORE the header instead of AFTER the header. Doesn’t this defeat the whole purpose of skipping to main content? Absolutely nothing will be skipped this way. The header is sticky and created using the header template in bricks.

With this implementation I can very well deactivate it using the script above. But I’d love to actually support this accessibility feature.

Screen Recording 2022-05-17 at 17.10.22

5

Hey faebe,
you can disable the skip links in the Bricks Settings :wink:

Alternatively you can override the CSS and just use a high negative value for top:

.skip-links {
top: -1000px; /* maybe with !important */
}

Best regards,
timmse

Bildschirmfoto 2022-05-17 um 18.53.18
Bildschirmfoto 2022-05-17 um 18.53.181250×444 55.4 KB

6

Thanks for pointing out the settings option – I wasn’t aware!
However, I’ll try to move it off screen visually like you recommended to keep the functionality. Might also be a thing that could probably be done by default I guess. By default the skip-link class already has a negative y-axis transform of -102% that will be removed on focus to bring it into view for screenreaders:

.skip-link {
background: #000;
border-bottom-right-radius: 8px;
color: #fff;
font-weight: 700;
left: 0;
padding: 5px 10px;
position: fixed;
top: 0;
transform: translateY(-102%);
transition: transform .3s;
z-index: 9999;
}

Screen Recording 2022-05-18 at 08.58.17

Instead of using the “top” position, I’d recommend increasing the existing translateY to 200% or even more. This will preserve the screenreader focus functionality:

skip-link {
transform: translateY(-200%);
}

Best regards :slight_smile:

7

Hi Faebe,
of course it works like this.

Since Safari is the only browser with bouncy-scroll feature (as far as I know) and currently only has a market share of about 8.87%, you might not want to take it as a basis for default values. But hey, the fix is easily implemented :slight_smile:

Best regards,
timmse

8

Hi all,

I personnally use this on my other sites:

a.skip-to-content {
   display: inline-block;
   color: var(--link);
   background: var(--white);
   padding: var(--button-padding);
   position: absolute;
   left: -99999rem;
   z-index: 99999;
}
a.skip-to-content:focus-visible {
   left: 0;
}

Maybe an horizontal offset would solve the issue for good?