E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 9 (In chronological order)

From: Jerra Strong
Date: Thu, Dec 15 2022 4:58PM
Subject: WCAG 2.4.7 and Sticky Navs
No previous message | Next message →

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

From: Sandy Feldman
Date: Thu, Dec 15 2022 5:38PM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

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
> > > >

From: Glen Walker
Date: Thu, Dec 15 2022 6:06PM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

I typically fail it for 2.4.7

From: Jerra Strong
Date: Fri, Dec 16 2022 9:42AM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

Thanks for responding.

Glen, would every site with a sticky nav fail 2.4.7 in Firefox then? Any
recommendations?

On Thu, Dec 15, 2022 at 5:06 PM Glen Walker < = EMAIL ADDRESS REMOVED = > wrote:

> I typically fail it for 2.4.7
> > > > >

From: Graham Armfield
Date: Fri, Dec 16 2022 10:29AM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

Dear All,

Re fixing this, I've had success using scroll-margin-top and
scroll-margin-bottom (as appropriate) in CSS but I've put those items on
interactive elements in the tab order rather than the nav or a cookie
banner etc.

So in my CSS I'd have:

a:link, button, input, select, textarea (and anything else that can receive
focus)
{
scroll-margin-bottom: 5em; (choose suitable values based on the size of
your sticky content areas)
scroll-margin-top: 5em;
}

Now when you tab around the screen the browser will always pull the element
into view.


Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
@coolfields <https://twitter.com/coolfields>


On Fri, 16 Dec 2022 at 16:42, Jerra Strong < = EMAIL ADDRESS REMOVED = >
wrote:

> Thanks for responding.
>
> Glen, would every site with a sticky nav fail 2.4.7 in Firefox then? Any
> recommendations?
>
> On Thu, Dec 15, 2022 at 5:06 PM Glen Walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> > I typically fail it for 2.4.7
> > > > > > > > > >
> > > > >

From: Brooks Newton
Date: Fri, Dec 16 2022 1:10PM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

This is great advice for content authors to avoid getting visual focus
indicators mostly trapped underneath sticky navs. Thank you Sandy and
Graham.

Is there any chance we could get user agents who have not already built
this functionality into their browsers to commit to making these changes in
their software to take this off of the content owners' ever-growing lists
of accessibility tasks?

Many thanks to the browser manufacturers who have already incorporated this
feature, which supports keyboard (and keyboard-like) navigation of content
by scrolling focused content into view and out from underneath sticky
navigation zones on the page.

Have a Great Weekend,

Brooks

On Fri, Dec 16, 2022 at 11:30 AM Graham Armfield <
= EMAIL ADDRESS REMOVED = > wrote:

> Dear All,
>
> Re fixing this, I've had success using scroll-margin-top and
> scroll-margin-bottom (as appropriate) in CSS but I've put those items on
> interactive elements in the tab order rather than the nav or a cookie
> banner etc.
>
> So in my CSS I'd have:
>
> a:link, button, input, select, textarea (and anything else that can receive
> focus)
> {
> scroll-margin-bottom: 5em; (choose suitable values based on the size of
> your sticky content areas)
> scroll-margin-top: 5em;
> }
>
> Now when you tab around the screen the browser will always pull the element
> into view.
>
>
> Regards
> Graham Armfield
>
> coolfields.co.uk <http://www.coolfields.co.uk/>;
> @coolfields <https://twitter.com/coolfields>
>
>
> On Fri, 16 Dec 2022 at 16:42, Jerra Strong < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Thanks for responding.
> >
> > Glen, would every site with a sticky nav fail 2.4.7 in Firefox then? Any
> > recommendations?
> >
> > On Thu, Dec 15, 2022 at 5:06 PM Glen Walker < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> > > I typically fail it for 2.4.7
> > > > > > > > > > > > > > >
> > > > > > > > > >
> > > > >

From: Graham Armfield
Date: Fri, Dec 16 2022 1:33PM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

Brooks, if your question was about browser support for scroll-margin-top
(and bottom) then I'm fairly certain that all current major browsers
support it. See https://caniuse.com/?search=scroll-margin-top and
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top#browser_compatibility

