Review Display Patterns

Rating Summary

A static review rating summary shows a pinned average, review count, text star visual, and no review aggregate or backend service.

Program

Review display should show the rating, count, and visual cue without implying a live aggregate service.

rating_summary_display.html
Visuals: captured from real browser rendering
<section class="rating-summary" aria-labelledby="rating-title">
  <h2 id="rating-title">Review rating</h2>
  <p><strong>4.6 out of 5</strong></p>
  <p aria-label="4.6 out of 5 stars">Stars: ****-</p>
  <p>18 reviews</p>
  <p class="note">Static rating summary only; no review aggregate or backend service runs.</p>
</section>
<style>
  .rating-summary { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .rating-summary p, .note { margin: 0; }
  .rating-summary [aria-label] { letter-spacing: 1px; font-weight: 700; }
  .note { color: #475569; }
</style>

  1. Label the rating summary.

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

  2. Show the rating heading.

    The heading tells users this is review display.
    The heading tells users this is review display.

  3. Show the pinned average.

    The average rating is exact deterministic lesson data.
    The average rating is exact deterministic lesson data.

  4. Show the text star visual.

    The text visual gives a simple rating cue without external assets.
    The text visual gives a simple rating cue without external assets.

  5. Show the pinned review count.

    The count is fixed and easy to compare with the summary.
    The count is fixed and easy to compare with the summary.

  6. Check rating honesty.

    Pinned average, count, text stars, and no backend service.
    Pinned average, count, text stars, and no backend service.
average rating The average is pinned text, not a live aggregate.
review count The count is fixed lesson data.
star text The star visual is text with an accessible label.