html-listswai-aria

What type of list should be used for a timeline?


An online exercise I am doing gave as a solution for building a timeline an ordered list. I had constructed the timeline using a description list, since I thought it would look weird to have a number or letter preceding a year.

I think a description list looks better, but I'm wondering about WAI-ARIA: does it make sense for a timeline to be constructed as an ordered list so the progression is semantically logical as well as in appearance?

And, if so, is it possible to hide the ordinal indicator (i.e., letter, number) of the <ol>?


Solution

  • Like you've suggested, it's all about semantics. Without referring to a spec, it makes sense to use HTML elements that "suggest" to someone/something (developers/machines) reading the code directly that there's further meaning, in this case the data following a logical order.

    Other examples would be semantic elements introduced in HTML5 like <header>, <article>, <section>, <aside>, <time> or even older elements like <address>.

    Comparing your two options:

    Furthermore, using an ordered list would mean:

    So an ordered list is probably most appropriate, though don't lose sleep over your choice either, we're almost splitting hairs in this case.

    If you need to hide the ordinal indicator (be careful, some screen readers rely on it being visible, see comments) you can do that quite easily with CSS:

    ol { 
        list-style: none; // removes ordinal indicator 
        padding-left: 0; // removes the left-over space, if needed
    }