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>
?
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:
<ol>
implies that the data is ordered, which suits a list of dates/events in a timeline.<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:
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
}