5

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, 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.

Improve this question
1

3 Answers 3

Reset to default
6

I think you are answering yourself: if you don't need rows and columns, then you don't need a table.

The table could be responsive and accessible, but in this case it would be unnecessary. Maybe the best list you could use is a definition list that allows you to tag a title and a definition (the comment).

This would be the result (without any style): view on jsfiddle.

Improve this answer
2
  • While I love the semantics and concept of definition lists, note that--at least historically--they haven't been well supported by accessibility software such as JAWS (but that's not necessarily a reason not to use them, of course...)
    – DA01
    Commented Feb 10, 2014 at 19:09
  • I knew that the problem was solved in JAWS 6, but the problem seems to be the correct use of DL tag. For example, Lynx has problem when you write two descriptions for only one title (and according to the WCAG you have to write one description for one title because dt+dd is considered a unit).
    – panna
    Commented Feb 11, 2014 at 9:53
4

Actually I think it depends on how much items there is and how different they are. If there is between 1-10 links and their titles, urls and coments are going to have somewhat the same length then you could display them as a list.

But I don't think so, so you probably should use a table to increase readability. The fact is that your users are going to browse/scan your list and search for interesting things and a table make the eyes' work easier.

Below is an example of the kind of list you are talking about. Let's say the user is searching for an url.

enter image description here

Please note that this is mockup, there is lots of ways to design a nice table.

Improve this answer
4
  • 1
    For what reason would a table increase readability? Just because it is neater doesn't mean it is more readable. Personally I find the list example you give far more readable.
    – Alnitak
    Commented Feb 11, 2014 at 12:32
  • @Alnitak I edited my answer to make it clearer. Actually, tables makes the eye's work easier.
    – Gabin
    Commented Feb 11, 2014 at 15:17
  • Your diagrams make your point much clearer. However, a question about readbility still stands. Your "eyeline" diagram on the table illustrates that the URLs are more easily viewed as a block. Similarly, the eye can easily see other columnar data as a block. But would easy visibility of columns would better help the reader, or the rows? For me personally, I would prefer to see information relating to a particular link grouped together, i.e. I'm looking for row information, and I find that much easier not in the table.
    – Alnitak
    Commented Feb 11, 2014 at 15:26
  • 2
    Readability isn't necessarily the same as 'scannability'. It all comes down to what the priority is here.
    – DA01
    Commented Feb 11, 2014 at 16:15
2

When you said accessibility, do you mean just making easy to read or are you planning to cater to people with disability?

On making it look pretty and easy to read, list can be made to look like tables and vice versa - except of course if you plan to have columns with varying widths on every row then tables wouldn't be too good.

If you are however talking about accessibility in terms of disability, can I suggest you an article. It's a little old, I should say but nonetheless useful: http://snook.ca/archives/html_and_css/definition-lists-v-tables

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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