WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Data in tables or lists with accessibility and responsive design in mind

for

From: Bourne, Sarah (ITD)
Date: Feb 10, 2014 9:11AM

Ben,

I would suggest that you answered yourself in your question: "I am creating a list of links." If it's a list, it should be marked up as a list. And lists are certainly more flexible for multi-device design. You can use other elements inside of list items, and of course CSS. Exactly what you use is going to depend on what visual effects are needed.

But here's an example that would result in a stacked display, with default styling. (Note that this does not display the URL - screen readers will voice those, and the URL rarely provides enough value to make it worthwhile.)
<li>
<p><a href="URL-goes-here">Display title for link</a></p>
<p>This is a very useful resource for aspiring novelists</p>
<p>Posted 10 February 10, 2014</p>
</li>

If you don't like having all those <p> elements, you could use <span> instead:
<li>
<span><a href="URL-goes-here">Display title for link</a></span>
<span>This is a very useful resource for aspiring novelists</span>
<span>Posted 10 February 10, 2014</span>
</li>

The default styling would be inline, but you could use CSS to do any number of things from there: put the post date in italics, make the link title bold, put the comment on a new line and indent it, etc.

And of course you can go totally barebones and just use punctuation:
<li><a href="URL-goes-here">Display title for link</a>: This is a very useful resource for aspiring novelists. (Posted 10 February 10, 2014)</li>

I would use a table if there was more data, like maybe number of downloads, author, category, etc., or if you were giving the ability to sort.

Sarah E. Bourne
Director of Assistive Technology
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
<EMAIL REMOVED>
http://www.mass.gov/itd