WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Mar 6, 2017 8:32AM

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


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas
Sent: Monday, February 27, 2017 11:51 AM
To: <EMAIL REMOVED> ; WebAIM Discussion List
Subject: Re: [WebAIM] How to code for 'accessible sticky header'?

Hi Poornima, is this for a mobile/responsive site? If so, keep in mind how obtrusive it is for a person exploring by touch. I would maintain the sticky header in the same place in the DOM for consistency and to satisfy Consistent Navigation in WCAG.

For the code, a simple <header> element that contains your header content will do. That will satisfy a portion of Bypass Blocks as it is a landmark. Add your navigation using a <nav> element. If you have multiple <nav>s, then add an aria-label to each describing their purpose. The CSS you'll maintain has position: fixed on the container though I'm sure you've already thought of this.

Ensure you have proper visual focus indication to satisfy Focus Visible and that you haven't broken the Focus Order by abusing tabindex, etc.

I hope this helps!

Nick

--
Nick Beranek
Digital Accessibility Team

On 2/27/17, 2:39 PM, "WebAIM-Forum on behalf of Poornima via WebAIM-Forum" < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> > wrote:

I came across a question from our design team on the 'sticky header'? I am learning how the sticky header (the header which will remain same for all the screens of web site) can be coded to be accessible. Please suggest any technical recommendations you came across for this type of header.

Poornima Subramanian




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.