WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG 2.4.7 and Sticky Navs

for

From: Graham Armfield
Date: Dec 16, 2022 1:33PM

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