Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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>
share|improve this question
    
We can't help you with actual markup, UX is technology agnostic. However we can give advice about what you should be doing. What does it actually look like currently on the front end (i.e. do you have a mockup?) What exactly is the problem with the way you have done it? What are you trying to convey? –  JonW Feb 12 '13 at 13:54
3  
@JonW I just re-read his question and I think it belongs here since it deals with accessibility which is indeed part of user experience. –  Mervin Johnsingh Feb 12 '13 at 14:59
2  
Yea, while UX is technology agnostic, it's very much tied to technology and, on the web, markup. –  DA01 Feb 12 '13 at 16:10
    
I think the markup you have is fine. The only adjustment I would make is to use something other than strong and small for the (presumably) font styling (use span for instance). strong and small will give voice inflection that isn't desirable here). –  steveax Feb 13 '13 at 17:50
add comment

3 Answers

up vote 8 down vote accepted

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.

enter image description here

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

share|improve this answer
    
What he has there is a list, whether the styling indents them or not is irrelevant. The W3 note you reference is talking about using list markup for something that doesn't fit a list semantically purely to provide the indentation that lists get by default. –  steveax Feb 13 '13 at 17:56
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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