Design 12:Adding the Star Awards

 

dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey

Planning

[Assistant] The Director wants your plan for the information architecture.
[Our Designer] Says nothing.
[Assistant] I'll tell him you are at lunch.

Note

Design 12: The star award has two core functions:

  1. A typical product review strategy, and
  2. Strengthen the visual semantic when an image fails to display.

The stars award is available to:

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">&#9733;&#9733;&#9733;&#9733;&#10025;</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;
}