レーティング

Rating

別名: 星評価、スターレーティング、評価スター、レビュー評価、Rating、Star rating

生態(さわってみる)

この商品を評価する

5段階中3

読み取り専用(平均評価)

一言定義

星などの記号を並べ、段階的な評価を入力または表示するUI。

分類

使う場面

  • 商品レビューなど、段階的な満足度を入力・表示したいとき
  • 過去の評価の平均値を、記号でわかりやすく示したいとき

避ける場面

  • 賛成/反対のような単純な二値の反応で十分なとき(→いいねボタン)
  • 数値そのものが主情報で、記号による表現がかえって精度を損なうとき

近縁種との比較

いいねボタンが賛否や好意を単純なオン/オフのトグルで表明するのに対し、レーティングは段階的な満足度を複数値(多くは5段階)で表明する点で表現力が異なり、いいねボタンのavoidWhenが示す通り、賛成/反対のような意味のある評価を残したい場合はレーティングを使うべきとされる。レーティングは入力用途(自分が何点をつけるか)と表示用途(他者の評価の平均値を見せるだけの読み取り専用表示)の2つの役割を1つの見た目で兼ねる点も特徴で、実装上はradiogroupによる入力とテキストによる表示を明確に分ける必要がある。

実例リンク

アクセシビリティ

role
入力用は5つのradioをrole="radiogroup"にまとめ、それぞれに「1つ星」〜「5つ星」のアクセシブルネームを持たせる。読み取り専用の平均表示はフォーカス対象にせず、テキストとして数値情報を伝える
キーボード操作
入力用radiogroupは矢印キーで選択肢間を移動し、Tabではradiogroup全体に1回だけ入るネイティブradioの標準動作に従う
補足
見た目は星の記号だが、読み上げは「5段階中3」のような数値情報として伝わるようにする。ホバーで一時的にプレビュー表示する場合も、確定値と混同しないよう視覚的に区別する