What would be more accessible : Un-ordered lists or tables?

Question

I have a page listing the latest blog posts in a pretty standard format, you'd expect to see on any typical blog. At the foot of each post, I have a list showing 'views', 'comments' and 'shares'.

I have marked these up with UL and LI elements respectively. It's all great, but I am wondering if it could be improved / be more suited to a table; seeing as this could be seen as 'tabular data' and I am basically concerned with best practices here, especially with regards to accessibility and screen readers.

My current markup:

<ul class="post-stats">
<li><strong>28</strong> <small>Comments</small></li>
<li><strong>31</strong> <small>Views</small></li>
<li><strong>6</strong> <small>Shares</small></li>
</ul>

Answer 1

I recommend going with a list approach since as per your current code you are just providing the content in a linear order which can be read by a screen reader without issues. However if you did use Lists for indenting then, accessibility would become an issue as highlighted from the W3C guidelines

The HTML list elements DL, UL, and OL should only be used to create lists, not for formatting effects such as indentation.

With regards to using tables, though tables can be made accessible, You will need to follow some specific guidelines as highlighted below from this article on UX Movement :

Most tables are difficult for users to read. But they’re even more difficult for disabled users to read if they’re not screen reader accessible. When you make your tables accessible, disabled users will get the table information read to them in a proper, understandable order. Start your tables off with the summary attribute and tag. These elements give users an overview of the table contents. The summary attribute gives users a broad description of the table, and the caption tag gives users the title of the table. They’re the first thing that comes after the table tag. Designate your row and column headers using tags and data cells using tags. After that, you’ll need to associate the cells with the right headers. Use the scope attribute for this. The scope attribute tells the screen reader that everything under a column relates to the header at the top, and everything to the right of a row header relates to that header.

Since I dont see any scope of perhaps adding a summary tag or header attributes, you are better off using lists.

Answer 2

I'd say in general:

• Go with a simple unordered list when you only list single-dimensioned or unstructured entities.
• Go with a description list when you have structured name-value pairs for one entity.
• Go with a table when you list several structured entities that could be compared.

I guess the description list makes the most sense here, as the relation between label and value is explicitly given (instead of an unordered list) and you only list one entity and not the statistics of all posts (so a table would be overkill).

In HTML5, it should be done with the dl element (with dt and dd). Your example would look like:

<dl class="post-stats">
  <dt>Comments</dt>
    <dd>28</dd>
  <dt>Views</dt>
    <dd>31</dd>
  <dt>Shares</dt>
    <dd>6</dd>
</dl>

Thanks to that markup, user-agents (like screenreaders) could know that "Comments" is the term/name and "28" its corresponding value.

Answer 3

Basic question you should ask yourself: do you need rows and columns? Do you need some kind of cross-referencing and/or sortable on different properties of the individual items? In that case, use a table. Otherwise, use an unordered (or ordered) list.