「色のコントラスト」「色覚を意識」「音声読み上げ対応」　高齢者や障がい者を含めたあらゆる人が使えるサイトを作るには

「アクセシビリティ」とはなにか

内藤秀彦氏：私からは、Webアクセシビリティについて発表します。

まずは自己紹介させてください。内藤秀彦といいます。Yahoo!ショッピングを担当したのち、2019年からPayPayモールのフロントエンドとデザインシステムを開発。直近ではデータウェアハウスの領域にも挑戦したという、ちょっと変わったタイプのデザイナー兼エンジニアをしています。

ちょうど今Twitterでも資料を公開しているので、併せてご覧ください。

本日のアジェンダです。Webアクセシビリティについてと、そのアクセシビリティのチェック方法について、PayPayモールの事例を交えながら話したいと思います。

まずはWebアクセシビリティについてなのですが、そもそもアクセシビリティと言われて、アクセシビリティが何のことかご存知でしょうか？

画面越しなので、気軽にみなさんに聞いてみることもできないのですが、W3Cの定義によると、アクセシビリティとは「高齢者や障がい者を含めたあらゆる人が、Webで提供されている情報にアクセスし利用できること」とされています。つまり、誰もが情報にアクセスできることが、アクセシビリティにおいて重要なこととなっています。

似たような言葉に「ユーザビリティ」という言葉があります。ユーザビリティは「特定の人に使いやすいかどうか」の基準。つまり「なるべく簡単で迷わず、ストレスのない使いやすいUIを目指す」といったところがユーザビリティに当てはまります。なのでみなさんは、サービスのデザインを行う際に、すでにユーザビリティについては意識できているのではないでしょうか。

一方で、本日のトピックであるアクセシビリティは、「誰にとっても使えるかどうか」というのが基準になっています。

「誰にとっても使えるか？」というアクセシビリティの要点をいくつかピックアップしました。例えば文字や背景色、それが視認しやすいコントラストになっているか、また文字サイズが読みやすい文字サイズになっているか。

ほかにも音声機能ですね。ブラウザの読み上げ機能を利用したときに、それを考慮したマークアップになっているか。また、動画の字幕表示などもアクセシビリティの要点となります。

今回はこの太文字にした「文字色や背景色」の部分、そしてマークアップに関連した「音声読み上げ機能」について、より詳しく見ていきます。

色のコントラストに差をつけて見やすくする

まず色のコントラストの部分です。コントラストとは何かというと、色の明るさの差のことをいいます。

色のコントラストは2つの色の相対輝度を用いて、その相対的な比率を数字で表したものが4.5以上だと「AA」、7以上だと「AAA」で、定量的に評価できます。今回、計算式などは具体的に紹介しませんが、色を定量的に評価できます。PayPayモールでは、原則「AA」以上のコントラストを使用してサービスを作っています。

より具体的に色のコントラストの例を用いて見ていきます。この左側のものがカラーコードで言うと#333、真ん中のものが#808080、右側のものが#CCCなのですが、背景色が白に対して、この文字色のコントラストがどうなっているかというと、一番左が「AAA」、真ん中のものが「AA」、右側のものが「Fail」となっています。「AA」や「AAA」が明らかに見やすく、コントラストの差が小さいものでは見づらいというのが伝わるのではないでしょうか。

つまり、誰にとっても使えるというアクセシビリティを考える時、この色のコントラストにも気をつける必要があります。

色覚を意識した色使いにする

もう1点、文字色や背景色についてアクセシビリティを考える上で、色覚について押さえておく必要があります。色覚にはいくつかの種類があり、通常の色覚、P型、D型といった色覚があります。男性では20人に1人、女性では500人に1人程度が、先天的に通常の色覚以外の色覚を持っているとされています。

こちらも具体的に例を出して見てみます。左側は、PayPayモールで「バーベキューセット」と検索して、なおかつ食品カテゴリーで絞り込んだもののスクリーンショットなのですが、その画像の中の赤枠で囲った部分を拡大して、それぞれP型の色覚、D型の色覚で見た場合にどうなるかを再現したものです。お肉の赤色の部分と野菜の緑色の部分が、区別しづらいことが伝わるかと思います。

ですので、誰にとっても使えるアクセシビリティを考える際は、こういった赤や緑などいった色の使い方に気をつける必要があります。

altタグやaria-labelで、音声読み上げ機能を意識する

