アクセシビリティとインクルージョンのための設計

「アクセシビリティは設計段階で解決されます。」 これは、ダニエル・ナと彼のチームが会議に出席しているときに何度も何度も聞いたフレーズです。 アクセシビリティを考慮して設計するということは、ユーザーのニーズを包括的にすることを意味します。 これには、ターゲットユーザー、ターゲット人口統計外のユーザー、障害を持つユーザー、さらにはさまざまな文化や国のユーザーが含まれます。 それらのニーズを理解することは、彼らにとってより良い、よりアクセスしやすい体験を作り出すための鍵です。

アクセシビリティを設計する際の最も一般的な問題の1つは、何を設計する必要があるかを知ることです。 ユーザーを除外するように意図的に設計しているのではなく、「わからないことをわからない」というだけです。 したがって、アクセシビリティに関しては、知っておくべきことがたくさんあります。

無数のユーザーとそのニーズをどのように理解するのでしょうか。 私たちの設計で彼らのニーズが満たされていることをどのように確認できますか？ これらの質問に答えるには、さまざまなレンズを通してデザインを表示するという批判的分析手法を適用することが役立つことがわかりました。

「[デザイン]をさまざまな視点、つまりレンズから見ると、[アクセスしやすい]優れたデザインが実現します。」

—ゲームデザインの芸術：レンズの本

レンズとは、「トピックを検討または調査できる狭められたフィルター」です。 芸術作品、文学、映画を調べるためによく使用されるレンズは、私たちに世界観を残し、代わりに別の文脈で世界を見るように求めます。

たとえば、歴史のレンズを通して芸術を見ると、「当時の社会的、政治的、経済的、文化的、および/または知的風土」を理解するように求められます。 これにより、世界がアーティストにどのような影響を与え、それがアートワークとそのメッセージをどのように形作ったかをよりよく理解することができます。

アクセシビリティレンズは、デザインのさまざまな側面がユーザーのニーズにどのように影響するかを理解するために使用できるフィルターです。 各レンズは、設計プロセス全体を通して自分自身に尋ねる一連の質問を提示します。 これらのレンズを使用することで、ユーザーのニーズをより包括的にし、すべての人にとってよりアクセスしやすいユーザーエクスペリエンスを設計できるようになります。

アクセシビリティのレンズは次のとおりです。

• アニメーションと効果のレンズ
• オーディオとビデオのレンズ
• 色のレンズ
• コントロールのレンズ
• フォントのレンズ
• 画像とアイコンのレンズ
• キーボードのレンズ
• レイアウトのレンズ
• 素材の正直なレンズ
• 読みやすさのレンズ
• 構造のレンズ
• 時間のレンズ

すべてのレンズがすべてのデザインに適用されるわけではないことを知っておく必要があります。 すべての設計に適用できるものもあれば、より状況に応じたものもあります。 ある設計で最適に機能するものが、別の設計では機能しない場合があります。

各レンズによって提供される質問は、どのような問題が発生する可能性があるかを理解するのに役立つ単なるツールです。 いつものように、ユーザーと一緒にデザインをテストして、ユーザーが使用でき、アクセスできることを確認する必要があります。

アニメーションと効果のレンズ

効果的なアニメーションは、ページとブランドに命を吹き込み、ユーザーに焦点を合わせ、ユーザーの方向性を示すのに役立ちます。 しかし、アニメーションは両刃の剣です。 アニメーションを誤用すると、混乱や気が散るだけでなく、一部のユーザーにとっては致命的となる可能性があります。

高速点滅効果（1秒間に3回以上の点滅として定義）または高強度の効果とパターンは、「光過敏性てんかん」として知られる発作を引き起こす可能性があります。 光線過敏症はまた、頭痛、吐き気、めまいを引き起こす可能性があります。 光過敏性てんかんのユーザーは、何かが発作を引き起こす可能性がある時期がわからないため、Webを使用する際には十分に注意する必要があります。

