Project Milestone Patterns

Milestone Timeline

A static milestone timeline shows Plan, Build, and Review with Review marked current, without live milestone feeds or timers.

Program

Milestone timelines should show planning progress and the current step without pretending to stream a live project feed.

milestone_timeline_step.html
Visuals: captured from real browser rendering
<section class="milestone-timeline" aria-labelledby="timeline-title">
  <h2 id="timeline-title">Beta review timeline</h2>
  <ol>
    <li>Plan</li>
    <li>Build</li>
    <li aria-current="step">Review</li>
  </ol>
  <p class="status">Current step: Review</p>
  <p class="note">Static milestone timeline only; no live milestone feed, project API, timer, routing, or analytics runs.</p>
</section>
<style>
  .milestone-timeline { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .milestone-timeline ol { display: grid; gap: 8px; margin: 0; padding-left: 1.5rem; }
  .milestone-timeline [aria-current="step"] { font-weight: 700; background: #dbeafe; padding: 4px 8px; }
  .status { border: 1px solid #60a5fa; background: #eff6ff; padding: 8px; }
  .milestone-timeline p, .note { margin: 0; }
  .note { color: #475569; }
</style>

  1. Label the milestone timeline.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Use an ordered list for milestone steps.

    The ordered list shows sequence.
    The ordered list shows sequence.

  3. Show the Plan step.

    The first step is fixed display data.
    The first step is fixed display data.

  4. Show the Build step.

    The second step is fixed display data.
    The second step is fixed display data.

  5. Mark Review as current.

    aria-current marks the current static step.
    aria-current marks the current static step.

  6. Show the current-step readback.

    The status sentence names the current step.
    The status sentence names the current step.

  7. Check timeline honesty.

    Pinned steps, current readback, and no live project feed.
    Pinned steps, current readback, and no live project feed.
ordered steps Plan, Build, and Review are pinned timeline steps.
current step aria-current marks Review as the current step.
no live feed The lesson should not imply live milestone feeds, project APIs, timers, routing, or analytics.