ItemlumePRODUCT CREATIVE / PRODUCTION AND HANDOFF
Why Does My Store Read Five Separate Stars Instead of One Product Rating?
First determine whether the stars display an existing rating or let customers submit one. Five decorative images representing one score should communicate that score together. An interactive rating control instead needs selectable options, accessible states, and keyboard support. The two experiences require different implementations.
Identify the Rating's Actual Purpose
A product page may show five stars to represent an existing average rating. That display is read-only: customers are not selecting a value.
A leave-review interface has a different purpose. Customers choose a rating, and the interface must communicate which choices are available and which value is selected.
Do not infer a verified rating from the number of visible stars. Confirm the actual score and its scale against the store's approved review data.
Decision branch: If the stars only report a score, treat them as one information unit. If customers can select a score, implement an accessible input control.
Give Static Stars One Meaningful Description
W3C Technique G196 addresses adjacent images that jointly communicate one piece of information. Its example assigns an equivalent text alternative to one image and null alternatives to the remaining images.
For a verified three-out-of-five rating displayed using five adjacent star images, the combined meaning is 'Rated 3 out of 5,' not five unrelated announcements.
This is a documented technique, not the only possible implementation. A suitable single accessible text representation can also communicate the score without requiring five separately announced decorations.
Decision branch: If assistive technology announces individual decorative stars instead of the rating, review how the complete score is exposed.
Treat Review Submission as an Interactive Control
The W3C APG Radio Group Pattern provides a reference for interactive single-choice ratings. A radio group needs an accessible name, named options, and a checked state, with no more than one option checked.
Outside a toolbar, Tab moves into or out of the group, Space checks the focused option, and arrow keys move between options while checking the newly focused choice.
Native radio behavior can differ in certain cases, including reverse Tab navigation into a group with no selected option.
Do not apply decorative-image techniques blindly to interactive buttons. Removing their accessible names or roles would make the controls harder to understand.
A visual star graphic alone does not establish a working rating input.
Illustrative Exercise: Two Merchant Handoffs
Illustrative exercise — fictional interfaces, not executed browser or screen-reader tests.
Input A displays an approved static rating of three out of five. The handoff should specify one meaningful rating announcement and no misleading interactive role.
Input B is a leave-review control with five possible choices and initially no selection. The handoff should specify its group name, option names, initial states, and expected keyboard interaction.
Decision branch: Validate score accuracy and unified meaning for A; validate selectable roles, states, and keyboard behavior for B.
Record the actual browser and screen-reader observations during later testing. This guide does not establish full WCAG conformance, create review data, or guarantee search-result enhancements. An image-generation tool cannot independently install a functional review widget or verify customer ratings.
Illustrative Exercise — Static Rating Versus Interactive Review Control
These are illustrative exercise rows. Save a copy and record your own observations; the example is not an executed acceptance test.
| Fictional interface | Verified value and scale | Purpose | Expected accessible name, role, and state | Expected keyboard outcome | Browser and screen-reader observation |
|---|---|---|---|---|---|
| A: Static three-star display | Approved rating: 3 out of 5 | Read-only rating information | One meaningful score description; decorative stars not separately announced | No rating-selection interaction required | Pending test: record whether the score is announced as one information unit |
| B: Leave-review star selector | Available choices: 1 through 5; initially unselected | Interactive rating input | Named radio group, named options, appropriate radio roles, no option initially checked | Tab enters group; Space selects; arrows move and select according to applicable behavior | Pending test: record announced names, checked state, focus movement, and browser differences |
Sources and further reading
Recorded source-review dates are listed individually below. An undated source does not inherit the article’s publication date. Software and platform rules can change; check the current original before acting.
- W3C Technique G196 — group image text equivalent · Reviewed
- W3C APG Radio Group Pattern · Reviewed
Frequently asked questions
Should every star image have its own descriptive alternative text?
Not when adjacent images jointly convey one static score. W3C G196 demonstrates communicating the complete meaning once and treating the remaining images as decorative.
Can I use the same accessibility treatment for clickable rating stars?
No. Interactive rating options require meaningful names, appropriate roles and checked states, plus keyboard interaction. Decorative-image alternatives do not replace those requirements.
PREPARE ASSETS FOR YOUR NEXT STEP
Create supporting product assets in Itemlume.
Create new product creative assets in the workspace, then continue in your chosen tools. Third-party software procedures described in this guide take place in those applications; this workspace link does not imply an integration. Check current capabilities, account access and credit quotes.
Explore asset creation tools Check pricing and credits