次に音声機能の部分です。ブラウザでは、設定によってページの読み上げ機能が利用可能になっています。例えば、画像について読み上げられる際は、imageタグのaltタグに書かれた説明が読み上げられます。また、ボタンがアイコンなどのとき、aria-labelといった属性を使うことで、何のためのボタンなのかを説明できます。

もしこの説明を書かなかった場合、音声読み上げでは、その画像がいったい何の画像なのか、このボタンがいったい何のボタンなのかをユーザーに伝えることができません。つまり、誰でも使えるというアクセシビリティを考える際、このマークアップにも気をつける必要があります。

アクセシビリティを改善するのに便利な「Colorable」と「Lighthouse」チェック方法

ここまで紹介した3つの要素について、アクセシビリティを改善して高めるために、どうやってチェックしていけばいいかを説明します。つまり、アクセシビリティのチェック方法です。

まず色のコントラストのチェック方法ですが、いろいろなチェック方法があるなかで、「Colorable」というサービスでチェックする方法は、けっこうおすすめです。

Colorableというサービスにアクセスして、文字色や背景色のカラーコードを入力すると、その場でその組み合わせが「AAA」に当たるのか、「AA」に当たるのか、それとも「Fail」なのかといったことを簡単にチェックできます。

先ほどの紹介にもあったかと思いますが、PayPayモールは、SketchでUIを作っています。そのSketchで使うことができるプラグインにStarkがあり、こちらで色覚のチェックなどができます。

このように、簡単にP型やD型の色覚でどのように見えているのかを確認し、もし見づらい部分がUIにあった場合はすぐに直すことが可能になります。

またPayPayモールでは、Atomic Designなデザインシステムの作り方をしており、UIコンポーネントのレベルで、ある程度アクセシビリティを担保して作っています。なので、その担保されたコンポーネントを使うことで、Webサービスが作りやすい環境になっています。ほかにも、PhotoshopやIllustratorなどでは、この校正設定から確認可能です。

次にマークアップについて見ていきましょう。マークアップの確認方法は、Chromeに搭載されている「Lighthouse」というツールで、簡単にチェックできます。アクセシビリティのチェックのほかにも、ページのパフォーマンスやベストプラクティス、SEOなどもチェックできるので、これは非常におすすめです。

具体的なLighthouseの使い方です。Chromeを使っている方限定になるのですが、Chromeでチェックしたいページを開いて、ElementとかConsoleとかがあるタブの中から、Lighthouseを選択してください。

そして、この測定項目のところで、デバイスがモバイルなのかデスクトップなのか、チェックしたいほうをチェックして、「Generate report」を押すだけでそのページをチェックできます。

チェックが完了すると、こういった測定結果が表示されるのですが、このスコアの部分が、100点満点で100点に近いほど緑色になり、緑色のものほどそのスコアが高く、正しく実装できていることになります。

具体的には、その評価レポートの部分に指摘項目というのが出てくるのですが、それを見ていくとこのように表示されます。

これがアクセシビリティの指摘項目なのですが、例えば赤枠で囲っている部分は、「コントラストが危ないよ」と指摘してくれている部分になります。また、緑色はベストプラクティスの部分で、青色は、altタグとかの「タグの名前やラベルが抜けているよ」というような部分も教えてくれます。

さらに、それぞれのエキスパンドを開くことで、指摘項目をより詳しく見ることができます。ここで、具体的にソースコードのどの部分をどう直したほうがいいのかを教えてくれています。

普段から自分のサービスのアクセシビリティを見ているわけではないので、指摘項目がけっこう出てきちゃうかなとは思うのですが、指摘項目が多ければ多いほど、アクセシビリティの伸びしろがたくさんあるということで、一つひとつ直していくとよいと思います。PayPayモールでも定期的にチェックして、できるだけこの指摘項目を減らせるようにしています。

アクセシビリティ改善のための3要点

まとめです。本日紹介したアクセシビリティの要点3つです。

色のコントラストのところは、できるだけ背景色と文字色の部分のコントラストが「AA」や「AAA」となるところを目指すと、読みやすい文字を表示できます。

また色覚の部分ですね、赤色や緑色などの配色には注意してデザインを作ることが大切です。またマークアップの部分では、読み上げ機能を考慮した適切なマークアップを行うとよいでしょう。

デザインやマークアップを行う際に、これらのアクセシビリティの要点を意識しチェックすることによって、誰にとっても使いやすい、使えるサービスに近づけることができます。

今回紹介した要点やチェック方法は、すぐに試せるものになっていますので、今回参加してくれたみなさんのサービスでも、明日から役立ててもらえると幸いです。

ご清聴ありがとうございました。