視差やモーション効果などの他の効果により、一部のユーザーは前庭の過敏性のためにめまいを感じたり、めまいを経験したりする可能性があります。 前庭系は、人のバランスと動きの感覚を制御します。 このシステムが正常に機能しない場合、めまいや吐き気を引き起こします。

「内部ジャイロスコープが正しく機能していない世界を想像してみてください。 酔っ払っているのと非常によく似ており、物事は自然に動いているように見えます。足が下で安定しているようには見えず、感覚は体よりも速くまたは遅く動いています。」

—前庭障害の入門書

絶え間ないアニメーションや動きも、ユーザー、特に集中力が低下しているユーザーの気を散らす可能性があります。 GIFは、私たちの目が動きに引き寄せられるため、特に問題があり、絶えず更新または移動するものに気を取られやすくなります。

これは、アニメーションが悪いと言っているのではなく、使用すべきではありません。 代わりに、アニメーションを使用している理由と、より安全なアニメーションを設計する方法を理解する必要があります。 一般的に言えば、短い距離をカバーし、他の移動するオブジェクト（スクロールを含む）の方向と速度を一致させ、画面サイズに対して比較的小さいアニメーションを設計するようにしてください。

また、ユーザーのエクスペリエンスに対応するためのコントロールまたはオプションを提供する必要があります。 たとえば、Slackを使用すると、アニメーション画像や絵文字をグローバル設定と画像ごとの両方で非表示にできます。

Lens of Animation and Effectsを使用するには、次の質問を自問してください。

• 発作を引き起こす可能性のある影響はありますか？
• モーションを使用してめまいやめまいを引き起こす可能性のあるアニメーションや効果はありますか？
• 絶えず移動したり、点滅したり、自動更新したりすることで気が散る可能性のあるアニメーションはありますか？
• アニメーションや効果の頻度を停止、一時停止、非表示、または変更するためのコントロールまたはオプションを提供することは可能ですか？

オーディオとビデオのレンズ

ビデオとオーディオの自動再生はかなり煩わしい場合があります。 それらはユーザーの集中力を壊すだけでなく、ユーザーに問題のあるメディアを追い詰めてミュートまたは停止するように強制します。 原則として、メディアを自動再生しないでください。

「自動再生は慎重に使用してください。 自動再生は強力なエンゲージメントツールですが、不要なサウンドが再生されたり、不要なビデオ再生の結果として不要なリソースの使用（データ、バッテリーなど）を認識したりすると、ユーザーを苛立たせる可能性もあります。」

— GoogleAutoplayガイドライン

あなたはおそらく、「しかし、ビデオをバックグラウンドで自動再生し、それをミュートしたままにするとどうなるでしょうか？」と尋ねているでしょう。 ビデオを背景として使用することは、今日のWebデザインで成長する傾向である可能性がありますが、背景ビデオはGIFや絶え間なく動くアニメーションと同じ問題に悩まされています。 そのため、ビデオを一時停止または無効にするためのコントロールまたはオプションを提供する必要があります。

コントロールに加えて、ユーザーが自分に最適な方法でコンテンツを利用できるように、動画にはトランスクリプトや字幕を含める必要があります。 視覚障害のあるユーザーや、ビデオを見る代わりに読みたいユーザーにはトランスクリプトが必要ですが、ビデオを聞くことができない、または聞きたくないユーザーには字幕が必要です。

オーディオとビデオのレンズを使用するには、次の質問を自問してください。

• 自動再生で煩わしいオーディオやビデオはありますか？
• 自動再生されるオーディオまたはビデオを停止、一時停止、または非表示にするためのコントロールを提供することは可能ですか？
• ビデオにはトランスクリプトや字幕がありますか？

色のレンズ

デザインでは色が重要な役割を果たします。 色は感情、感情、アイデアを呼び起こします。 色は、ブランドのメッセージと認識を強化するのにも役立ちます。 しかし、ユーザーが色を見ることができないか、色を異なって認識すると、色の力は失われます。

色覚異常は、男性の約12人に1人、女性の200人に1人に影響を及ぼします。 先天赤緑異常（赤緑色覚異常）は、色覚異常の最も一般的な形態であり、男性の約6％に影響を及ぼします。 赤緑の色覚異常のユーザーは、通常、赤、緑、オレンジを黄色がかった色として認識します。

