Role and semantics
Section titled “Role and semantics”Timeline is an ordered list (ol); name it with aria-label or aria-labelledby. When dateTime is given, the time is inside <time datetime>. Markers and the rail have aria-hidden; tone is not read, so the outcome must be in the title.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | To links and buttons inside events; the list itself takes no focus. |
Timeline does not move focus. If new events need announcing, use a status region.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| List | “History, list, 4 items” |
| Event | “Release stopped Now A check failed.” |
Contrast
Section titled “Contrast”Title and description have 4.5:1, the time 4.5:1; markers are decoration, so the 3:1 rule does not apply.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Timeline meets it | What product teams must do |
|---|---|---|
| 1.3.1 Info and relationships | An ordered list and time elements. |
Name the list. |
| 1.4.1 Use of colour | Tone is decoration only. | State the outcome in the title. |