Web デザインにアクセシビリティが必須である理由 | アドビ UX 道場 #UXDojo

デザイナーは、製品やサイトを操作することになるかもしれないすべての潜在的なユーザーに対応しなければなりません。この記事では、アクセシビリティを考慮したデザインを始めるためのヒントを解説します。

上の引用文は、アクセシブルな Web サイトデザインにより、すべての人がデジタル体験に加われることの必要性を完璧に表現しています。

Web サイトをデザインする際にアクセシビリティの課題に対応すれば、サイトはより魅力的で、誰もがアクセスできる場所に近づきます。そうすれば、より幅広いユーザー層による利用が期待できるでしょう。そのために考慮すべきことは数多くありますが、いくつかの有用なヒントを学べば、すべてのユーザーのためのデザインを始めるには十分です。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

キーボードのアクセシビリティと書かれたキーを押している　出典: アドビ

アクセシビリティに関する問題の種類

Web サイトをアクセシブルにする方法を理解するには、まずなぜそれが必要なのかを知る必要があります。上の引用文にあるように、米国には 5700 万人の障がい者がいます。自分がデザインしたサイトのユーザもその中に含まれているかもしれません。そうしたユーザーには、適切な UX を提供するために、スクリーンリーダーに最適化されたコンテンツが必要な場合があります。また、画像のキャプション、色のコントラスト、フォントの選択なども、誰もが利用しやすい Web サイトをデザインするには重要な考慮点です。

このように、Web サイトを訪問中のユーザーが遭遇する可能性のあるアクセシビリティ関連の問題はさまざまです。そこに関わる主な要因には次のようなものがあります。

• 視覚障害
• 身体障害
• 聴覚障害
• 痙攣のリスク（特に光過敏性てんかん）
• 学習／認知機能の障害
• 一時的な問題（例：睡眠不足）
• 環境に依存する課題（例：地下でのモバイル機器の使用）

自分のユーザーを知ること、そして、彼らのためにサイトを使ってどのような問題を解決しようとしているのかを理解することは重要です。これら 2つの洞察は、考慮すべきアクセシビリティの課題は何か？その理由は何か？を検討する際の主要な判断材料になるからです。また、考慮すべきアクセシビリティの領域を調査無しで明確にすることは困難です。サイト制作においてユーザー調査が重要である理由がここにもあります。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

青い背景の上に並べられたアクセシビリティのユニバーサルシンボル　出典: アドビ

アクセシビリティを考慮したデザイン手法

アクセシビリティを考慮しながらデザインすると、さまざまな項目に対応することになります。その際に参考になるガイドラインやツールはいくつもありますが、本記事では、よりアクセシブルな Web サイトデザインを実践するための 4 つの注目すべきトピックをご紹介します。

1. Web コンテンツ・アクセシビリティガイドラインと障害を持つアメリカ人法

Web コンテンツをすべての人がアクセスできるようにするために従うべき包括的な指針を提供する Web コンテンツ・アクセシビリティガイドライン (WCAG) は、Web サイトをよりアクセシブルにするための第一歩としておすすめです。WCAG は画像やテキストの使用からコードやマークアップまで対象とする普遍的で高度な技術的ガイドラインで、その作成には、世界中の個人や企業が協力しました。デザインチームが WCAG に精通していれば、アクセシブルなサイトデザインを作成するために、何を含め、何を考慮し、何を実装すべきか判断する際の助けになるでしょう。

WCAG の遵守は、企業の公共の場での障害者に対する差別を禁止する障害を持つアメリカ人法 (ADA) に準拠することにもなります。ADA はサイトやデジタルアセット専用の法律ではありませんが、裁判所は ADA を解釈する際に、サイトを公共の場とみなすようになってきています。つまり、企業は、実店舗かデジタルプラットフォームかに関わらず、すべてのユーザーに「合理的な配慮」をする責任が問われるようになっているというわけです。

2. ユーザビリティの測定

WCAG やその他の役立つデザインガイドラインに準拠しても、それだけで十分とは言えません。デザインを開発段階でユーザーに提示して確認し、そのフィードバックを還元するプロセスは欠かせない手順です。つまり、幅広いユーザーを対象としたユーザビリティテストを行うべきです。評価項目には、次の 5 つが挙げられます。