色の意味は、海外のユーザーにとっても問題があります。 色は国や文化によって意味が異なります。 西洋文化では、赤は通常、否定的な傾向と緑の肯定的な傾向を表すために使用されますが、東部とアジアの文化ではその逆が当てはまります。

色とその意味は、文化の違いや色覚異常によって失われる可能性があるため、常に非色識別子を追加する必要があります。 アイコンやテキストの説明などの識別子は、文化の違いを埋めるのに役立ちますが、パターンは色を区別するのに役立ちます。

過飽和色、コントラストの高い色、さらには黄色だけでも、一部のユーザー、特に自閉症スペクトラムのユーザーにとっては不快で不安を感じる可能性があります。 ユーザーが快適に過ごせるように、これらのタイプの色の高濃度を避けるのが最善です。

前景色と背景色のコントラストが低いと、視力の弱いユーザー、ローエンドモニターを使用しているユーザー、または直射日光が当たっているユーザーには見づらくなります。 キーボードを使用するユーザーが使用するすべてのテキスト、アイコン、およびフォーカスインジケーターは、背景色に対して4.5：1の最小コントラスト比を満たす必要があります。

また、Windowsハイコントラストモードのさまざまな設定でデザインと色が適切に機能することを確認する必要があります。 よくある落とし穴は、特定の高コントラストモードの背景でテキストが見えなくなることです。

Lens of Colorを使用するには、次の質問を自問してください。

• デザインから色を削除すると、どのような意味が失われますか？
• 色を使わずにどうすれば意味を提供できますか？
• ユーザーが過度に刺激されたり不快になったりする可能性のある色が過飽和または高コントラストになっていますか？
• すべてのテキスト、アイコン、フォーカスインジケーターの前景色と背景色は、4.5：1のコントラスト比のガイドラインを満たしていますか？

コントロールのレンズ

「インタラクティブコンテンツ」とも呼ばれるコントロールは、ボタン、リンク、入力、またはイベントリスナーを使用するHTML要素など、ユーザーが操作できるUI要素です。 コントロールが小さすぎたり、近すぎたりすると、ユーザーに多くの問題を引き起こす可能性があります。

震えのある人や、年齢が原因で器用さが低下している人など、ポインターを正確に使用できないユーザーにとっては、小さなコントロールをクリックするのは困難です。 たとえば、チェックボックスとラジオボタンのデフォルトのサイズは、年配のユーザーに問題を引き起こす可能性があります。 代わりにクリックできるラベルが提供されている場合でも、すべてのユーザーがそうできることを知っているわけではありません。

コントロールが近すぎると、タッチスクリーンユーザーに問題が発生する可能性があります。 指は大きく、正確にするのは難しいです。 誤って間違ったコントロールに触れると、特にそのコントロールがあなたを遠ざけたり、コンテキストを失ったりした場合に、フラストレーションを引き起こす可能性があります。

別のコントロール内にネストされているコントロールも、タッチエラーの原因となる可能性があります。 HTML仕様で許可されていないだけでなく、必要なコントロールの代わりに誤って親コントロールを選択することも簡単にできます。

コントロールを正確に選択するための十分なスペースをユーザーに提供するために、コントロールの推奨最小サイズは34 x 34デバイスに依存しないピクセルですが、Googleは少なくとも48 x 48ピクセルを推奨し、WCAG仕様は少なくとも44 x44ピクセルを推奨しています。 このサイズには、コントロールのパディングも含まれます。 したがって、コントロールは視覚的に24 x 24ピクセルにすることができますが、すべての側面に10ピクセルのパディングを追加すると、最大44 x44ピクセルになります。

また、タッチエラーを減らすために、コントロールを十分に離して配置することをお勧めします。 Microsoftは、少なくとも8ピクセルの間隔をお勧めしますが、Googleは、コントロールを少なくとも32ピクセル離して配置することをお勧めします。

