WebAIM - Web Accessibility In Mind

E-mail List Archives

display: table - should we use it?

for

From: Justin Perry
Date: May 23, 2014 3:48AM

Hello,

I'm new to the list.

I've a particular component on which I'd like to utilise display: table and
display: table-cell to produce variable width columns with flexible heights
and full vertical alignment control. The layout doesn't represent tabular
data. The display: table property would be used to help style it in a
certain way.

A colleague of mine pointed me towards Roger Johansson's article where
Roger highlights some screen readers (NVDA and ORCA) announcing these CSS
tables as a real tables:
www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/

In my own testing on Roger's examples, using NVDA 2014.2 and JAWS 15 with
Firefox 29, (http://www.456bereastreet.com/lab/display-table) it only
announces the real table and treats the CSS tables as regular content.

So I'm wondering, is there any reason why we shouldn't be using
display:table?

Many thanks,

Justin