星評価
星にホバー（PC）またはタップ（スマホ）で評価を選択。選んだ値をテキストで表示する。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- レビュー・満足度の5段階評価
- ホバーで仮の値、クリック／タップで確定させたい入力
- 選んだ段階を文言でも示したいフォーム
- 避ける場面
- 半星や10段階など細かい評価
- 評価を取り消す操作が要る画面（0に戻せない）
- 構成要素
- 見出し
- 星ボタン×5
- 選択結果の文言
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
APG radio group: Tab でグループへ入り（選択中の星、未選択なら1つ目）、←↓／→↑ で星を移動してその場で選択、Home／End で1つ星／5つ星、Space でも選択
- 支援技術
role=radiogroup＋aria-label。各星は button role=radio＋aria-checked＋aria-label「Nつ星」、roving tabindex。結果は「4つ星: 良い」の文言を aria-live=polite で読み上げる
- 動き
星の色 120ms、押下で 0.9倍 120ms（反応の手応え）。reduced-motion で無効
目的選ばせる
デザインの要点
- ホバーは仮の値、クリックで確定。ホバーで即確定すると、マウスが通っただけで評価が変わる
- 星は 44px の標的にする。文字サイズ 30px の★だけだと、指で隣の星を押す
- 選んだ段階は「4つ星: 良い」と文言で添える。星の数だけでは「良い」なのか「普通」なのか人によって違う
- 意味的には5択のラジオ。role=radio と矢印キーで、キーボードでも1つ星から5つ星へ滑らかに選べる
コード（コピーして使えます）
<div class="sr-wrap">
<p class="sr-label" id="sr-label">評価を選んでください</p>
<div class="sr-stars" id="sr-stars" role="radiogroup" aria-labelledby="sr-label">
<button class="sr-star" type="button" role="radio" aria-checked="false" tabindex="0" data-v="1" aria-label="1つ星">★</button>
<button class="sr-star" type="button" role="radio" aria-checked="false" tabindex="-1" data-v="2" aria-label="2つ星">★</button>
<button class="sr-star" type="button" role="radio" aria-checked="false" tabindex="-1" data-v="3" aria-label="3つ星">★</button>
<button class="sr-star" type="button" role="radio" aria-checked="false" tabindex="-1" data-v="4" aria-label="4つ星">★</button>
<button class="sr-star" type="button" role="radio" aria-checked="false" tabindex="-1" data-v="5" aria-label="5つ星">★</button>
</div>
<p class="sr-value" id="sr-value" aria-live="polite">未選択</p>
</div>