• 学習しやすさ: サイトの使い方を習得することの容易さ
• 効率の良さ: タスクを完了のためのツールとしてサイトが適応している度合い
• 覚えやすさ: タスク再実行のためにサイトの操作方法を覚えておくことの容易さ
• エラー率: サイトを利用する際に発生するエラーの数
• 満足度: サイトを利用したユーザーの全体的な満足度

それぞれの評価項目は、サイトのアクセシビリティを検証する手段となります。アクセシビリティを考慮するには、さまざまな能力を持つユーザーが必要とするものを知るだけではなく、実際にインターフェイスやインタラクションをさまざまな能力を持つユーザーに体験してもらうことが重要です。デザインプロセスの早い段階でこれを行えば、サイト公開後に行うことになる変更を最小限に抑えられます。

3. 先進的な技術

前述のように、アクセシブルなデザインとは、様々な人の様々なニーズを考慮することです。そのために先進的な技術の使用が有効な場合があるかもしれません。たとえば人工知能（AI）はアクセシビリティの問題を解決するために一般的に使われるようになっています。AI がサイトをスキャンして、使用されているテキストの色の比率や画像の代替テキストなどを確認するといった使い方です。

また、音声 UI（VUI）も先進技術の主要な活用例です。この自然な UI は、多くのユーザーにとって有用です。運転中に手を使わない安全な手段を必要とする人や、キーボードを使うのが困難な人はその好例です。

音声やジェスチャーに適したデザインをするには、人間の行動の研究が必要になります。この研究を基礎とするのが、コンピュータ技術のデザインに焦点を当てた学際的な分野である HCI（Human-Computer Interaction）です。拡張現実（XR）のような新しい技術の適切な利用には、HCI の原則が役立ちます。HCI の原則には、情報科学、人間工学、認知科学、心理学などの側面が含まれています。これらはいずれもサイトのアクセシビリティを向上させる可能性を秘めています。

4. デザインの原則

基本的なデザイン原則もアクセシビリティに関わります。デザイン原則を十分に考慮していないと、それが原因となってアクセシビリティが欠如し、ユーザーがサイトを操作できなくなる可能性があります。以下は、サイトのアクセシビリティ改善に役立つデザイン原則の例です。

• フォントサイズ: フォントサイズは 16px 以上が推奨されています。これよりも小さくすると、読みやすさの問題が増える可能性があります。
• コントラスト: 画面上の要素間の違いをはっきりさせましょう。コントラストは、要素の大きさや色によってつくり出せます。明るい背景の上にに暗い色のテキストを配置すると、読みやすさやの問題を最小限に抑えられます。
• 見つけやすさ: ユーザー重要な情報を簡単に見つけられるようにしましょう。コントラストの低い色の組み合わせの使用は、情報を見つけにくくするだけでなく、操作エラーの原因にもなります。
• 反復: ある要素を繰り返し使うと記憶に残りやすく、ユーザーを誘導しやすいデザインになります。
• 比率: 近くに配置する要素同士の比率を調整することで、デザインの一部を強調できます。
• 階層化: 要素の重要さが視覚的に暗示されるようにします。たとえば、見出しをその下のテキストよりも大きくすると重要度の階層を示唆できます。

これらのデザイン原則を正しく使えば、サイトをよりアクセシブルにできます。Web サイトのデザイン原則への対応状況を把握しやすくするには、デザインシステムの利用がお勧めです。適切にデザインシステムを構築し運用すれば、体験の一貫性と、アクセシビリティ原則の遵守を確実に行えるようになります。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

家族の切り抜きを持っている手　出典: アドビ

おわりに

Web サイトやアプリは、人々に世界中の情報へのアクセスを可能にし、人々の日常生活を向上させるビジネスや製品とのつながりを提供します。すべての人がこうした情報、サービス、製品に平等にアクセスできるべきです。すなわち、アクセシビリティに配慮したサイトデザインは本当に必要とされているのです。

WCAG に準拠し、ユーザビリティを測定し、先進的な技術の助けを借り、デザインシステムを活用すれば、より確実に基本的なアクセシビリティ原則を満たせるようになり、すべての人のユーザー体験を向上させることができるでしょう。

この記事は What is Accessible Design?（著者:Vincent Brathwaite）の抄訳です