How to markup an obscure data table layout for screen readers?
I have the following design I am required to markup, the layout of which I cannot modify:
Please ignore the filler text, I know it doesn't make much sense.
I opted for a table, as it feels 95% table-like. But I'm stumped when it comes to the appropriate semantic markup for the layout of the data points underneath each item. Each point is distinct i.e. this isn't freeform text, and placed in the same relative position every time - but it breaks the traditional data table layout as there are no assigned headers or labels rendered for these points. I am interested in marking up such a layout so that it is both:
- Properly available to modern screen readers (I know some older screen readers have various bugs, but much like older browsers, I don't think it's fair to restrict better/newer techniques for deprecated software).
I have encountered this problem numerous times over the past few years, and finally cracked and turned to the community for advice. I have tried:
- Using separate
tbodys for each item, and there within using a second row for the extra data points, but gave up when I couldn't figure out how to associate the "subrow" with the item.
- Laying out the table with all the various data points and headers horizontally, and then using CSS to position things. Unfortunately, contrary to my earlier statement about deprecated software, I need to support IE 7 and this technique fails.
- I have considered using hidden row-
rowspansto create a more complex table layout and trying to use ARIA to get the desired screen reading results, all to no avail.
- I have also considered using nested tables, but that just feels very, very wrong.
Any help appreciated.
Note: Rendering this to display cross-browser isn't really that hard - I am interested in how to make this semantic and accessible.
Broadly speaking, I'd have a table with 1 header row and 6 data rows, with the odd data rows having 3 cells, and the even data rows having one cell spanning the three columns.
Inside the even rowed cells, I'd have a
<h?> element for the "lorem 102" line and a list for the detail points. On the
<td> element of the even rowed cells, I'd have a
headers attribute to point to the first cell of the row above, to provide the association from the subrow to the item.
I might well include a
<caption> element or a
summary attribute on the
<table> element to describe the structure as well.
UPDATE: having seen Jasper de Vries's answer, I realise I omitted to cover the delete column. Just follow his advice for that.