コントロールには、テキストラベルも表示する必要があります。 スクリーンリーダーは、コントロールの機能を知るためにテキストラベルを必要とするだけでなく、テキストラベルは、すべてのユーザーがコントロールの目的をよりよく理解するのに役立つことが示されています。 これは、フォーム入力とアイコンにとって特に重要です。

Lens of Controlsを使用するには、次の質問を自問してください。

• 誰かが触れるのに十分な大きさのコントロールはありませんか？
• 間違ったコントロールに簡単に触れることができるように、コントロールが近すぎませんか？
• 別のコントロールまたはクリック可能な領域内にコントロールはありますか？
• すべてのコントロールにテキストラベルが表示されていますか？

フォントのレンズ

Webの初期には、フォントサイズが9〜14ピクセルのWebページを設計していました。 モニターの画面サイズは比較的わかっていたため、これは当時は問題なく機能していました。 ブラウザのウィンドウは一定であり、変更できないものであると考えて設計しました。

今日のテクノロジーは、20年前とは大きく異なります。 今日、ブラウザは、小さな時計から巨大な4K画面まで、あらゆるサイズのあらゆるデバイスで使用できます。 固定フォントサイズを使用してサイトをデザインすることはできなくなりました。 フォントサイズは、デザイン自体と同じくらいレスポンシブでなければなりません。

フォントサイズがレスポンシブであるだけでなく、ユーザーがフォントサイズ、行の高さ、または文字間隔を快適な読み取りレベルにカスタマイズできるように、デザインは十分に柔軟である必要があります。 多くのユーザーは、より良い読書体験を提供するのに役立つカスタムCSSを利用しています。

フォント自体は読みやすいものでなければなりません。 あるフォントが別のフォントより読みやすいかどうか疑問に思われるかもしれません。 問題の真実は、フォントが読みやすさに実際に違いをもたらさないということです。 代わりに、フォントの読みやすさにおいて重要な役割を果たすのはフォントスタイルです。

装飾的または筆記体のフォントスタイルは、多くのユーザーにとって読みにくいですが、失読症のユーザーにとっては特に問題があります。 小さいフォントサイズ、斜体のテキスト、およびすべての大文字のテキストも、ユーザーにとって困難です。 全体として、テキストを大きくし、行の長さを短くし、行の高さを高くし、文字間隔を大きくすると、すべてのユーザーがより良い読書体験を得るのに役立ちます。

Lens of Fontを使用するには、次の質問を自問してください。

• ユーザーがフォントを読みやすいレベルに変更できるように、デザインは十分に柔軟ですか？
• フォントスタイルは読みやすいですか？

画像とアイコンのレンズ

彼らは、「絵は千の言葉に値する」と言います。 それでも、見えない絵は無言ですよね？

デザインで画像を使用して、特定の意味や感情を伝えることができます。 また、複雑なアイデアを単純化するために使用することもできます。 画像の場合はどちらの場合でも、スクリーンリーダーを使用するユーザーには、画像の意味を伝える必要があります。

デザイナーとして、あなたは画像が伝える意味や情報を最もよく理解しています。 そのため、後で省略したり誤解したりしないように、この情報でデザインに注釈を付ける必要があります。 これは、画像の代替テキストを作成するために使用されます。

画像をどのように説明するかは、コンテキスト、または情報を説明するテキスト情報がすでに利用可能であるかどうかに完全に依存します。 また、画像が装飾用であるか、意味を伝えるためのものであるか、テキストが含まれている場合でも異なります。

「写真がどのように見えるかを説明することはほとんどありません。代わりに、写真に含まれる情報を説明します。」

—準拠した代替テキストの5つのゴールデンルール

画像の記述方法を知ることは難しい場合があるため、決定する際に役立つ便利な決定木があります。 一般的に、画像が装飾的であるか、画像の情報をすでに説明している周囲のテキストがある場合、それ以上の情報は必要ありません。 それ以外の場合は、画像の情報を説明する必要があります。 画像にテキストが含まれている場合は、説明のテキストも繰り返します。

