WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG 2.4.7 and Sticky Navs

for

From: Sandy Feldman
Date: Dec 15, 2022 5:38PM

hey Jerra,

You may be able to fix it using css that takes that space the navigation
occupies into account.

Examples:

.container {
scroll-margin-top:185px;
}

html {
scroll-padding-top:185px;
}

I hope that helps,

Sandy
https://sandyfeldman.com
https://www.a11yready.com


On 2022-12-15 6:58 p.m., Jerra Strong wrote:
> Hello All,
>
> Weird question, may need help from some experts.
>
> When tabbing through a page with a sticky navigation, as focus moves down
> the page, if you try to go "backwards" at some point with Shift-tab,
> elements in focus may be obscured by the navigation bar. This only happens
> in some browsers. For example, on the Bootstrap website (link 1 below), if
> focus moves past the small links titled "Download", " v4.6.x docs" and "All
> Releases", until they are pushed off screen, when you try to go back to
> them on chrome, they are focused in the middle of the screen, but if you
> try to repeat this progress in Firefox, the focused item "All Releases"
> will hide behind the nav bar.
>
> My Team's questions are:
>
> - Is this a violation of WCAG 2.4.7 (Focus Visible)?
> - If not, will it be a violation of the upcoming 2.4.12 (Focus not
> obscured)?
> - Are there any good ways to fix this?
> - Is this something we should report to the firefox devs?
>
> Additionally, we would like to get a sense if any sighted keyboard users on
> this list have encountered this issue, how big of a usability issue is it,
> any complaints or any strategies you would use in this case?
>
> [1] Test Site https://getbootstrap.com/
> [2] WCAG 2.4.12
> https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum
> > > >