What fresh hell is THIS now? - Patrick Lauke
Hey guys, looking for some advice if I may.
I run an open source responsive framework with which I have attempted to make everything accessible, I've probably missed stuff or made mistakes but I'm really trying my best.
I am struggling with one particular bit of functionality: A responsive table that emits a vertical format on smaller viewports. I simply cannot get my screenreader (NVDA on Windows) with any browser to associate the cells with the corresponding headers when the table is collapsed. I've tried combinations of id's, aria-hidden
+ " aria-labelledby
but that doesn't work.
Would you have any pointers you could offer as I am stuck?
The page with the demo is here. http://responsivebp.com/javascript/tablelist/
Resize your browser to see it collapse.
@JimBobSquarePants
I simply cannot get my screenreader (NVDA on Windows) with any browser to associate the cells with the corresponding headers when the table is collapsed.
I just tried it with JAWS and NVDA on latest Firefox, seems to read fine i.e. as I arrow through the header and the data cell content are announced
@MichielBijl @StommePoes Thanks, I gave role=grid
a try. Worked well with IE but it caused Chrome to skip the table entirely.
@stevefaulkner Yeah the cells themselves were logical. I was hoping to replicate what was read on full view as I found the readout confusing without scope
@StommePoes Testing further both Opera and Chrome skip with the additional role, Must be a Blink thing.
@stevefaulkner Adding relevant roles/attributes to define the table as a list would be fairly trivial. Rewriting anything else like changing the actual elements would be tricky though.
There's not really that much JavaScript involved populating the data-attributes. https://github.com/ResponsiveBP/Responsive/blob/45d81146bd23fd7792b5289438e3663c90cb189b/src/js/responsive.tablelist.js
OK, so a combination of id's on the column headers,aria-labelledby
, and aria-role=grid
works well with Firefox. It reads the titles before each cell which makes it really easy to follow IMO. Yay Firefox! (It does say the table has zero rows and columns though)
IE will announce the correct number of rows, columns, the position of each cells location in the table and its content in the correct order but not announce the header at any point. Opera and Chrome will announce the content in the correct order but no headers nor position.
I think setting the position as absolute in the CSS for the header is what throws everything off, I don't see another way of styling the elements though so I feel like I might have got it the best I can for now though with the new roles.
I can shout out and see if anyone volunteers, I don't get much input normally sadly.
No. There isn't, still learning this stuff tbh
That would be a very useful service yeah. User testing has been something sorely missing from every company I have worked for.
My framework is a one man show really. I've managed to get quite a few people to use it and it's got quite a healthy following considering it doesn't have a big company name to go along with it but as far as feedback or contribution goes it's very quiet. I'd like to think that is because it "just works" :wink: but I think it's much more likely that people just don't test stuff enough.
@dylanb Thanks for that.
Yeah I considered adding extra elements to ensure that the headers were read but I feel now that Chrome and Opera really need to do some catchup since I can get both IE and Firefox to read them. That second example I've actually used elsewhere http://responsivebp.com/css/tables/#overflow
Incidentally there's a bug in windows phone that breaks the scroll functionality on pages rendered right-to-left. Scrolling goes the wrong direction.
<button>
and style it like a link instead of using <a role="button">
?
<a role=“button”>
have any valid use cases?
<a role=“button”>
on its own isn’t keyboard accessible. You need to have a href
attribute or specify tabindex=“0”
for that. If you use a href
then it needs to go somewhere (it will still have a links context menu, so what happens if the user tries to open it in a new tab / window). If you use tabindex
you’ve got to make sure the expected keyboard behaviour is implemented. By the time you’ve done all that you might as well use a button.
<button>
:)
[Jonathan Yung, a11y] @Ian Pouncey: exactly! regarding:
so what happens if the user tries to open it in a new tab / window
that can be solved viapreventDefault()
, but I totally agree that if you spend all the effort to make it behave like a button, use a button!
<a role=“button”>
? I’m guessing the same applies to other elements other than <button>
to which you’ve bolted on the button
role
<a role=“button”>
is used in this case for progressive enhancement reasons: without JavaScript, the role=“button”
isn’t added and the link does in fact navigate somewhere, whereas with JavaScript, the element behaves as a button. Is this correct?
<a>
into a <button>
when it takes on that role?