Mark up an accessible order journey

Represent an order's chronological journey as a labelled ordered progression with dates, one current step, and explicit state text.

EasySemantic HTML

30 min0% acceptance

Description

Represent an order's chronological journey as a labelled ordered progression with dates, one current step, and explicit state text. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Contain the complete journey in one main landmark and one visibly labelled challenge-item section.
Use an ordered list with at least four chronological journey steps.
Give each step a visible name and a time element with a valid datetime value.
Mark exactly one current list item with aria-current step.
Include visible Completed, Current, or Upcoming text for every step.
Associate a tracking reference and carrier detail with the journey without using a layout table.

Current shipment

Input

Shipped is the active stage

Expected output

Only Shipped has aria-current step

Explanation

Contain the complete journey in one main landmark and one visibly labelled challenge-item section.

Screen reader

Input

Read the list from the heading

Expected output

Steps, states, and dates are encountered chronologically

Explanation

Use an ordered list with at least four chronological journey steps.

Constraints

Use native semantic HTML before adding ARIA
Keep every required label and state available as visible text
Do not use scripts, images of text, or layout tables

Hints

Hint 1

Start with the single-main-landmark behavior and make its observable result deterministic.

Hint 2

Model ordered-journey independently before combining it with the remaining states.

Hint 3

Verify the boundary described by tracking-details without changing caller-owned input.

HTMLordersprogress semantics