a11y: Tables and Borders
The past few weeks at work I’ve been working a lot with tables. I was testing for accessibility using VoiceOver when I ran into an interesting discovery.
To preface, tables can be categorized into two types: layout tables and data tables. Layout tables are used to position elements around (not really a thing anymore, thank God). Data tables are for presenting tabular data. In VoiceOver, a data table with proper markup will appear under the “Tables” rotor menu, as shown in the screenshot below.
To try this out, you can go to any page with a data table (such as this one), and press
cmd + f5 to activate VoiceOver. Hit
ctrl + alt + u to bring up the rotor, and use the left and right arrows to navigate to the Tables rotor menu.
The table that I was working on did not have any table headers by design, which is a no-no according to WebAIM’s guidelines. For this reason I totally expected VoiceOver to view my tables as a layout table, and that it would not appear in the Tables rotor menu.
To my surprise, the table did appear in the rotor menu! You can see for yourself in this CodePen and in the gif below.
I was a bit stumped, so I asked my coworker Dave for his thoughts. He suggested that maybe the border between the rows had something to do with it. So I went back to CodePen, removed the borders, and turned on VoiceOver. Lo and behold, the table no longer showed up in VoiceOver! CodePen demo here.
What about transparent borders?
Just for fun, Kyle wanted to see what would happen if you set the border’s colour to
transparent. Funny enough, tables with
transparent borders are still picked up by VoiceOver as data tables.
VoiceOver uses borders as a criteria to determine if a table is a data table or not. Thus you could have a data table without any headers, though that’s not recommended.
I’ve only tested this in VoiceOver in Chrome and Safari, but I’m curious to see if other screen readers such as JAWS behave in a similar fashion. Give me a shout or leave a comment if you know!
Shoutouts to Dave for his help and insights on this topic!
UPDATE: 02/07/2015: @handcoding on Twitter linked me to a couple of pages that explain how Chrome and Firefox determine if a table is a data table or a layout table. Well worth checking out, thanks Ashley!