How to markup an obscure data table layout for screen readers?

Tags: html,css,html5,accessibility,screen-readers

Problem :

I have the following design I am required to markup, the layout of which I cannot modify:

Complex table layout with datapoints arranged vertically per item 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:

  1. Semantic
  2. 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:

  1. 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.
  2. 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.
  3. I have considered using hidden row-ths and rowspans to create a more complex table layout and trying to use ARIA to get the desired screen reading results, all to no avail.
  4. 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.

Solution :

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.

    CSS Howto..

    How to make CSS border on an image? [closed]

    How to add row highlight using html, css, and javascript?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to toggle multiple images in jquery?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    using a simple list item
  • what am I doing wrong. background color doesnt show up
  • How to align columns in bootstrap to center?

    jQuery hide/show issue with offset

    How to set max-width for DIV contents but not the DIV itself?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to load jQuery before CSS code?

    How to use css in

    How to set CSS class file to a Menu item control

    How to get a list of valid values for a CSS property with javascript?

    How to add css to modules in prestashop 1.5?

    How to style DOM element with CSS that was created with JavaScript function

    How to segment a circle with different colors using CSS

    css code how to put the navigation in the middle

    How to change the css of child and subchild menu's border together

    How to animate an image as it grows from the width of a container to the full viewport width?

    How to make div layer unselectable in jquery and css

    How to push content div to footer div while keeping background in the picture

    Since KB2898785 IE6 doesn't load locally-sourced CSS for a page delivered remotely--how to correct?

    How to Style Similar to an Exam Questi-n

    How can I wrap this text so it doesn't overflow past the widget container?

    ASP.NET How to set Text to the right side of image

    How to disable the letter tail from the last letter of a word in CSS?

    How to align lists and text side by side with div tags?

    how to make html table first row 'absolute'