説明は簡潔にする必要があります。 2文以内を使用することをお勧めしますが、可能な場合は1つの簡潔な文を目指してください。 これにより、ユーザーは長い説明を聞かなくても画像をすばやく理解できます。

例として、この画像をスクリーンリーダー用に説明するとしたら、何と言いますか？

画像自体ではなく画像の情報を説明しているので、それを説明する周囲のコンテキストが他にないため、説明はヴィンセントヴァンゴッホの星月夜である可能性があります。 あなたが入れてはいけないのは、絵のスタイルや絵がどのように見えるかの説明です。

画像の情報に複雑なグラフなどの長い説明が必要な場合は、その説明を代替テキストに入れないでください。 代わりに、代替テキストに短い説明を使用してから、キャプションまたは別のページへのリンクとして長い説明を提供する必要があります。

このようにして、ユーザーは最も重要な情報をすばやく取得できますが、必要に応じてさらに掘り下げることができます。 画像がグラフの場合は、画像のテキストの場合と同じようにグラフのデータを繰り返す必要があります。

設計しているプラ​​ットフォームでユーザーが画像をアップロードできる場合は、ユーザーが画像と一緒に代替テキストを入力する方法を提供する必要があります。 たとえば、Twitterでは、ユーザーが画像をツイートにアップロードするときに代替テキストを書き込むことができます。

画像とアイコンのレンズを使用するには、次の質問を自問してください。

• 画像に表示されなかった場合に失われる情報が含まれている画像はありますか？
• 非視覚的な方法で情報を提供するにはどうすればよいですか？
• 画像がユーザーによって制御されている場合、ユーザーが代替テキストの説明を入力する方法を提供することは可能ですか？

キーボードのレンズ

キーボードのアクセシビリティは、アクセシブルなデザインの最も重要な側面の1つですが、最も見過ごされている側面の1つでもあります。

ユーザーがマウスの代わりにキーボードを使用する理由はたくさんあります。 スクリーンリーダーを使用するユーザーは、キーボードを使用してページを読みます。 震えのあるユーザーは、マウスよりも精度が高いため、キーボードを使用できます。 キーボードはより高速で効率的であるため、パワーユーザーでもキーボードを使用します。

キーボードを使用するユーザーは通常、タブキーを使用して各コントロールに順番に移動します。 タブ順序の論理的な順序は、ユーザーが次にキーを押すとどこに移動するかを知るのに大いに役立ちます。 西洋文化では、これは通常、左から右、上から下を意味します。 予期しないタブの順序により、ユーザーは迷子になり、フォーカスがどこに移動したかを必死にスキャンする必要があります。

順番にタブを並べるということは、必要なコントロールの前にあるすべてのコントロールをタブで移動する必要があることも意味します。 そのコントロールが数十または数百のキーストローク離れている場合、それはユーザーにとって本当の問題点になる可能性があります。

最も重要なユーザーフローをタブオーダーの一番上に近づけることで、ユーザーがより効率的かつ効果的になるように支援できます。 ただし、これが常に可能であるとは限らず、実用的でもありません。 このような場合でも、特定のフローまたはコンテンツにすばやくジャンプする方法を提供することで、それらを効率的にすることができます。 これが、「コンテンツにスキップ」リンクが役立つ理由です。

この良い例は、ユーザーがサイトの特定のセクションにジャンプできるキーボードナビゲーションメニューを提供するFacebookです。 これにより、ユーザーが必要なページやコンテンツを操作する機能が大幅に高速化されます。

デザインをタブで移動するときは、フォーカススタイルを常に表示する必要があります。そうしないと、ユーザーが簡単に迷子になる可能性があります。 予期しないタブの順序と同様に、フォーカスインジケーターが適切でない場合、ユーザーは現在フォーカスされているものがわからず、ページをスキャンする必要があります。

デフォルトのフォーカスインジケーターの外観を変更すると、ユーザーのエクスペリエンスが向上する場合があります。 優れたフォーカスインジケーターは、フォーカス（色のレンズ）を示すために色だけに依存するのではなく、ユーザーが簡単に見つけられるように十分に区別できる必要があります。 たとえば、同じ色の青いボタンの周りの青いフォーカスリングは、フォーカスされていることを識別するために視覚的に区別できない場合があります。

