星の数による評価 (star rating) のアクセシビリティ

EC サイトやクチコミなどで、商品やサービスに対するユーザー評価を、星の数で示すユーザーインターフェース (UI) があります。端的な日本語表現はなさそうですが、英語では「star rating」と言うようです。

ユーザー評価を五つ星で示す star rating のイメージ

白地の背景に黄色い星印という外観が一般的ですが、それだとコントラストが低すぎて (特にロービジョンや高齢者などにとって) 星が視認しにくい可能性があります。こうした問題をはじめ、星の数による評価 (star rating) の UI は、アクセシビリティがおざなりにされることが少なくないように (実際に EC サイトなどのアクセシビリティ診断をしていて) 感じます。

この記事では、星の数による評価 (star rating) をアクセシブルにする方法について、解説します。「評価スコアの提示」と「評価の入力」の二つの側面から見てみましょう。

評価スコアの提示

まずは「評価スコアの提示」についてです。ユーザーが入力した評価が集計され、商品一覧や商品詳細ページに、そのスコアが星によって提示されるものです。

星の配色は WCAG (Web Content Accessibility Guidelines) の下記の達成基準 (1.4.11「非テキストのコントラスト」) に基づいて検討します。

以下の視覚的提示には、隣接した色との間で少なくとも 3:1 のコントラスト比がある。

ユーザインタフェース コンポーネント
ユーザインタフェース コンポーネント及び状態 (state) を特定するのに必要な視覚的な情報。ただし、アクティブではないユーザインタフェース コンポーネントや、そのコンポーネントの見た目がユーザエージェントによって提示されていてコンテンツ制作者が変更していない場合は除く。
グラフィカルオブジェクト
コンテンツを理解するのに必要なグラフィック部分。ただし、そのグラフィック特有の提示が、情報を伝えるうえで必要不可欠な場合は除く。
出典 : WCAG 2.2 達成基準 1.4.11「非テキストのコントラスト」(レベル AA)

星を用いた評価スコアの提示は、上述の「グラフィカルオブジェクト」に該当します。ユーザーに伝えたい情報は「星の総数がいくつで、そのうち、スコアがいくつ」なので、それがグラフィックとして明確に伝わることが重要です。

「スコアとしてカウントされる (明るく灯っている) 星のみ、背景色に対して 3:1 以上のコントラストがあればよいのでは？」という意見が寄せられることもありますが、それだと「星の総数がいくつ」という情報が伝わりにくく、ユーザーによっては「スコアがいくつ」という情報しか知覚できない可能性があります。もっとも、この手の UI では星の総数が五つであることがほとんどであり、それがユーザー側に常識として定着していると言えるのであれば、問題ないと解釈できるかもしれませんが...。

図1 : ユーザー評価を示す五つ星のうち、スコアとしてカウントされる (濃いオレンジ色の) 星のみ、背景色に対して 3:1 以上のコントラストがある。スコアとしてカウントされない (グレーアウトされた) 星はユーザーによっては視認が難しく、「星の総数がいくつ」という情報を知覚できない可能性がある。
五つ星のうち、スコアとしてカウントされる星は濃いオレンジ色で、そうでない星はクレーアウトされている。

グラフィックとして伝えたい情報を、多様なユーザーにより確実に届けるには、やはり、すべての星が背景色に対して十分なコントラストを持つのがよいでしょう。たとえば、すべての星に (背景色に対して 3:1 以上のコントラストの) 輪郭を設けて、スコアとしてカウントされる星は輪郭と同じ色で塗りつぶす (そうでない星は輪郭のみとする)、といったデザインが考えられます。

図2 : ユーザー評価を示す五つ星すべてが背景色に対して 3:1 以上のコントラストの輪郭を持ち、このうちスコアとしてカウントされる星は輪郭と同じ色で塗りつぶされている。
濃いオレンジ色の輪郭を持つ五つ星。スコアとしてカウントされる星は、輪郭と同じオレンジ色で塗りつぶされている。

