E-mail List Archives

Search E-mail List Archives for

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

From: Poornima
Date: Mon, Feb 27 2017 12:39PM
Subject: How to code for 'accessible sticky header'?
No previous message | Next message →

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

From: Beranek, Nicholas
Date: Mon, Feb 27 2017 12:50PM
Subject: Re: How to code for 'accessible sticky header'?
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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.

From: Jonathan Avila
Date: Mon, Mar 06 2017 8:32AM
Subject: Re: How to code for 'accessible sticky header'?
← Previous message | Next message →

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

From: Judith Blankman
Date: Mon, Mar 20 2017 6:50PM
Subject: Re: How to code for 'accessible sticky header'?
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of Jonathan Avila < = EMAIL ADDRESS REMOVED = >
Reply-To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Date: Monday, March 6, 2017 at 7:32 AM
To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >, "Badhan Subramanian, Poornima" < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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.

From: JP Jamous
Date: Mon, Mar 20 2017 8:03PM
Subject: Re: How to code for 'accessible sticky header'?
← Previous message | Next message →

If I understand you correctly, that button won't be seen by anyone. Sighted or blind. Correct?

You can use disabled="disabled" and that would disable the button.

If you want the button to be pressable,, but want to skip over it, your only way is a JavaScript. It would jump from the focusable object before it right to the one after it. You can design that script in many ways.

From: Judith Blankman
Date: Tue, Mar 21 2017 2:16PM
Subject: Re: How to code for 'accessible sticky header'?
← Previous message | Next message →

The button will be present on both layers of the table.

The sticky header is basically a separate column header row that has a 'remove from comparison- button which will remove an entire column from the table. I assume that the way to deliver this is to make the entire separate table element will be hidden from screen readers, which would also hide the button that is part of the content of that column header.

The full table lies beneath the sticky header. It's column header row will have that same functionality. It will simply present to screen reader users as one table, not a layering of two tables.

Make sense?

From: JP Jamous < = EMAIL ADDRESS REMOVED = >
Organization: Jepelsy
Date: Monday, March 20, 2017 at 7:03 PM
To: "Blankman, Judith A." < = EMAIL ADDRESS REMOVED = >, " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Subject: RE: [WebAIM] How to code for 'accessible sticky header'?

If I understand you correctly, that button won't be seen by anyone. Sighted or blind. Correct?

You can use disabled="disabled" and that would disable the button.

If you want the button to be pressable,, but want to skip over it, your only way is a JavaScript. It would jump from the focusable object before it right to the one after it. You can design that script in many ways.

From: Jonathan Avila
Date: Wed, Mar 22 2017 7:53PM
Subject: Re: How to code for 'accessible sticky header'?
← Previous message | No next message

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

Judith, right now I think this is the most widely supported approach. In some combinations of browsers and AT you can now use the aria-owns attribute to pull the separate data table rows into the other separate table that contains the headers -- but I have not tested this approach beyond the latest JAWS and IE.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Download our CSUN Presentations Here!

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.