このレンズはキーボードのアクセシビリティに焦点を当てていますが、ユーザーがマウスなしでWebサイトを操作できるすべての方法に適用されることに注意することが重要です。 マウススティック、スイッチアクセスボタン、一口およびパフボタン、視線追跡ソフトウェアなどのデバイスはすべて、ページがキーボードでアクセス可能である必要があります。

キーボードのアクセシビリティを改善することで、幅広いユーザーがサイトにアクセスしやすくなります。

キーボードのレンズを使用するには、次の質問を自問してください。

• デザインにとって最も意味のあるキーボードナビゲーションの順序は何ですか？
• キーボードユーザーは、どのようにして必要なものに可能な限り迅速に到達できるでしょうか。
• フォーカスインジケーターは常に表示され、視覚的に区別されますか？

レイアウトのレンズ

レイアウトは、サイトのユーザビリティに大きく貢献します。 わかりやすくコンテンツを見つけやすいレイアウトにすることで、ユーザーにすべての違いをもたらします。 レイアウトには、ユーザーにとって意味のある論理的なシーケンスが必要です。

CSSグリッドの登場により、使用可能なスペースに基づいてレイアウトをより意味のあるものに変更できるようになり、これまでになく簡単になりました。 ただし、視覚的なレイアウトを変更すると、ページの構造的なレイアウトに依存しているユーザーにとって問題が発生します。

構造レイアウトは、スクリーンリーダーとキーボードを使用するユーザーが使用するものです。 視覚的なレイアウトは変更されますが、基になる構造レイアウトは変更されない場合、これらのユーザーは、タブの順序が論理的ではなくなるため、混乱する可能性があります。 視覚的なレイアウトを変更する必要がある場合は、構造的なレイアウトを変更して、キーボードを使用するユーザーが順番に論理的なタブ順序を維持できるようにする必要があります。

レイアウトは、電話で快適に表示できるように、サイズ変更可能で、水平スクロールバーのない320ピクセル以上の柔軟性を備えている必要があります。 レイアウトは、より良い読書体験のためにフォントサイズを大きくする必要があるユーザーのために、400％にズームインするのに十分な柔軟性も必要です（水平スクロールバーもありません）。

画面拡大鏡を使用しているユーザーは、関連するコンテンツが互いに近接している場合にメリットがあります。 画面拡大鏡は、レイアウト全体の小さなビューをユーザーに提供するだけなので、関連しているが遠く離れているコンテンツ、またはインタラクションが発生した場所から遠く離れて変化しているコンテンツを見つけるのは難しく、見過ごされる可能性があります。

Lens of Layoutを使用するには、次の質問を自問してください。

• レイアウトには意味のある論理的な順序がありますか？
• 小さな画面で表示したり、400％に拡大したりすると、レイアウトはどうなりますか？
• ユーザーの操作によって関連または変更されたコンテンツは、互いに近接していますか？

素材の正直なレンズ

材料の正直さは、材料がそれ自体に正直であるべきであり、別の材料の代わりとして使用されるべきではないことを示す建築設計の価値です。 これは、コンクリートがコンクリートのように見えるべきであり、レンガのように塗装または彫刻されてはならないことを意味します。

素材の誠実さは、各素材のユニークな特性と特徴を尊重し、称賛します。 材料の正直さに従う建築家は、各材料をいつ使用すべきか、そしてそれ自体を傷つけずにそれを使用する方法を知っています。

しかし、物質的な正直さは厳格なルールではありません。 それは連続体の上にあります。 すべての値と同様に、理解したときにそれらを破ることができます。 ことわざにあるように、それらは「実際のルールよりも「ガイドライン」と呼ばれるものです」。

ウェブデザインに適用される場合、マテリアルの正直さは、ある要素またはコンポーネントが別の要素またはコンポーネントであるかのように見えたり、動作したり、機能したりしてはならないことを意味します。 これを行うと、ユーザーをだまし、混乱を招く可能性があります。 この一般的な例は、リンクのように見えるボタンまたはボタンのように見えるリンクです。

