記事アクセシブルなデザインの 8 つの間違いを回避して、思いやりを行動に移す

公開: 2022-08-12

アクセシブルなデザインは、年齢や能力に関係なく、すべての個人の独自性を尊重します。 それは、すべての人が自分と同じではないことを認識することから始まります。

さまざまなユーザーに最適なサービスを提供するには、あらゆる種類の人々を理解し、共感することが不可欠です。 WCAG 2.0 AA ガイドラインに従うことで、失明や視覚障害、難聴や難聴、学習障害、認知制限、運動制限、発話障害、光線過敏症など、さまざまな障害を持つ人々がコンテンツにアクセスできるようになります。 Web サイトにアクセスするすべてのユーザーに確実にサービスを提供するには、これらの 8 つのアクセシブルなデザインの間違いを避けてください。

1.キーボードトラップ

支援技術を使用する一部の人々は、目に見える画面上のアクションに依存しています。 したがって、優れた設計では、ナビゲーションに関連するすべてのコンテンツが確実に表示されます。 ユーザーがコンテンツを理解し、情報に基づいてナビゲーションを選択できるように、項目を論理的に (左上から右下に) 並べてください。

チップ：

  • メイン コンテンツ:ユーザーがトップ レベルのナビゲーションを簡単にスキップしてメイン コンテンツにアクセスできる方法を提供することを検討してください。
  • UI パターン:トグル、タブ、テーブル、モーダル ウィンドウ、ARIA 属性などの一般的なパターンのセマンティクスに従います。
  • ホバーの使用法:ホバー状態の背後にあるテキストやアクションを非表示にしないでください。 キーボードのみのユーザーがコンテンツ/ボタンの存在を確認できない場合、ページをナビゲートできません。

良いスキップ リンクの例 #1

An example from a skip link from chase.
白い「メイン コンテンツにスキップ」ボタンを使用すると、ユーザーはトップレベルのナビゲーションをスキップできます

良いスキップ リンクの例 #2

An example of a skip link from Starbucks.
[メイン ナビゲーションにスキップ] ボタンは明確であり、ユーザーは最上位のナビゲーションをスキップできます。

2. 不十分な色のコントラスト

色のコントラストが不十分であると、情報を視覚的に受け取る能力に影響を与えます。 テキストが読みやすいように、テキストとその背景の間に十分なコントラストがあることを確認してください。 テキストとテキストの背景のコントラスト比は 4.5 対 1 以上である必要があります。ただし、テキストが 24 ピクセルまたは 19 ピクセルの太字である場合、最小値は 3 対 1 に低下します。

チップ：

  • カラーパレット:原色を意識してください。 さらに、色を選択するときは、色のコントラストの要件を念頭に置いてください。
  • 色だけに頼らないでください:形、色、テキスト (単独ではなく) を組み合わせて意味を伝え、一貫性を保ちます。 色を簡単に区別できない人でもコンテンツを理解できるように、少なくとも 2 つの指標を提供します。
  • 例外:コンテンツの意味を理解する必要のないテキスト、テキストのイメージ、写真、およびロゴ、または純粋な「装飾」です。

コントラスト不足の例

An example of a website button color fail
「詳細」ボタンのコントラストが不十分です: 16px のフォント サイズで 4.46:1 のコントラスト比

3. 画像内のテキスト

読むことを意図したテキストの画像の使用は避けてください。 画像ベースのテキスト表示ではなく、CSS でスタイル設定された実際のテキストを使用してください。 テキストの画像を使用する必要がある場合、代替テキストには、画像に表示されているものと同じテキストを含める必要があります。

チップ：

  • ダイアグラム、チャート、表:データの視覚化に実際のテキストを使用します。 実際のテキストが不可能な場合は、画像によって伝えられる重要な情報をテキストで表現することが不可欠です。 例: 詳細な説明またはリスト ビュー。
  • 例外:ロゴ、ブランド要素、およびグラフィックスで、適切な説明テキストによる代替があります。

画像内の適切なテキストの例

A table with a link to a page that has decription of content
コンテンツの詳細な説明があるページへのリンクを含む表

