みんなに優しいデザインを届けよう。Webアクセシビリティ・ガイドラインとチェックリスト。プレゼン資料

2021年11月8日 17:45

Webアクセシビリティとは、障害を持つ人々がWebを使用できることを意味します。覚えておきたいことは、世界中で13億人（5人に1人）が何らかの障害を抱えて生活しているということです。

アクセシビリティとは？

アクセシビリティには他にも「利用のしやすさ」などと訳されています。一般的にはユーザーがプラットフォームやサービスを円滑に利用できることを意味します。

アクセシビリティは、ガイドラインに基づく品質のことを指しています。アクセシビリティを考える上で、ユーザーの多様性（高齢者、障がい者、外国人など）を理解することが鍵となっています。能力、ニーズ、願望などに様々なバリエーションがあり、それらを理解することによって意思決定の情報を提供し、できるだけ多くの人を取り込むことをゴールとしたデザイン手法のことです。

今回はアクセシビリティのガイドラインと、チェックリストをご紹介させていただきたいと思います。

アクセシビリティの重要性

自分の能力をベースラインとしてプロダクトを作ってしまうと、一部の人にとっては使いやすく、他の人にとっては難しいものになります。

デジタル化・オンライン化が進む世界で、より多くの人々に使いやすいプロダクトをデザインするために、色々な障害を持った方にとっても使いやすいサービスを提供することはとても大切です。

ユーザーの多様性は、能力、ニーズなどは様々でバリエーションがありますが、アクセシビリティは、ガイドラインに基づくプロダクトを作ると、それらを広範囲でカバーできます。

アクセシビリティの利点

→ アクセスの増加
→ インクルーシブなデザイン
→ より多くの人間に体験を開放できる。
→ 摩擦の低減
→ 感情移入できる

私たちの仕事は、ユーザーではなく、人間に影響を与えます。
人々の忙しく、感情的な生活に織り込まれています。私たち、プロダクトデザイナーの仕事の一部は、人々の生活のストレスを軽減することを目指すことです。簡単なタスクをシンプルに、難しいタスクを管理しやすくするように心がけることが大切です。

アクセシビリティ、ガイドラインとチェックリスト

それでは、どのように多様性に対応したデザインが実現できるのでしょうか？健全者の場合、どのようにアクセシビリティをデザインに反映させるべきかがわからないことがあると思います。

まずはデザイン思考のプロセスの第一歩、ユーザを理解し、共感することから初めていきます。

デザインを始める前に誰のためにデザインしているのか？ということを思慮深く考えます。自分のためだけのデザインになっていないか？私たちは、背景に使う画像など、実際には必要のない要素に拘ってしまうことがあります。誰のためにデザインしているのか？このシンプルな質問を自問自答し、包括性について考え始めることが重要になってきます。

カラー

□ テキストの前景と背景の間に十分なコントラストが必要です。
プロジェクトには、アクセス可能なコントラストの最小値に関してさまざまな要件があります。FigmaやSketchのStarkプラグインを使用して、ビジュアルデザインを承認する前に、コントラストのレベルを確認することをお勧めします。デザインをよりアクセシブルにすることは、美学を犠牲にする必要はありません。視覚的なデザインを損なうことなく読みやすさを向上させるために、簡単な修正を行うことができます。

□ 情報を伝えるために、色だけを単独で使用しないようにする必要があります。例えばテキスト・フィールドの下にメッセージを付け加えるなどをします。

□ 色覚異常のユーザーの視覚的コミュニケーションが損なわれないようにする必要があります。

下の画像はさまざまなタイプの色覚異常のユーザーが同じボタンをどのように見るかを示しています。

私たちが目標にするべきことは、色覚に障害をもつ方々にアクセシブルなビジュアルデザインだけを作成することではなく、さまざまな要素をより明確に区別できるさまざまな方法を考えることです。
さまざまなリンクとボタンのスタイルを使用して、ユーザーがタスクを完了するために色だけに依存しないようにします。

［参考資料］
https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html

□ 視覚的なコミュニケーションを提供する前景要素と背景要素の間の十分なコントラストを考慮してください。
ビジュアルコミュニケーションを提供する前景要素と背景要素の間の十分なコントラストを考慮してください。
コントラストの最小値に準拠するためにアイコンは必要ありませんが、簡単な変更を加えて、さまざまな背景でもアイコンが表示されるようにすることができます。

インタラクティブな要素

□ インタラクティブな要素を簡単に識別できるようにします。
下の画像では、ユーザーは同じタスクを実行しようとしていますが、右の例はリンクは、アクション部分に色つけ、下線を引くことにより、見つけやすくなっています。

