Search code examples
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:

    • An ordered list <ol> implies that the data is ordered, which suits a list of dates/events in a timeline.
    • A data list <dl> uses term elements <dt> for holding the term/name and description elements <dd> for describing that term. Depending on the type of timeline, it could be argued that a year is the term, but are you describing it as a term? Most likely it's not being described but just used as a point in time for other data (think: x-axis).

    Furthermore, using an ordered list would mean:

    • Other developers (even in the CSS/JS) would know to respect the order, whether that be in the generation of those elements or in the styling, and get some insight into the data.
    • If you have an end user with a disability using a screen-reader, the reader can respect that order (think: cooking instructions).

    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
    }