4. 隠されたフォーカス状態

フォーカス状態は、ユーザーがどこにいるかをナビゲートして理解するのに役立ちます。 それらを決して隠してはいけません。 フォーカス状態は、キーボード ユーザーにとって重要です。 ページのどこにいるのかを理解するのに役立ちます。 サイトをテストするには、ページをタブで移動して、フォーカスを見つけます。

チップ：

  • フォーカス状態:デフォルトのフォーカス状態を削除する場合は、ブラウザーが提供するものよりも適切に機能するものに置き換えてください。
  • 入力の状態: 入力の内部に注目すると、ラベルがどうなるかを考えてみましょう。
  • ページ アクション: アクションのフォーカスの副作用を明確に定義します。

隠しフォーカス状態

An example of hidden focus states
非表示のフォーカス状態の例。 ユーザーがタブを移動するとき、インジケータはありません。

良好なフォーカス状態

Example of proper focus states.
ユーザーがナビゲーションをタブで移動するときの適切なフォーカス状態の例

5. 紛らわしい階層構造

知覚可能なコンテンツとプログラムで判断できるコンテンツとの間に明確な関係を作成します。 開発者がデザインからコードに変換し、スクリーンリーダーが正しい読み取り順序を判断できるように、意味的に意味のあるページをデザインします。

チップ：

  • セマンティクス:フォームに必須フィールドとラベルを含めます。 列見出しのある表を設計します。
  • 論理グループ:関連する要素を十分なスペースまたは背景色でグループ化します。 プロセス図や段階的な指示など、情報を順番に提示します。
  • プログレッシブ開示:直接操作のための設計。 適切なタイミングで適切なものを提示します。 漸進的開示を実行します。
  • 道案内:ナビゲーションのための一貫した手がかりを作成します。 見出しを使用して、ページ内に明確なランドマークを作成します。
  • 一貫性：同じものを同じように提示する。
  • 区別する:さまざまなコンテンツ タイプを区別します。

悪い階層

An example of flawed structure.
不適切な順序の階層。 複数の H1 があります。 H3 は H2 の前に表示されます。

良いヒエラルキー

A good hierarchy example from Dell.com.
よく組織された階層。 H1 は H3 に先行する H2 に先行します。

6. 過剰な認知負荷

わかりやすい情報をわかりやすく伝える。 注意欠陥多動性障害 (ADHD)、および自閉症または自閉症スペクトラム障害を持つ人々にとって消費しやすい方法で情報を設計します。

チップ：

  • 簡潔にする:短い文と視覚的な合図を使用して情報を分けます。 例: 番号または箇条書きを使用してグループを一覧表示します。
  • 認知負荷を最小限に抑える:情報を適切なタイミングで適切な場所に提示する物語を作成します。 分割される可能性のある情報の密集した段落を提示することは避けてください。 長蛇の列対策は避けてください。

7. 差別化されていないハイパーリンク

リンクは Web で最も一般的な要素の 1 つであり、多くの場合、Web サイトをナビゲートするために不可欠です。 リンクはリンクのように見える必要があり、それ以外は何もすべきではありません。 リンクのように見えて実際にはリンクされていないテキスト フレーズやグラフィックをクリックしようとすると、ユーザーはイライラすることがあります。 リンクは、文脈に関係なく意味をなすものでなければなりません。

チップ：

  • 具体的に:結果が予測できるように、あいまいな用語ではなくボタンにわかりやすい言葉を使用します。
  • 下線のないリンク:リンク テキストは、周囲のリンクのないテキストとのコントラスト比が 3:1 でなければなりません。
  • 色だけに依存しないでください:リンクは、マウス ホバーとキーボード フォーカスの両方で「色以外の指定子」を提示する必要があります。例: ドロップ シャドウ、スケール、トランジション/トランスフォーム、色の変更、または下線。

悪いハイパーリンク

An example where the CTA is not meaningful
「もっと詳しく」に意味はない

良いハイパーリンク

An example of a meaningful CTA.
「私たちについてもっと知る」には意味があります

8. 読みにくいタイポグラフィ

