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?

9

This is still appearing on Safari on 2025 with bouncy-scroll.

Not sure what is the purpose of those buttons there, but shouldn’t be more clean to disable this feature by default and give an option on settings for those who really need it?

10

No, it’s the other way around:

11

Disable skip links, on Bricks > Settings doesn’t turns off the button. I’m the only one?

12

I’m seeing the skip links on iOS Chrome having scrolled the page down (which hides the address bar) then quickly swiping back to the top. Should be fixed out of the box IMO.

13

Hi Jamie,
Can you provide a live link?

14

Thanks for the link via DM. I can see the issue after some back-and-forth. As an intermediate fix,
add this to Bricks » Settings » Custom Code » Custom CSS:

.skip-link {
  all: unset;
}

.skip-link:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

This unsets all default styles and adds new styles with a different approach (taken from Bootstrap 5.3).

15

I am Netscape Navigator and IE 4.0 old, TiL about the all CSS property :laughing:

Thanks for the visually hidden workaround. Will that be something that’s added upstream?

16

Hi guys,

We fixed this issue in Bricks 2.0 alpha (hopefully once and forever), now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.