Note
Design 12: The star award has two core functions:
- A typical product review strategy, and
- Strengthen the visual semantic when an image fails to display.
The stars award is available to:
- Screen readers via a hidden portion of text.
- Visual users with star glyph characters grouped as an image and hidden to screen readers.
The <span> are far from "DIV and SPAN soup". They are used correctly as as non-semantic containers on which to attach style declarations and ARIA attributes to equalize the experience.
An enhancement is to use a CSS sprite sheet where the grade glyphs contain numbers to ease the cognitive processing required to discern the math.
Video
Skip video to and
HTML
<figure>
<p class="starAward">
<span class="hidden">This cartoon strip is awarded 4-stars of 5.</span>
<span class="stars" role="img" aria-label="Rating" aria-hidden="true">★★★★✩</span>
</p>
<picture>
<source media="(min-width: 760px)" srcset="../img/dieux-by-pat-godfrey-user-testing.png">
<source media="(min-width: 100px)" srcset="../img/dieux-by-pat-godfrey-user-testing-v.png">
<img aria-labelledby="heading" class="dieux__img" src="../img/dieux-by-pat-godfrey-user-testing.png" alt="dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey">
</picture>
<button id="button" aria-controls="caption" aria-pressed="false" aria-expanded="false" aria-hidden="true">Toggle Caption</button>
<figcaption id="caption" aria-labelledby="heading" class="hidden" role="region">
<h2 id="heading">Planning</h2>
<p>[Assistant] The Director wants your plan for the information architecture. <br>
[Our Designer] Says nothing. <br>
[Assistant] I'll tell him you are at lunch.</p>
</figcaption>
</figure>
CSS
.hidden {
position:absolute;
top:0;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}