RE: CSS display property and tables

From: jesper.tverskov@gmail.com [mailto:jesper.tverskov@gmail.com] On Behalf Of Jesper Tverskov
Sent: 14 May 2015 08:18
Thanks again Léonie, I believe your analysis to be true but...

The most important for me is a final evaluation of the the CSS display property with table values in an accessibility context. Is this a very nice trick we should promote?

Using this test case:
http://ljwatson.github.io/test-cases/css-tables/case.html 

It turns out that Firefox exposes the table semantics through both IAccessible2 and MSAA, but neither Internet Explorer or Safari (on OS X) exposes the semantics.

NVDA seems to be the only screen reader that acknowledges the table semantics in Firefox. It doesn't announce the presence of the table, but it does make all table navigation commands available, and announces table cell co-ordinates when you use those commands.

Am I right, that using the display property to transform DIV or e.g.
LIST elements into a table, is exactly the same as using a table of design and put in the role="presentation" attribute? The same end result? More or less?

Except for Firefox, yes. In other browser/screen readers, using CSS display:; is the same as using an HTML layout/design table with role="presentation". In Firefox/NVDA, using a CSS display:; table is the same as using an HTML layout/design table without role="presentation".

Is using a table of design with role="presentation" the preferred method when a table of design is considered necessary as an exception to the rule of only using table for data?

I still haven't heard a convincing reason for an HTML layout/design table to be necessary, but leaving that aside for the moment...

Or do you consider turning DIV or LIST elements into tables using the display property a very elegant and attractive and less confusing alternative that we should promote to the world of web designer?

If designing something from scratch, I'd suggest using CSS to control the layout. It protects the separation of design from structure, and that's a good general principle to follow.

Or should we, as I believe, stick to the role="presentation" method and completely forget about the other one?

HTML layout/design tables are most often found in legacy code, where it isn't feasible to re-build it from the ground up. In these cases, using role="presentation" makes the most sense because it achieves the desired accessibility outcome in a pragmatic way.

Another problem with using HTML layout/design tables, is that they don't play well on mobile. If the table includes more columns than can reasonably be viewed on a mobile screen, it causes horizontal scrolling - or for the content to be rendered so compactly it's unreadable. 

It is possible to build in responsive behaviour to handle the problem, but that's harder to do if your base markup uses <table> and not <div>.

Léonie.


-- 
Léonie Watson - Senior accessibility engineer
@LeonieWatson @PacielloGroup PacielloGroup.com

Received on Thursday, 14 May 2015 09:45:26 UTC