Webアクセシビリティ入門｜デザイナーが知るべき7つのポイント

Webサイトを訪れた際に、サイトが使いにくかったり、何らかの問題が生じて不満を抱いたりした経験はありませんか？ これらはたとえば、以下の原因が考えられます。

• WebサイトのWebGLがあなたの使用するブラウザをサポートしていないため
• Webサイトがモバイルに対応しておらず、テキストが小さすぎるため

このようにアクセシビリティが考慮されていないと、ユーザーがWebサイトに不満を抱いてしまいます。

そこで今回は、Webアクセシビリティを向上させるための7つのポイントをお伝えしていきます。すべてのユーザーにとって使いやすいWebサイトの制作を目指しているデザイナーの方は、ぜひご覧ください。

【PR】2024年4月からの障害者差別解消法改正により、ウェブアクセシビリティの「合理的配慮」が求められるようになりました。この法改正は、障害のある人も含めたすべての人が情報にアクセスしやすいウェブ環境を提供することを目的としています。

株式会社GIGでは、この新しい義務に迅速に対応し、お客様のウェブサイトが高いアクセシビリティ基準を満たすようサポートします。ウェブアクセシビリティの改善は、法的要件の遵守だけでなく、より幅広い顧客層へのアプローチという点でも重要なメリットがあります。

ウェブアクセシビリティ対応にご興味のある方は、株式会社GIGまでお気軽にお問い合わせください。すべての人にとって使いやすいサイトをつくるお手伝いをいたします。

Webアクセシビリティとは

Webアクセシビリティとは、障がいを持つ人を含むすべての人が、Webサイトにある情報や機能を不自由なく利用できることを指します。

たとえば、Webサイト上の文字が小さくて読みづらいとしましょう。視覚障がいのある人は、読みづらいどころか、まったく読めない可能性もありますよね。障がいを持つユーザーのために文字サイズを大きくする機能や、Webページの読み上げ機能をつけることで、あらゆるユーザーの操作性が向上します。

このように、視覚障がいを持つユーザーの使いやすさを考慮することは、万人にとって扱いやすいデザインを制作するために必要不可欠です。デザイナーは、操作しやすく、誰にでも分かりやすい、アクセシビリティの高いWebサイトを作成するよう努めなければなりません。

Webアクセシビリティにまつわるガイドライン

アクセシブルなWebサイトのデザインに対する数多くの懸念に対処するために、World Wide Web Consortiumは、アクセシビリティにまつわるガイドラインを設けました。このドキュメントは、WCAG（Web Content Accessibility Guidelines）と呼ばれ、アクセシビリティを4つの原則に分類しています。デザインを行う際には、自らに次の4つの問いを投げかけてみましょう。

• 知覚性：サイト上のコンテンツをさまざまな方法で使用できるか
• 作動性：複雑なインタラクションやマウス操作なしでも混乱せずにサイトの機能を利用できるか
• 明快さ：ユーザーはサイトのUIや機能、情報を理解できるか
• 柔軟性：さまざまな支援デバイス（ex. スクリーンリーダー）に対応しているか

4つの原則は、A／AA／AAAの3段階で評価されています。アクセシブルなサイトの最小要件はA評価であり、AAA評価がWebアクセシビリティのスタンダードです。

とはいえ、アクセシブルなWebサイトの設計は思うほど難しくはありません。ここからは、Webサイトのアクセシビリティを向上させるための実用的なポイントを7つご紹介します。

Webアクセシビリティを向上させる7つのポイント

ポイント1. タイポグラフィ

一貫した見出し設計を意識する

見出しにおいて、階層ルール（hタグ）は非常に重要です。ユーザーが情報をすばやく解析する手助けになります。

Webサイトの各セクションは、一貫したタイプスタイル（通常は<h2>）で始めましょう。

▲Airbnbは一貫したタイポグラフィーの好例

また階層ルールだけでなく、そのコピーの分かりやすさも見出しにおいては重要です。コピーの明瞭さはSEOに良い影響をもたらしたり、短期記憶が苦手な人や、視覚に障がいを持つ人のUXを改善したりできます。

見出しの文字数は40字以内にする

大量のテキストを見て、読む気が失せた経験はありませんか？ 大量のテキストブロックを目の前にすると、集中し続けるのが難しく、読み切る前に疲れてしまいますよね。

