The checkout progress bar talks to screen readers

The checkout wizard has a four-step progress indicator at the top — Package, Details, Pay, Done. Sighted users see numbered circles connected by lines. The active step is filled with the service accent colour. Completed steps show a checkmark. Future steps are dimmed. Screen reader users get something different but equally clear. The component is a nav landmark with an aria-label of Checkout progress. Inside is an ordered list. Each step is a list item. The active step has aria-current set to step, which tells assistive technology exactly where you are in the sequence. A screen reader announces something like step 2 of 4, Details, current step. The connector lines between steps are marked aria-hidden because they are purely decorative. The checkmark SVGs on completed steps are inline and inherit the accent colour. The entire visual language — filled circles, dimmed circles, checkmarks, coloured lines — maps to a single CSS variable. A client checking out for a mixing package sees cyan progress. A client buying a software landing page sees purple. The component does not know which service it is rendering. It reads the accent from the page and adapts. Four steps, one ordered list, one aria-current attribute, one CSS variable. That is the entire accessible progress indicator.