Sandy, thanks. 8-)

Regards
Graham Armfield
coolfields.co.uk <http://www.coolfields.co.uk/>;
@coolfields <https://twitter.com/coolfields>


On Fri, 16 Dec 2022 at 20:22, Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:

> you are very welcome Brooks. Graham, I like your CSS!
>
> best regards,
>
> Sandy
> https://sandyfeldman.com
> https://www.a11yready.com
>
>
> On 2022-12-16 3:10 p.m., Brooks Newton wrote:
> > This is great advice for content authors to avoid getting visual focus
> > indicators mostly trapped underneath sticky navs. Thank you Sandy and
> > Graham.
> >
> > Is there any chance we could get user agents who have not already built
> > this functionality into their browsers to commit to making these changes
> in
> > their software to take this off of the content owners' ever-growing lists
> > of accessibility tasks?
> >
> > Many thanks to the browser manufacturers who have already incorporated
> this
> > feature, which supports keyboard (and keyboard-like) navigation of
> content
> > by scrolling focused content into view and out from underneath sticky
> > navigation zones on the page.
> >
> > Have a Great Weekend,
> >
> > Brooks
> >
> > On Fri, Dec 16, 2022 at 11:30 AM Graham Armfield <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Dear All,
> >>
> >> Re fixing this, I've had success using scroll-margin-top and
> >> scroll-margin-bottom (as appropriate) in CSS but I've put those items on
> >> interactive elements in the tab order rather than the nav or a cookie
> >> banner etc.
> >>
> >> So in my CSS I'd have:
> >>
> >> a:link, button, input, select, textarea (and anything else that can
> receive
> >> focus)
> >> {
> >> scroll-margin-bottom: 5em; (choose suitable values based on the
> size of
> >> your sticky content areas)
> >> scroll-margin-top: 5em;
> >> }
> >>
> >> Now when you tab around the screen the browser will always pull the
> element
> >> into view.
> >>
> >>
> >> Regards
> >> Graham Armfield
> >>
> >> coolfields.co.uk <http://www.coolfields.co.uk/>;
> >> @coolfields <https://twitter.com/coolfields>
> >>
> >>
> >> On Fri, 16 Dec 2022 at 16:42, Jerra Strong < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>
> >>> Thanks for responding.
> >>>
> >>> Glen, would every site with a sticky nav fail 2.4.7 in Firefox then?
> Any
> >>> recommendations?
> >>>
> >>> On Thu, Dec 15, 2022 at 5:06 PM Glen Walker < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>>> I typically fail it for 2.4.7
> >>>> > >>>> > >>>> > >>>> > >>>>
> >>> > >>> > >>> > >>> > >>>
> >> > >> > >> > >> > >>
> > > > > > > > >

From: Brooks Newton
Date: Fri, Dec 16 2022 2:07PM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | Next message →

Hey Graham,

That's good info, on CSS browser support for scroll-margin-top and
scroll-margin-bottom. Thanks for sharing those links.

What I was getting at in my last note was native browser support for
pulling underlying focused content out from underneath sticky nav content
as users Tab or Shift+Tab through content without the need for applying
extra CSS.

Ultimately, that functionality seems to be within the scope of what a user
agent could handle on its own without the application of any specific CSS
on the part of content authors. Am I wrong? Would content authors need to
apply existing or new markup on sticky nav zones that would provide
necessary help to browsers handling this function in all content, format,
display scenarios?

I haven't thought through all of the contexts that might pose special
challenges for browsers to handle this function. Admittedly, I'm getting
outside of my lane of technical competence on this topic. Which is why I'd
love to hear what you and others think about this prospect.

Later,

Brooks

On Fri, Dec 16, 2022 at 2:33 PM Graham Armfield <
= EMAIL ADDRESS REMOVED = > wrote:

> Brooks, if your question was about browser support for scroll-margin-top
> (and bottom) then I'm fairly certain that all current major browsers
> support it. See https://caniuse.com/?search=scroll-margin-top and
> https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top#browser_compatibility
>
> Sandy, thanks. 8-)
>
> Regards
> Graham Armfield
> coolfields.co.uk <http://www.coolfields.co.uk/>;
> @coolfields <https://twitter.com/coolfields>
>
>
> On Fri, 16 Dec 2022 at 20:22, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> you are very welcome Brooks. Graham, I like your CSS!
>>
>> best regards,
>>
>> Sandy
>> https://sandyfeldman.com
>> https://www.a11yready.com
>>
>>
>> On 2022-12-16 3:10 p.m., Brooks Newton wrote:
>> > This is great advice for content authors to avoid getting visual focus
>> > indicators mostly trapped underneath sticky navs. Thank you Sandy and
>> > Graham.
>> >
>> > Is there any chance we could get user agents who have not already built
>> > this functionality into their browsers to commit to making these
>> changes in
>> > their software to take this off of the content owners' ever-growing
>> lists
>> > of accessibility tasks?
>> >
>> > Many thanks to the browser manufacturers who have already incorporated
>> this
>> > feature, which supports keyboard (and keyboard-like) navigation of
>> content
>> > by scrolling focused content into view and out from underneath sticky
>> > navigation zones on the page.
>> >
>> > Have a Great Weekend,
>> >
>> > Brooks
>> >
>> > On Fri, Dec 16, 2022 at 11:30 AM Graham Armfield <
>> > = EMAIL ADDRESS REMOVED = > wrote:
>> >
>> >> Dear All,
>> >>
>> >> Re fixing this, I've had success using scroll-margin-top and
>> >> scroll-margin-bottom (as appropriate) in CSS but I've put those items
>> on
>> >> interactive elements in the tab order rather than the nav or a cookie
>> >> banner etc.
>> >>
>> >> So in my CSS I'd have:
>> >>
>> >> a:link, button, input, select, textarea (and anything else that can
>> receive
>> >> focus)
>> >> {
>> >> scroll-margin-bottom: 5em; (choose suitable values based on the
>> size of
>> >> your sticky content areas)
>> >> scroll-margin-top: 5em;
>> >> }
>> >>
>> >> Now when you tab around the screen the browser will always pull the
>> element
>> >> into view.
>> >>
>> >>
>> >> Regards
>> >> Graham Armfield
>> >>
>> >> coolfields.co.uk <http://www.coolfields.co.uk/>;
>> >> @coolfields <https://twitter.com/coolfields>
>> >>
>> >>
>> >> On Fri, 16 Dec 2022 at 16:42, Jerra Strong < = EMAIL ADDRESS REMOVED = >
>> >> wrote:
>> >>
>> >>> Thanks for responding.
>> >>>
>> >>> Glen, would every site with a sticky nav fail 2.4.7 in Firefox then?
>> Any
>> >>> recommendations?
>> >>>
>> >>> On Thu, Dec 15, 2022 at 5:06 PM Glen Walker < = EMAIL ADDRESS REMOVED = >
>> >> wrote:
>> >>>> I typically fail it for 2.4.7
>> >>>> >> >>>> >> >>>> >> >>>> >> >>>>
>> >>> >> >>> >> >>> >> >>> >> >>>
>> >> >> >> >> >> >> >> >> >>
>> > >> > >> > >> > >>
>

From: Guy Hickling
Date: Fri, Dec 30 2022 3:03PM
Subject: Re: WCAG 2.4.7 and Sticky Navs
← Previous message | No next message

This is also needed for Cookie banners, and the like (where the sticky
cookie banner might take up more height in addition to the sticky menu, and
is often coded at the end of the page where keyboard users can't easily get
to it). I used to recommend adding CSS top and/or bottom margins to the
main content area, of the same height as the sticky content, but that still
has problems when the user is using different text sizes. It looks like
Graham's solution of scroll-margin-top/bottom is much easier, and more
robust. I'm going to try it out.

As to convincing the browsers (e.g. Firefox) to change, good luck with that
one! I put in a bug report to Firefox a few years back, on a matter where
Chrome and Edge did it right but FF were inaccessible. They thought about
it for a month then just closed it. And the problem with asking for changes
like that is there are lots more browsers besides the mainstream ones, so
you can't get them all to change. Whereas if we use existing CSS methods
like scroll-margin-*, most of the browsers will hopefully catch up
eventually :-)