一方で文字が詰まっていない見出しなら、難読症者や視覚障がいをもつ人でも読みやすくなります。WCAGでは、1行のテキストの文字数を英字80文字以下（日本語なら40文字以下）にすることを推奨しています。

▲ブルームバーグは、80文字ルールに厳密に沿っているサイトの好例

またWCAGは、ユーザーが横にスクロールせずともサイトを200％拡大できるように、両端揃えのテキストの使用を避けるべきだとも伝えています。

ポイント2.色

重要な情報を伝えるときは2色以上の色を使う

重要な情報を分かりやすくしたいときには、複数の色を使いましょう。日本眼科医会によると、日本人では男性の20人に1人、女性では500人に1人の割合で色覚異常をもっています。

『Stark』や『Colorblind Web Page Filter』などのツールを使うことで、色覚異常の人がどのようにWebサイトを見ているのか分かります。ぜひ自分のWebサイトをチェックしてみてください。

▲Colorblind Web Page Filter：赤色を知覚するのが難しい1型2色覚の人から見た場合のシミュレーション。右側が1型2色覚の人の見え方

色のコントラスト比を高くする

テキストの色と背景色とのコントラストは、サイトの読みやすさに大きく影響します。WCAGは、AA評価を達成するためには、テキストのカラーが少なくとも「4.5：1」のコントラスト比を有するべきであり、AAA評価を達成するためには「7：1」のコントラスト比をキープすべきであると述べています。

▲KKW Beautyの以前のサイトは、テキストの色と背景色のコントラストが低く、読みにくい（2020年8月現在はコントラスト比が改善されている）

前述のコントラスト比がよく理解できないという方もご安心を。スケッチプラグインとChrome拡張機能を使えば、テキストのコントラスト比をテストし、デザインの成否を教えてくれます。

▲MOMAは、ユーザーにデフォルトのテキストと、ハイコントラストテキストのどちらかを選択できる仕様になっている

また、ユーザーがテキストの色と背景色を調整できる機能を与えることも重要です。MOMAのサイトでは、フッター内のリンクをクリックすることで、デフォルトと高コントラストのテキストを変更できるようになっています。

ポイント3. アセット

代替テキストとARIAラベルに注意を払う

アクセシブルなWebサイトの制作は、画像にalt属性（代替テキスト）をちょっと記述するだけでは不十分です。視覚に障害を持つユーザーがスクリーンリーダーを利用して、「代替テキストを通して画像の内容が分かるよう」に記述する必要があります。

Googleはこちらの記事で、良い代替テキストと悪い代替テキストの例を紹介しています。

▲Aldo Shoesは、画像とARIAラベルのalt-texに細心の注意を払っている

さらに、ARIAラベル（アクセシブルなインターネットアプリ）は、Webサイトに「ランドマークロール」を表示する必要があります。ランドマークロールとは、ナビゲーションやフォーム、セクションなど、Webサイトにおける主要なリンクをカテゴリー分けしてくれるもの。これにより、スクリーンリーダーがWebサイトの構成要素を解析しやすくなり、スクリーンリーダー利用者に最適な情報を届けられできます。

alt属性とARIAラベルに関しては、開発者だけが気にすれば良いものと思われがちです。しかし正しく設計を行うために、デザイナーであっても上記のポイントを念頭に置いておきましょう。

テキストを含む画像を避ける

▲Well and Good は、画像とライブテキストのバランスが最適です

テキストを含む画像の使用はなるべく避けましょう。視覚障がいをもつ人は、これらを読み取れません。

代わりに、ライブテキストの使用がおすすめです。テキスト要素を画像上に配置し、CSSを使用してスタイルを設定できます。プル・クォート用の引用符等、装飾的なグラフィックとなるテキスト要素を使う際にも、この法則を覚えておくと便利です。

ポイント4. コンテンツ

できるだけシンプルに書く

コピーライティングは、WebサイトのUXに大きく影響します。常にデザイナーがコピーライティングについて責任を負う義務はありませんが、できるだけコピーライターと協力し、より良い製品になるよう努めるべきです。

▲より明確に書くツール、Hemingway Appをご覧ください

Webアクセシビリティを実現するためには、できるだけ専門用語や珍しい言葉を使わないことが重要です。複雑な言葉を使って「賢そうなコピー」を書こうとしないでください。WCAGは、中等教育レベルのワードで書くことを推奨しています。

ポイント5. UI

一貫したナビゲーションとUIを設計する

▲Huromは明確なナビゲーションとUI要素が魅力的