［参考資料］
https://www.w3.org/WAI/WCAG21/Techniques/general/G182

□ インタラクティブな要素が、それらが制御するインターフェースに関連していることを確認する必要があります。
タッチターゲットを大きくすると、マウス、スタイラス、トラックパッド、キーボード、ヘッドポインター、モーション、視線追跡デバイス、またはシングルスイッチ入力デバイスを使用している人がタスクをより簡単に完了できるようになります。

□ インタラクティブな要素が、それらが制御するインターフェースに関連していることを確認する必要があります。
図の「Do」の例は、状況に応じて配置された編集リンクが、どの情報が編集されるかをユーザーが理解するのにどのように役立つかを示しています。

メディア

□ 自動的に開始するコンテンツを制御する必要があります。
ユーザーがアニメーションや自動再生サウンドを停止できるようにする表示可能なコントロールを提供します。これは、カルーセル、画像スライダー、背景音、およびビデオに適用されます。

これは、ニュースティッカーやカウントダウンなど、自動再生されるその他の要素にも当てはまります。
絶え間ない動きと切迫感は、認知障害のあるユーザーの気を散らす可能性があります。アニメーション要素を制御するオプションをユーザーに提供することで、エクスペリエンスのストレスを軽減できます。

□ 画像とメディアに関連するフォールバックがあることを確認する必要があります。
この例では、ユーザーはビデオを表示したり、ビデオトランスクリプトを読んだり、ビデオの音声ガイドを聞いたりすることができます。これにより、ユーザーはこのコンテンツを好みの方法で体験することができます。

💡フォールバックとは、通常使用する方式や系統が正常に機能しなくなったときに、機能や性能を制限したり別の方式や系統に切り替えるなどして、限定的ながら使用可能な状態を維持することです。

💡音声ガイドは、視覚障害のあるユーザーだけが使用するわけではありません。一部の人々は、音声ガイドを有効にすることにより、オーディオブックとしてNetflix番組を使い始めました。

□ 使用しているメディアがWCAGの点滅のルールを守っていることを確認しましょう。
点滅を繰り返すボタンなどは、認知障害のあるユーザーの気を散らす可能性があります。また大きくて明るく、3秒以上続く点滅するコンテンツは、発作を引き起こす可能性があります。ユーザーがコンテンツをオフにするよりも短時間で発作が発生する可能性があります。

ショートカット

□ タスクを完了するためのインターアクションを少なくする検討してください。
体験をより速くまたはより簡単にすることができれば、よりアクセスしやすくなります。

□ フォームに必要なすべての相互作用状態のデザインがあることを確認する必要があります。
フォーカス状態は、キーボードを使用してナビゲートするユーザーがページ上のどこにいるかを識別するのに役立つため、重要です。

□ フォームの表示検証を確認する必要があります。
入力時にユーザーの入力を検証することで、ユーザーは詳細を送信しようとした後、修正できる簡単なエラーがあるかどうかを確認するまで待つ必要がありません。

フィードバック

□ 簡単に識別できるフィードバックを確保する必要があります。
どちらの例も識別可能なフィードバックを示していますが、「より良い」例は、明確さを確保し、次のステップを伝えるための追加の手がかりを提供します。

□ フィードバックが状況に応じて表示されるようにする必要があります。
下の画像では、商品の詳細ページで無効になっている[カートに追加]ボタンの関係を示しています。
ページの上部にエラーメッセージがあると、メッセージ（使用不可）が目的のアクション（カートへの追加）から切断されます。 [カートに追加]ボタンの近くにエラーメッセージを表示することで、ユーザーはこの商品をカートに追加できない理由をよりよく理解する必要があります。

レイアウトと構造

□ 明確なページ構造を作成するには、関連するコンテンツをグループ化するために見出しと間隔を使用する必要があります。
空白と近接性を使用して、コンテンツ間の関係をより明確にします。見出しのスタイルを設定してコンテンツをグループ化し、煩雑さを減らし、スキャンと理解を容易にします。

□ 複雑で雑然としたレイアウトよりもシンプルで一貫性のあるレイアウトにする必要があります。
下の画像の左のレイアウトは、情報の読み取り方法とページ上の残りのコンテンツとの関連性のために、スクリーンリーダーを使用するユーザーにとっては困難です。また、注意やテキスト処理に関連する認知障害のあるユーザーにとっても困難です。

□ 線形で論理的なレイアウトが必要です。
下の画像の左で示されているようなレイアウトは、聴覚障害または認知障害のあるユーザーにとっては困難です。
情報を直線的に提示すると、コンテンツが明確に伝達され、すべての情報が論理的に文字列化されます。これは、すべてのユーザーにとってより便利です。

