Reading · Moiety · RSS Amplifier

TL;DR Prevent your sticky header from obscuring your main content with some scroll-padding on the <html> element.

What we want to prevent: our heading being chopped in half by our sticky header.

What is a skip link?

A skip link lets keyboard users skip over groups of interactive elements. You can try this yourself on a lot of pages around the web—this one included! If you load this page and press the Tab key, your focus will be set to a skip link titled “Skip to main content”. Activating this link will move your focus to the main content and past the links in the navigation bar, no extra presses needed!

macOS Settings, Keyboard, Shortcuts, Use keyboard navigation to move between controls — Note: If you’re on macOS, you might need to enable the "Use keyboard navigation"-setting before you’re be able to focus controls (such as skip links)

Safari Preferences, Advanced, 'Press tab to highlight elements' indicated — Note: If you’re on macOS, you might need to enable the "Use keyboard navigation"-setting before you’re be able to focus controls (such as skip links)

Websites use this technique to make life a little bit easier for people who rely on keyboards or assistive technologies. Skip links use a function that’s built in to your browser. All that is required for a skip link is an anchor that points to an id on the page (like <a href="#main">) and an element with that id (like <main id="main">). Activating the anchor will move focus to the target element.

The big benefit is that your next press of the Tab key will set focus to the first focusable element (such as a link, button, or form field) within the target element. You’ve skipped over the repetitive focusable elements earlier in the page (such as those navigation links), hence the name.

The Result

If we did everything right, our heading (or other content) should no longer be chopped in half when we activate a skip link!

What we wanted to achieve: the newly focused content is visible in full; no more overlapping from the sticky header.

Browser Support

Seems to work everywhere except for Internet Explorer 11.

Couldn’t browsers calculate this for us?

The short answer is “probably not”—though wouldn’t that be a great feature to have?

The CSS Scroll Snap specification—which scroll-padding is defined in—mentions an auto value that might at first seem helpful, but it turns out that auto is merely scroll-padding’s default value:

[auto] indicates that the offset for the corresponding edge of the scrollport is UA-determined. This should generally default to a used length of 0px, but UAs may use heuristics to detect when a non-zero value is more appropriate.

The wording here means that while browsers are allowed to calculate scroll-padding values other than 0px, it means they almost certainly won’t.

With that in mind, your best bet is to specify scroll-padding values yourself. Who knows what the future might hold, though.

Short note on skip links with sticky headers