Web サイト上のほとんどの情報はテキストで伝達されるため、文字は読みやすく読みやすいものにする必要があります。 これにより、弱視の人が文字を簡単に認識できるようになります。 学習障害のある人の読書の負担を軽減できます。 きれいでシンプルなタイポグラフィを適切な間隔で使用してください。 見やすいカーニングと行送りを適用して、テキストが読みやすいようにします。

チップ

  • ユーザーが制御できるようにする:本文のコピー サイズを小さいフォント サイズに変更することで、ユーザーが独自の閲覧エクスペリエンスを調整することを妨げないでください。 これを行うには、フォント サイズを 100% に設定し、相対的なサイズを使用して見出し間の階層を確立します。 テキストは 200% で読みやすいはずです。
  • 下線、イタリック体、および大文字を減らします。これらの文字形式は、認識と読み取りがより困難になります。
  • 長い形式のテキストを左に揃える:目で追うことができるように、直線的な経路で一貫したレイアウトを作成します。

100% にズーム

The NY Times website at 100% zoom.
ニューヨークタイムズのウェブサイト 100%

テキストのサイズを変更します。 視覚障害のあるユーザーや弱視のユーザーがページにアクセスして使用できることを確認してください。 テキストのサイズを変更し、ページ上のすべてが機能することを確認します。 200% ズームになるまで繰り返します。 シンプルに見えますか？ です。

タイポグラフィを確認する手順:

  1. ブラウザーを開き、テキストのサイズを 200% に変更します。 [表示] をクリックし、[ズーム] を選択してから、[拡大] (Ctrl/Cmd ++) をクリックしてテキスト サイズを拡大します。
  2. 画面上のコンテンツがどのように反応したかを見てみましょう。 ページ上のすべてのコンテンツは引き続き読み取り可能であり、機能が失われることはありません。
  3. インタラクションが引き続き機能するかどうか、テキストが重なっているかどうか、重要なテキストが切り捨てられているかどうか、またはテキストが切り取られていないかどうかを確認してください。

200% にズーム

An example of a resizing design fail from the NY Times.
New York Times の Web サイトを 200% ズームで表示。 タイポグラフィはすべて判読不能です。

チップ：

  1. ブラウザーを開き、テキストのサイズを 200% に変更します。 [表示] をクリックし、[ズーム] を選択してから、[拡大] (Ctrl/Cmd ++) をクリックしてテキスト サイズを拡大します。
  2. 画面上のコンテンツがどのように反応したかを見てみましょう。 ページ上のすべてのコンテンツは引き続き読み取り可能であり、機能が失われることはありません。
  3. インタラクションが引き続き機能するかどうか、テキストが重なっているかどうか、重要なテキストが切り捨てられているかどうか、またはテキストが切り取られていないかどうかを確認してください。

資力

米国ではおよそ 8 人に 1 人が障害を持っています。 定義を拡張して中等度障害者を含めると、その数はほぼ 5 人に 1 人に跳ね上がります。

このような大勢の視聴者に対応できないと、ウェブサイトがビジネスに与えるプラスの影響が制限されます。言うまでもなく、人々の共感を呼び、信念を刺激するブランドの能力は言うまでもありません。 できるだけ多くのブラウザーで、できるだけ多くの人が使用できるアクセシブルな Web サイトを構築することは、ビジネスに役立ちますが、それは正しいことでもあります。 そこで、このトピックに関する他のリソースをいくつかまとめました。

  • 企業が Web アクセシビリティを考慮する (そして企業訴訟を回避する) ことが重要である理由を調べてください。
  • Web アクセシビリティの重要性については、Solving for B° Podcast をご覧ください。

色のコントラスト

  • Web AIM コントラスト チェッカー
  • 着色可能なコントラストチェッカー

構造

  • 見出しマップ Chrome 拡張機能
  • A11Y プロジェクト パターン ライブラリ

クレジット

  • A11Y プロジェクト
  • w3.org-WCAG 2.0
  • w3.org- 標準と概要
  • Usability.org
  • IBM でのアクセシビリティ研究
  • ピッツバーグのカーネギー美術館Disney.com 良いヒエラルキー