RE: CSS display property and tables

Jesper Tverskov wrote:
" I would like to hear the Accessibility Community, if there is consensus about the use of the CSS display property and the table related values, “table”, “table-row” and “table-cell” for short."

If the purpose is to present content in a tabular layout, then it's probably better to use CSS. The display:; property is supported in all browsers, and most assistive technologies honour the property as well it seems.

The CSS2.1 spec does seem to indicate that using display:; with the table values should equate to the behaviour of HTML table markup [1]. In practice this isn't the case though - because the CSS does not cause a change to the underlying semantics of the content.

If you use HTML markup to present content in a tabular format, you're giving the content semantic meaning. The content is presented as a table by the browser's accessibility tree, so assistive technologies will treat it as semantic data.

Some screen readers do have their own heuristics for determining whether HTML tables are for layout or semantic purposes, but they're used as a method of last resort.

If there is no alternative to using HTML markup, you can put role="presentation" on the <table> element. This will stop the table semantics from being mapped to the accessibility API [2].

The thing to remember in either case, is that the content order is important. The content must make sense when read in DOM order. This is the problem with using any form of tabular presentation of content - it can be very difficult to make sure that the content flows in a logical reading order.

Léonie.

[1] http://www.w3schools.com/cssref/pr_class_display.asp
 [2] http://www.w3.org/TR/wai-aria/roles#presentation  

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

Received on Monday, 27 April 2015 09:36:15 UTC