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


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of ben jarlett
Sent: Monday, February 10, 2014 10:11 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Data in tables or lists with accessibility and responsive design in mind

Hi, I am creating a list of links which have the following in them:

- link title and url
- a comment about the link
- a date that the link was posted

I wish to do this using accessible best practice, but also would like to avoid using tables because I'd like to keep the site responsive
(mobile/tablet/desktop) - and although you can create accessible tables and responsive tables I'm not sure that you can have a responsive and accessible table.

There is an answer
here<http://ux.stackexchange.com/questions/34588/what-would-be-more-accessible-un-ordered-lists-or-tables>;,
but it doesn't fully help me. It states helpfully that "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."

For my example I'm not giving the user an opportunity to sort the data, and as for cross referencing I'm not sure if this applies - but am happy to take advice on that.


Thanks - Ben

--


-------------
<EMAIL REMOVED>
benjarlett.co.uk <http://www.benjarlett.co.uk>;
07734 970739