
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
「Webアクセシビリティについて」(全1記事)
リンクをコピー
記事をブックマーク
内藤秀彦氏:私からは、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型の色覚で見た場合にどうなるかを再現したものです。お肉の赤色の部分と野菜の緑色の部分が、区別しづらいことが伝わるかと思います。
ですので、誰にとっても使えるアクセシビリティを考える際は、こういった赤や緑などいった色の使い方に気をつける必要があります。
次に音声機能の部分です。ブラウザでは、設定によってページの読み上げ機能が利用可能になっています。例えば、画像について読み上げられる際は、imageタグのaltタグに書かれた説明が読み上げられます。また、ボタンがアイコンなどのとき、aria-labelといった属性を使うことで、何のためのボタンなのかを説明できます。
もしこの説明を書かなかった場合、音声読み上げでは、その画像がいったい何の画像なのか、このボタンがいったい何のボタンなのかをユーザーに伝えることができません。つまり、誰でも使えるというアクセシビリティを考える際、このマークアップにも気をつける必要があります。
ここまで紹介した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つです。
色のコントラストのところは、できるだけ背景色と文字色の部分のコントラストが「AA」や「AAA」となるところを目指すと、読みやすい文字を表示できます。
また色覚の部分ですね、赤色や緑色などの配色には注意してデザインを作ることが大切です。またマークアップの部分では、読み上げ機能を考慮した適切なマークアップを行うとよいでしょう。
デザインやマークアップを行う際に、これらのアクセシビリティの要点を意識しチェックすることによって、誰にとっても使いやすい、使えるサービスに近づけることができます。
今回紹介した要点やチェック方法は、すぐに試せるものになっていますので、今回参加してくれたみなさんのサービスでも、明日から役立ててもらえると幸いです。
ご清聴ありがとうございました。
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.03
手帳に書くだけで心が整うメンタルケアのコツ イライラ、モヤモヤ、落ち込んだ時の手帳の使い方
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.03
手帳に書くだけで心が整うメンタルケアのコツ イライラ、モヤモヤ、落ち込んだ時の手帳の使い方
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10
片付けパパ対談【特別編】 整理術×行動術×メモ術で、仕事も人生も自在にデザイン!
2024.12.16 - 2024.12.16
日本を変える 中小企業リーダーズサミット2025
2025.01.30 - 2025.02.12