このデザインでは、スコアとしてカウントされる星の塗色と、そうでない星の塗色の差も、3:1 以上のコントラストになります。提示されるスコアが小数 (たとえば「3.5」など) になる可能性を踏まえると、この差があることはとても重要です。「欠けた星」であることが視認しやすくなるからです。

図3 : ユーザー評価を示す五つ星のうち、たとえば 0.5 としてカウントされる星がある場合、星の塗色の差に 3:1 以上のコントラストがあると「欠けた星」として視認しやすい。
濃いオレンジ色の輪郭を持つ五つ星。小数のスコア (3.5) を示しており、四つ目の星が半分だけ塗りつぶされている。

なお、星の並びに対しては、スクリーンリーダーの利用者のために代替テキストを提供することも不可欠です。個々の星に代替テキストを入れる形だと、情報としてのまとまり感がなくなるので、すべての星をひとまとめにして、たとえば <div role="img" aria-label="星 五つのうち、3.5 の評価">{星の並び}</div> (あるいは、星の並びをひとつの画像で出力できる場合は <img src="{星の並び}" alt="星 五つのうち、3.5 の評価">) のように記述するのがよいでしょう。代替テキストの内容は、分母 (星の総数) を省いて "星 3.5 の評価" のようにシンプルに記述するのも悪くないかもしれませんが、スクリーンリーダー利用者は視覚に頼れない分、星の総数を把握する手がかりを得にくいため、代替テキストには分母 (星の総数) も含めるのがよいと考えます。

評価の入力

次に「評価の入力」についてです。

ユーザーに評価を入力させるにあたっては、上述の「評価スコアの提示」と同様に星を並べておいて、そのうち一つを選んでクリック (タップ) できるようにしておくと、ユーザーのメンタルモデルに自然な形で沿うことができるでしょう。

特に入力は、上述の WCAG 達成基準 1.4.11「非テキストのコントラスト」でいうところの「ユーザインタフェース コンポーネント」に該当するため、すべての星がクリック (タップ) 可能なボタンであると視認できるように、背景色に対して十分なコントラストを持たせることが不可欠です。すべての星に (背景色に対して 3:1 以上のコントラストの) 輪郭を設けて、選択された星 (およびそれ以下のスコアを表す星) は輪郭と同じ色で塗りつぶす、といったデザインが考えられます (上の図2と同様のイメージです)。

併せて入力においては、クリック (タップ) のしやすさの観点で、星 (ボタン) の大きさも重要になります。WCAG の達成基準 2.5.8「ターゲットのサイズ (最低限)」 に基づいて 24 x 24 CSS ピクセル以上の大きさにするか、あるいは指によるタップのしやすさを重視するなら達成基準 2.5.5「ターゲットのサイズ (高度)」 に基づいて 44 × 44 CSS ピクセル以上の大きさにしましょう。

なお、外観のデザイン以外の、ソースコードの実装としては、以下の要件も考慮に入れる必要があります。

上記を満たすには、HTML でラジオボタンとして実装するのが合理的かと思います。以下に簡単なデモを作ってみました。

See the Pen 星の数による評価 (star rating) by @caztcha (@caztcha) on CodePen.

キーボード操作 (Tab キーで星の並びにフォーカスを当てて、矢印キーで星を選択可)、スクリーンリーダーを介した情報伝達 (ボタンの総数およびそのいくつ目がフォーカスされているか、フォーカスされているボタンが選択されているのかどうか、および各ボタンのラベルの読み上げ)、ボタンのサイズ (44 x 44 CSS ピクセル以上)、ボタンおよびフォーカスインジケーターの配色 (隣接する領域との間で 3:1 以上のコントラスト) など基本的なアクセシビリティ要件を満たしつつ、ダークモード (デバイスのテーマ設定) や Windows のハイコントラストモードにおいても星やフォーカスインジケーターの視認性が損なわれないようにしています。CSS と JavaScript は Gemini で生成したもので、よりスマートな実装があるかもしれませんが、ユーザーから見たインタラクションという観点で参考になれば幸いです。