Review Comment
A review comment presents user-submitted feedback — star rating, reviewer identity, date, and review text — in an accessible article landmark that exposes all metadata and interactive actions to assistive technology.
Demo
Navigate through the review comment below using your keyboard or screen reader. Notice how the reviewer's name, star rating, verified purchase status, and review body are all announced as you enter the review. Try activating the helpful or report actions and observe how they are labeled so users know their purpose without surrounding visual context.
What to Observe
- The review is wrapped in an article element with a meaningful accessible name so screen reader users can navigate between reviews using landmark shortcuts.
- The star rating is communicated as text (e.g., "4 out of 5 stars") rather than as five purely decorative star icons.
- The reviewer's name and review date are present as real text and appear in a logical reading order before the review body.
- A "Verified Purchase" badge, when present, is expressed as text so its meaning is not conveyed by color or icon alone.
- Interactive actions like "Helpful" or "Report" carry accessible names that include enough context to be understood when read out of the surrounding paragraph.
Anatomy
[Anatomy image placeholder — will be added when assets are available]
- Article container: The semantic wrapper for the entire review; its accessible name or heading ties the content together as a named, navigable region.
- Reviewer identity: The name or username of the reviewer, presented as visible text in the DOM so it can be read by assistive technology.
- Star rating summary: A text representation of the rating score (e.g., "4 out of 5 stars") that supplements or replaces the visual star icons.
- Review date: A machine-readable and human-readable date stamp that contextualizes when the review was written.
- Verified badge: A textual label indicating the reviewer's purchase was verified, not relying solely on a checkmark icon or green color.
- Review body: The main text content of the review, which may include a title and extended body paragraph.
- Action buttons: Controls such as "Helpful" and "Report" with accessible names that include sufficient context to be usable without surrounding prose.
Accessibility Behavior
- Each review is structured as an article with a heading or accessible name so screen reader users can jump between reviews using article or heading navigation shortcuts.
- The star rating uses a text alternative (e.g., "Rated 4 out of 5 stars") that is either visible or accessible to screen readers, ensuring the score is always communicated.
- The verified purchase status is expressed as text so it is not conveyed by icon or color alone, which would be inaccessible to users with color-vision differences or those using high-contrast mode.
- Review dates are marked up using the time element with a machine-readable datetime attribute so assistive technologies and tools can interpret the date correctly.
- Action buttons such as "Helpful" have accessible names that include the review's author or title (e.g., "Mark Sarah's review as helpful") so users know exactly what they are acting on.
- The reading order of the article flows naturally: author, rating, date, badges, review title, review body, actions — matching the visual layout without relying on CSS positioning tricks.
Common Mistakes
- Representing the star rating only as a row of star SVG icons with no text equivalent, leaving screen reader users with no indication of the rating value.
- Marking the "Verified Purchase" badge as a purely visual icon or color-coded label without an accessible text description.
- Labeling action buttons as simply "Helpful" and "Report" when multiple reviews appear on the same page, making them indistinguishable from one another by screen reader users navigating by button.
- Using a generic div as the review container rather than an article element, preventing users from navigating the review list using landmark or article shortcuts.
- Placing interactive actions before the review content in the DOM so keyboard users must Tab past buttons before they can read the review they relate to.
Why This Matters
Customer reviews are a primary trust signal in online shopping — many users read them before deciding whether to purchase a product. A screen reader user who cannot determine a review's star rating, who cannot identify whether the reviewer is a verified purchaser, or who cannot tell which review a "Helpful" button refers to is denied the same social proof that sighted users rely on. When reviews are inaccessible, users with disabilities must make purchase decisions with less information, which is both inequitable and a business risk.
Accessibility Validation
This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.
To learn more, please contact us.
Code
Absolutely love these headphones! The noise cancellation is top-notch and the battery lasts all day. Comfortable enough to wear for hours during work.
Great sound quality for the price. My only complaint is that the ear cushions could be a bit softer. Otherwise, a solid choice for everyday listening.
Decent headphones for casual use. The Bluetooth connection drops occasionally when I move more than 10 feet from my phone. Sound quality is okay but not premium.