リンクとボタンの動作とアフォーダンスは異なります。 リンクはEnterキーでアクティブになり、通常は別のページに移動し、右クリックすると特別なコンテキストメニューが表示されます。 ボタンはスペースキーでアクティブになり、主に現在のページでインタラクションをトリガーするために使用され、そのようなコンテキストメニューはありません。

リンクがボタンのように、またはその逆に見えるようにスタイル設定されている場合、ユーザーは、リンクが見た目どおりに動作および機能しないため、混乱する可能性があります。 「ボタン」がユーザーを予期せず移動させた場合、その過程でデータを失った場合、ユーザーはイライラする可能性があります。

「一見、すべてが正常に見えますが、精査に耐えることはできません。 そのようなウェブサイトがさまざまなブラウザでの実際の使用法によってストレステストされるとすぐに、ファサードは崩れます。」

—弾力性のあるWebデザイン

これが最も問題になるのは、リンクとボタンのスタイルが同じで、隣り合って配置されている場合です。 この2つを区別するものは何もないため、ユーザーは、ナビゲートしないと思ったときに誤ってナビゲートする可能性があります。

コンポーネントの動作が予想と異なる場合、キーボードまたはスクリーンリーダーを使用しているユーザーにとって問題が発生しやすくなります。 オートコンプリートメニュー以上のオートコンプリートメニューは、そのような例の1つです。

オートコンプリートは、ユーザーが入力している残りの単語を提案または予測するために使用されます。 オートコンプリートメニューを使用すると、すべてのオプションを表示できない場合でも、ユーザーはオプションの大きなリストから選択できます。

オートコンプリートメニューは通常、入力フィールドに添付されており、上下の矢印キーを使用してナビゲートし、入力フィールド内にフォーカスを維持します。 ユーザーがリストからオプションを選択すると、そのオプションは入力フィールドのテキストを上書きします。 オートコンプリートメニューは、テキストのみのリストを意味します。

この問題は、オートコンプリートメニューがより多くの動作を取得し始めるときに発生します。 リストからオプションを選択できるだけでなく、オプションを編集、削除、またはセクションを展開または折りたたむこともできます。 オートコンプリートメニューは、選択可能なテキストの単なるリストではなくなりました。

追加された動作は、上下の矢印を使用してオプションを選択できることを意味しなくなりました。 各オプションに複数のアクションがあるため、ユーザーは1つではなく2つのディメンションをトラバースできる必要があります。 これは、キーボードを使用しているユーザーがコンポーネントの操作方法について混乱する可能性があることを意味します。

スクリーンリーダーは、この動作の変化に最も苦しんでいます。これは、スクリーンリーダーを理解するのに役立つ簡単な方法がないためです。 非標準の手段を使用してスクリーンリーダーがメニューにアクセスできるようにするには、多くの作業が必要になります。 そのため、標準以下またはアクセスできないエクスペリエンスが発生する可能性があります。

これらの問題を回避するには、ユーザーとデザインに正直であることが最善です。 2つの異なる動作（オートコンプリートメニューと編集および削除機能）を組み合わせる代わりに、それらを2つの別個の動作として残します。 オートコンプリートメニューを使用して、ユーザーの名前をオートコンプリートし、ユーザーを編集および削除するための別のコンポーネントまたはページを用意します。

Lens of Material Honestyを使用するには、次の質問を自問してください。

• デザインはユーザーに正直ですか？
• 別の要素として動作、外観、または機能する要素はありますか？
• 異なる動作を1つのコンポーネントに結合するコンポーネントはありますか？ そうすることで、コンポーネントが実質的に不正になりますか？

読みやすさのレンズ

数段落または数ページを入れるためだけに本を手に取って、テキストが読みづらかったために諦めたいと思ったことはありますか？ 読みにくいコンテンツは精神的に負担がかかり、疲れます。

