Timeline

An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come.

Press Add an event: it is stamped in above the pen. The dotted rail below the pen is what is still to come.

• It is an ordered list, so a screen reader says how many events there are and which one it is on. Each time is a <time datetime>.
• A lamp is state and nothing else, and it is given a spoken name (role="img" and an aria-label such as “Failed”); the ticks and rails are hidden from assistive technology.
• The pen is aria-current="time", so “Now” is said where it stands in the list.
• The dotted rail after the pen is not the only sign that events are still to come: they follow the pen in the reading order, and their text is a step quieter, still above 4.5:1.
• With aria-live="polite" on the list, an appended event is read out when it arrives without pulling focus.
• With reduced motion a new event simply appears; nothing is lost.