ユーザーがWebサイトの操作で迷うことは望ましくありません。一般によいとされるアクセシブルなWebデザインは「予測可能なデザイン」です。Webサイトの構成要素やUI表示がページごとに異なると、ユーザーは操作に戸惑ってしまいます。

たとえばナビゲーション要素は、Webサイトのどのページにおいても同じ順序・同じ動作で配置しましょう。

ナビゲーションメニューを設置する

▲YouTubeはナビゲーションバーを表示し、ユーザーが行なっている操作を分かりやすく知らせている

ナビゲーションメニューを設置すると、現在自分が操作している箇所を一目で把握できます。

すべてのユーザーがマウスを使ってWebサイトを操作できるわけではありません。操作方法が限られているユーザーは、キーボードのタブを使ってWebサイトを操作することもあるでしょう。そのような場合、マウスやトラックパッドを使用せずとも、Webサイト上のどこにいるかをユーザー自身で認知できる必要があります。そこでナビゲーションバーを設置しておけば、ユーザーは自分が操作している場所を正しく把握できるようになります。

エラー表示はエラーの理由も一緒に知らせる

▲Aesopでは、エラーの説明が丁寧にされています

エラー表示は、単にエラーを分かりやすく提示するだけでなく、何が間違っていたか、エラーをどのように修正すべきかをユーザーに知らせることも必要です。

またエラーを未然に防ぐ工夫もするとよいでしょう。WCAGは、フォームを介して情報を送信する際に、可逆送信（ページを逆戻りして送信すること）と確認画面によるユーザーエラーの防止を推奨しています。

ポイント6. インタラクション

UIアニメーションの点滅を避ける

▲GQがニュースレターキャプチャに使用しているスライド式のアニメーションは、ユーザーの注目を集める好例

ユーザーの集中を切らさないために、1秒間に3回以上点滅するUIアニメーションを作成しないようにしてください。さらにいえば、そもそも点滅するアニメーションを使わないのがベストです。

GQの例のように、ユーザーにとって見やすいアニメーションの使用を心がけましょう。

シンプルなジェスチャーを心がけよう

大事なコンテンツが、複雑なジェスチャーやインタラクションの背後に隠れてしまうことがないように気をつけましょう。操作が制限されているユーザーでも、Webサイトのすべてのコンテンツにアクセスできるようにする必要があります。

ターゲットの大きさと距離に注意しよう

フィッツの法則では「ユーザーがターゲット（CTAボタンなど）にたどり着く時間は、ターゲットまでの距離とサイズによる」と言及されています。つまり、ターゲットが大きく、なおかつターゲットとの距離が近いほど、ユーザーはそのターゲットをクリックしやすくなるのです。

ターゲットが小さすぎたり、他のターゲットとの距離が近すぎたりすると、クリックするのが難しくなります。そのため、ターゲットのサイズを大きくするだけではなく、他のターゲットとの距離にも注意してください。適度な距離があると好ましいでしょう。

ポイント7.モバイルアクセシビリティをチェックしよう

フォントを大きくしても見やすい画面にする

多くのデバイスにおいて、ユーザーは自身の設定によりフォントサイズを自由に変えられます。そのためオリジナルのフォントサイズから、200%まで大きくした場合にも対応できるようにするのが好ましいです。フォントサイズを200%大きくしても使いやすいWebサイトかどうか、実際に確認してみましょう。

片手だけでも使いやすくする

「One thumb, one eyeball test（親指一本、目はひとつ）」は、モバイル上でWebサイトを閲覧する場合に、片手で利用できるかを確認するテストです。まず試作品を作り、モバイル上でWebサイトを見てみます。そして「ユーザーは1分以内に、複数のタスクを片手でおこなえるか」を考えてみてましょう。

おわりに

Webアクセシビリティは、デザイナー、開発者、コピーライターなどのすべてのコンテンツ作成者のたゆまぬ努力によって実現します。製品をアクセシブルなものに仕上げるには、チームのすべてのメンバーがこのガイドラインを念頭に置いた上で、協力することが必要不可欠です。

アクセシビリティの高いWebサイトの作成は、困難なことに思えるかもしれませんが、今回ご紹介したポイントを守ることで、すべてのユーザーにとってよりよいWebサイトを生み出せます。ぜひ、参考にしてみてください。

（執筆：Nicholas Kramer　翻訳：Ayaka Takei　編集：Sato Mizuki）