WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG 2.4.7 and Sticky Navs

for

From: Brooks Newton
Date: Dec 16, 2022 2:07PM

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 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 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 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 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 REMOVED> >
>> >> wrote:
>> >>>> I typically fail it for 2.4.7
>> >>>> >> >>>> >> >>>> >> >>>> >> >>>>
>> >>> >> >>> >> >>> >> >>> >> >>>
>> >> >> >> >> >> >> >> >> >>
>> > >> > >> > >> > >>
>