アクセシブルデザインのための5つのポイント。誰もが使いやすいUIを目指して

私は昨年、UIデザイン部門のリーダーとして、テキサス州・オースティン市のイノベーションオフィスで開催されたフェローシッププログラムに参加しました。ここでの私の仕事のほとんどは、オースティン市で作られた新しいWebサイトがWCAG（Webコンテンツ・アクセシビリティ・ガイドライン）を満たすよう管理をすることでした。

ここでの経験をベースに、この記事では高齢者や障がい者など心身の機能に制約のある人を含め、誰もが使いやすいアクセシブルなUIデザインを作るための5つのポイントをご紹介します。

1. テキストサイズとカラーに気を配る

WCAGの基準を満たすために、まずはカラーコントラストを強めに調整しましょう。

新しくカラーパレットを作ったり、既存のパレットにコントラストカラーを追加したい場合には、Webデザインに対応したアクセシブルなカラーセットが簡単に作成できる WebAimカラーコントラストチェッカーがおすすめです。

カラーコードを入力するか、カラーホイールから好みのカラーを選んで、WCAGの基準を満たすよう調整しましょう。

2. ステータスの変更は分かりやすく

色盲など視覚に問題がある人々にとって、カラーだけでのステータス情報の提示は十分ではありません。ステータスの変更を表示する際は、シェープやアイコン、テキストなどを組み合わせ、よりアクセシブルなデザインを目指しましょう。

視覚に問題がある人にあなたのデザインがどう見えるかを確認するには、Color Oracleを使用しましょう。

▲この事例ではカラーだけでなく、テキストと枠の太さを組み合わせてステータス変更を表示しています

3. ページコンテンツの順序に気をつける

全体を意識してそれぞれのページをデザインすることは大切です。

盲目の人に欠かせないスクリーンリーダーは、画面の表示内容を音声で順番どおりに読み上げます。そのため、ページコンテンツの順序が読み上げた時に適切であるか、入念に気を配りましょう。

4. リンクテキストは分かりやすく

スクリーンリーダーは、基本的にページの全てのリンクを読み上げます。そのため、よくある「こちらをクリック」の表示だけでは、リンク先が何であるか理解できません。

リンクの内容がはっきり伝わるよう、リンクテキストは分かりやすく記載しましょう。

▲リンクテキストはユーザーとのコミュニケーションにとって重要です

5. アクセシビリティを大切にしつつ、UXへのインパクトを抑える

全てのプロジェクトで1.~4.のテクニックが通用するとは限りません。ディベロッパーと相談し、それぞれの文脈に合わせた最善案を考えましょう。

例えば、私が関わったオースティン市のWebサイトの事例では、PDFのダウンロードリンクを添付したフォームのリストを作成する必要がありました。当初の案では、「ダウンロード（フォームの名前）」というリンクテキストにする予定でしたが、フォーム名が非常に長かったため、この方法だとUXにネガティブな影響を及ぼすことに気づきました。

そこで、スクリーンリーダーでは「ダウンロード（フォームの名前）」というテキストを使用しつつも、通常の画面では「ダウンロード」と表示されるようコードを書き換えました。アクセシビリティを大切にしつつ、視覚的なUXへのインパクトを最小限に抑えた事例です。

まとめ：万人のためのデザイン

誰かが使えないかもしれないデザインを作って、一体なんの意味があるのでしょうか？

アクセシビリティを考慮したデザインを作ることは、非常に大切なことです。ぜひ、今回の記事で紹介したヒントを参考に、アクセシブルなUIデザインを実現してみてください。

（原文：argodesign　翻訳：Mariko Sugita）