mardi 31 mars 2015

How to markup data cell that also functions as row header in html5

I'm trying to create a semantically correct and accessible (WCAG 2.0) html5 data table. The first column contains data which also functions as a header for the row.


In html 4.01 / xhtml 1.0 I used to markup these cells as td with a scope attribute:



<td scope="row">


In html5 the scope attribute is no longer allowed on the td element. What would be the best approach for semantics and accessibility?



  1. markup the cells in the first column as th (the data aspect is lost?)

  2. markup the cells in the first column as td and loose the header aspect


I'm afraid that in the second scenario the table will be less accessible.


This situation got me thinking about data tables in general: in which situation would you use ONLY column headers? Because the nature of a data table implies a relationship between the data in the cells in a row. For accessibility, shouldn't the rows always get a header as well, to convey that relationship?


For example this table:



Principle | Corresponding guidelines
------------------------------------------------------------------------
Never leave a child unattended | 1, 3, 8
Always communicate what you are going to do | 4, 5, 6
Calm down before you take action | 5,9,13


Would you consider the cells in the first column (the principles) to be headers for the second column, or data cells? In other words: in what way would you markup this table?


Aucun commentaire:

Enregistrer un commentaire