□ コンテンツの短いブロックが必要です。
聴覚障害または認知障害のあるユーザーは、コンテンツの小さなブロックをグループ化することで恩恵を受けます。
コンテンツをフォローしやすくするだけでなく、ユーザーが探している情報をすばやく見つけるのにも役立ちます。

□ 行の長さは80文字未満である必要があります。
短い行は長い行よりも読みやすくなります。行の長さが長くなると、目は1つの行の終わりから次の行の始まりまで遠くに移動する必要があり、進行状況を垂直方向に追跡することが難しくなります。この課題は、テキスト処理に障害のあるユーザーにとってより顕著になります。

ヒント：アルファベットテストを使用して、行の長さを設定します。次のように、1行に2〜3個のアルファベットを収めることができるはずです。
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghabcdefghijklmnopqrstuvwxyz

ビューポート

□ ページ情報がさまざまなサイズのビューポートでどのように表示されるかを検討してください。

💡 “ビューポート”とはウェブページを表示するための領域のことで、一般的なウェブブラウザではブラウザのウインドウからアドレスバーやタブなどのブラウザのインターフェースを除いた部分のことを指します。

モックアップではL（768〜1024px）およびXS（320px）ビューポートに焦点を当てているため、作業の応答性に留意する必要があります。

タイムアウト

□ セッションの有効期限またはタイムアウトの前に、延長を要求するか、必要なアクションを完了するには、最低20秒を提供する必要があります。
タイムアウトに関する最新情報をユーザーに提供することは、何が起こったのかを説明するので良いことです。より良いアプローチは、セッションの有効期限を予測し、ユーザーがセッションを延長し続けることができるようにすることです。

キーボードとアクセシビリティ

□ キーボードがページ情報にアクセスする方法を検討してください。
多くの人はマウスを使用せず、Webとの対話をキーボードに依存しています。これには、フォームコントロール、入力、その他のユーザーインターフェイスコンポーネントを含むすべての機能へのキーボードアクセスが必要です。
下の図は厳密に直線的なエクスペリエンスを作成するのではなく、コンテンツのセクションをナビゲートするときにユーザーにオプションを提供する方がよいことを示しています。

□ キーボードがインタラクティブな要素をどのように制御できるかを検討してください。
この要件を満たすことは、人間工学に基づいたレイアウトのキーボード、オンスクリーンキーボード、スイッチデバイスなどの代替キーボードを使用しているユーザーを含むキーボードユーザーに役立ちます。また、音声認識（音声入力）を使用してWebサイトを操作したり、キーボードインターフェイスを介してテキストを口述したりするのにも役立ちます。

□ インタラクティブな要素を制御するさまざまな方法をユーザーに提供します。
ドラッグに関する新しいガイドラインを検討してください（ドラッグアンドドロップ機能がある場合は優先度を高くする必要があります）

問題：マウスボタンを押したまま、このリスト内のアイテムを移動するのに十分な精度でドラッグできません。うまく機能します：リスト内のアイテムをクリックすると、上下の矢印が表示され、それらをクリックして順序を変更できます。

□ 支援デバイスがページ情報にアクセスする方法を検討してください。
目の不自由なユーザーがキーボードとスクリーンリーダーを使用してドロップダウンメニューを操作する方法をシミュレートしています。
デバイスが異なれば、ユーザーは異なる方法でナビゲートできます。 W3Cのツールとテクニックを参照して、障害を持つ人々がWebと対話するためにどのように使用しているかを調べてください。

□ アシストデバイスがインタラクティブ要素をどのように制御できるかを検討してください。
タッチアクティベーション、音声認識（音声入力）、ジェスチャなど、キーボード以外の入力モダリティにより、多くの人がコンテンツを使いやすくなります。しかし、誰もがこれらの入力モダリティのそれぞれを同じ程度に使用できるわけではありません。
下の画像では身体障害を持つユーザーが音声認識を使用してテキストを書く方法をシミュレートしています。

まとめ

現在、人々の価値観において様々な変化が起きています。インクルーシブやダイバーシティへの理解を深めたサービスも多く見られるようになってきています。

あなたの提供しているサービスや、プロダクトがインクルーシブ・デザインをしっかり重視しているか、どんな障害を持っている方誰にとっても使いやすいものになっているのかを確認するチャンスかもしれません。

下記のリンクからアクセサビリティとインクルーシブ・デザイン用に制作しましたプレゼン資料がダウンロードできますので、そちらもよかったらご覧ください。

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。主にデジタル・プロダクトの制作に携わっています。

この記事が気に入ったらサポートをしてみませんか？