WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Nathalie Sequeira
Date: Feb 10, 2014 8:59AM

Hi Ben,

> 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)

being a great fan of the DL, to me it sounds like it could be a good
solution for your requirements.
As in:

<dl>
<dt>link title and URL</dt>
<dd>comment about the link</dd>
<dd>date posted</dd>
</dl>

You can style this into table-ish format for large screens and fallback
on a more listy display in your smaller responsive layouts,
while always having the semantics of each link being a unit with main
and sub-information.

HTH
Nathalie