WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to code for 'accessible sticky header'?

for

From: Judith Blankman
Date: Mar 20, 2017 6:50PM

Dredging this one up again because I'm in a position to have to specify this now. It seems like the discussion below understood the sticky header to be a masthead on the page.

The implementation I'm working on will be for a comparison table, where there is a persistent column header row that doesn't move. It's placed as content placed in the body of a page. The page itself has a typical masthead, footer, right rail.

This will be responsive - on desktop, tablet and smartphone.

My understanding that the best way to code this is to build a table that screen reader users will access, using semantic markup. The sticky header lays over that visually but will not be read by a screen reader.

I'm still unsure how to make this work for sighted keyboard-only users. They still need to be able to tab through the page content. I assume their focus could land on the visible header row (where there is an 'remove from the comparison- button) and then be able to move to any other focusable elements.

Best,

Judith Blankman

From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Jonathan Avila < <EMAIL REMOVED> >
Reply-To: " <EMAIL REMOVED> " < <EMAIL REMOVED> >
Date: Monday, March 6, 2017 at 7:32 AM
To: " <EMAIL REMOVED> " < <EMAIL REMOVED> >, "Badhan Subramanian, Poornima" < <EMAIL REMOVED> >
Subject: Re: [WebAIM] How to code for 'accessible sticky header'?

I would maintain the sticky header in the same place in the DOM for consistency and to satisfy Consistent Navigation in WCAG.

I have two additional comments. Make sure any sticky headers aren't too large or can be dismissed as some headers can overtake the screen when users with low vision zoom in. Secondly, if the sticky header has functions that may need to be used frequently elsewhere on the page it may be difficult for people who rely on the keyboard to get to that sticky header and thus they may lose the benefit of it being there. Perhaps provide a keystroke to access the header without scrolling the page.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
See you at CSUN in March!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.