WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Judith Blankman
Date: Mar 21, 2017 2:16PM

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 REMOVED> >
Organization: Jepelsy
Date: Monday, March 20, 2017 at 7:03 PM
To: "Blankman, Judith A." < <EMAIL REMOVED> >, " <EMAIL REMOVED> " < <EMAIL 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.