3

I'd like to display tabular data (an order summary) in a vertical table (headings in the left column, values to the right). In my use case, there is only ever one data set to display, so I'm unsure whether HTML tables are the right choice here.

Pros: tables establish a clear, machine-readable semantic relationship between description and value and also envelop related values in a single context.
Cons: it's just one data set, so not exactly my definition of data (the plural noun).

So what other options do I have? Definition/description lists seem feasible, though I would not categorize the data as "definitions". Otherwise, I'd just resort to using heading elements. Any other recommendations?

My question's main focus is web content accessibility.

Improve this question
3
  • you mean is only 2 columns and one row?
    – Devin
    Commented Jun 21, 2023 at 17:44
  • My data has a few fields/columns (e. g. 5) but only one row. It's just displayed as keys/columns left, values right.
    – Patrick Nemenz
    Commented Jun 22, 2023 at 8:39
  • I missed the vertical table part and the 2 columns. I'd just use a list, it will look the same as a table minus the lines, so it will be cleaner and easier to manipulate, no tot mention you won't have mobile issues. A different (yet similar) approach is to use a Description list for accessibility concerns, see w3.org/TR/WCAG20-TECHS/H40.html
    – Devin
    Commented Jun 22, 2023 at 15:15

1 Answer 1

Reset to default
4

"headings in the left column, values to the right"

Something like this?

enter image description here

<table>
  <tr>
    <th scope="row">row header 1</th>
    <td>some value 1</td>
  </tr>
  <tr>
    <th scope="row">row header 2</th>
    <td>some value 2</td>
  </tr>
  <tr>
    <th scope="row">row header 3</th>
    <td>some value 3</td>
  </tr>
</table>

Even if you only have a few rows, it's still quite helpful for screen readers to have a table structure. As I navigate vertically down the right column, the row header will be announced before the data cell, "row header 2, some value 2", so that gives a nice user experience.

I would avoid definition lists, <dl>/<dt>/<dd>, because they're announced differently with different screen readers. If you had 3 pairs of definitions, some screen readers will say you have a list with 3 items and others will say there are 6 items (they count both the dt and dd as separate list items). And when you navigate with the i key to move to the next list item, sometimes you can only navigate to the dt elements. Semantically, a definition list would be great to use but because of the varying support with screen readers, it's not a good idea.

<dl>
  <dt>row header 1</dt>
  <dd>some value 1</dd>
  <dt>row header 2</dt>
  <dd>some value 2</dd>
  <dt>row header 3</dt>
  <dd>some value 3</dd>
</dl>

And you can always keep it simple (not that tables aren't simple) and have heading and value pairs.

<h3>row header 1</h3>
<p>some value 1</p>
<h3>row header 2</h3>
<p>some value 2</p>
<h3>row header 3</h3>
<p>some value 3</p>

From a pure accessibility perspective, I would recommend the table approach.

Improve this answer
1
  • +1 I would definitely avoid definition lists. In the last example, instead of <p> you can use a list (ul, ol) when there are multiple items/fields/values that fall under the same header.
    – jazZRo
    Commented Jun 23, 2023 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.