fix(a11y-menu): add scroll margin to skip link target on homepage#1689
Open
knowler wants to merge 2 commits into
Open
fix(a11y-menu): add scroll margin to skip link target on homepage#1689knowler wants to merge 2 commits into
knowler wants to merge 2 commits into
Conversation
Contributor
|
2ac6c69 was deployed to: https://fred-pr1689.review.mdn.allizom.net/ |
Author
|
Some other affected routes:
There’s probably a better way to handle all of these rather than individual changes like this one. |
caugner
changed the title
caugner
requested changes
Jul 6, 2026
| .homepage { | ||
| display: grid; | ||
| grid-template-columns: var(--layout-no-sidebar-extended); | ||
| scroll-margin-block-start: var(--sticky-header-height); |
Contributor
There was a problem hiding this comment.
You could add this inside #content { … } directly to components/global/global.css instead, assuming it has no negative side-effects on content pages.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This adds some scroll margin to the “Skip to main content” target on the homepage (i.e.
#content), so that the target’s content does not scroll beneath the sticky header.Motivation
Relevant visible content is obscured when following the skip link and what’s visible is still important for keyboard users and even screen reader users.
Before video
Description: in Firefox a user navigates to the MDN homepage and tabs to the “Skip to main content” link, upon activation the hero content scrolls beneath the sticky header causing some of the target content to be obscured.
skip-link-before.mp4
After video
Description: in Firefox a user navigates to the MDN homepage and tabs to the “Skip to main content” link, upon activation the page scrolls slightly so that the ad is out of view, but the target content is not obscured at all.
skip-link-after.mp4
Additional details
As far as I can tell, this isn’t a problem on other pages.
Related issues and pull requests
Looked, but couldn’t find any.