文の長さ、段落の長さ、言語の複雑さはすべて、テキストの読みやすさに影響します。 複雑な言語は、ユーザー、特に認知障害のある人や言語に堪能でない人に問題を引き起こす可能性があります。

わかりやすくシンプルな言葉を使用することに加えて、各段落が1つのアイデアに焦点を合わせていることを確認する必要があります。 単一のアイデアを持つ段落は、覚えやすく、消化しやすいです。 単語が少ない文についても同じことが言えます。

コンテンツの読みやすさのもう1つの要因は、行の長さです。 理想的な行の長さは、45〜75文字であるとよく言われます。 行が長すぎると、ユーザーはフォーカスを失い、次の行に正しく移動できなくなります。一方、行が短すぎると、ユーザーが頻繁にジャンプし、目の疲れを引き起こします。

「次の行にジャンプすると、潜在意識が活気づきます。 すべての新しい行の冒頭で、読者は焦点を合わせていますが、この焦点は、行の期間中に徐々に消えていきます。」

—タイポグラフィ：デザインマニュアル

また、読者に精神的な休憩を与え、さまざまな学習スタイルをサポートするために、見出し、リスト、または画像でコンテンツを分割する必要があります。 見出しを使用して、情報を論理的にグループ化して要約します。 見出し、リンク、コントロール、およびラベルは、ユーザーの理解力を高めるために明確で説明的なものにする必要があります。

Lens of Readabilityを使用するには、次の質問を自問してください。

• 言語はわかりやすくシンプルですか？
• 各段落は単一のアイデアに焦点を当てていますか？
• 長い段落や途切れのないテキストの長いブロックはありますか？
• すべての見出し、リンク、コントロール、およびラベルは明確で説明的ですか？

構造のレンズ

Lens of Layoutで説明したように、構造レイアウトは、スクリーンリーダーとキーボードを使用するユーザーが使用するものです。 Lens of Layoutは視覚的なレイアウトに焦点を当てていますが、Lens of Structureは構造的なレイアウト、つまりデザインの基礎となるHTMLとセマンティクスに焦点を当てています。

デザイナーとして、あなたはあなたのデザインの構造的なレイアウトを書くことはできません。 しかし、これはあなたのデザインが最終的にどのように構造化されるかについて考えることを妨げるべきではありません。 そうしないと、デザインによってスクリーンリーダーにアクセスできなくなる可能性があります。

たとえば、ノックアウトトーナメントブラケットのデザインを考えてみましょう。

スクリーンリーダーを使用してユーザーがこのデザインにアクセスできるかどうかをどのように知ることができますか？ 構造とセマンティクスを理解していなければ、理解できないかもしれません。 現状では、このデザインは、スクリーンリーダーを使用しているユーザーがアクセスできないエクスペリエンスをもたらす可能性があります。

その理由を理解するには、まずスクリーンリーダーがページとそのコンテンツを順番に読み取ることを理解する必要があります。 これは、トーナメントの最初の列のすべての名前が読み取られ、次に2番目の列のすべての名前、次に3番目、最後の名前が読み取られることを意味します。

「ジョージ、フレッド、ライナス、ルーシー、ジャック、ジル、フレッド、ジンジャー、ジョージ、ルーシー、ジャック、ジンジャー、ジョージ、ジンジャー、ジンジャー。」

一見ランダムな名前のリストしかなかったとしたら、トーナメントの結果をどのように解釈しますか？ 誰がトーナメントに勝ったか教えてください。 または、誰がゲーム6に勝ちましたか？

スクリーンリーダーを使用しているユーザーは、これ以上作業する必要がないため、結果について少し混乱する可能性があります。 視覚的なデザインを理解できるようにするには、構造設計に関するより多くの情報をユーザーに提供する必要があります。

つまり、デザイナーは、スクリーンリーダーがページ上のHTML要素とどのように相互作用するかを知って、エクスペリエンスを向上させる方法を知る必要があります。

• ランドマーク要素（ヘッダー、ナビゲーション、メイン、およびフッター）
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” あなたは尋ねるかもしれません。

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

すべてをまとめる

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”