アクセシビリティ (a) ルール - 4

色とコントラスト

• テキストの画像を含む通常サイズのテキストのカラー コントラスト比は 4.5:1 である必要があります。

• 大きなサイズのテキスト (18pt / 24px または 14pt / 18.5px 太字) と重要なアイコンのカラー コントラスト比は 3:1 である必要があります。

• 色のコントラスト比を調べるには、Google Chrome の DevTools カラー ピッカーを使用します。

• すべてのユーザーがコンテンツを理解しやすくするために、グラフ、チャート、表の色と並んでパターン、テキスト、アイコンなどの追加の識別子を含めます。

• @prefers-color-scheme を使用してダークテーマを作成します。

• ハイ コントラスト テーマ @prefers-contrast を作成します。

アニメーションとモーション

点滅して動くコンテンツ

• 1 秒間に 3 回以上点滅するものは含めないでください。

• 一般フラッシュおよび赤色フラッシュしきい値を下回って点滅します。

動きを一時停止、停止、または非表示にする

• ページに一時停止、停止、または非表示のメカニズムを追加して、問題のある可能性のあるモーション アニメーションをユーザーがオフにできるようにします。

• これは画面レベルまたは要素レベルで実行できます。

メディアクエリを使用する

• @prefers-reduced-motion メディア クエリを使用して、アニメーションに関連するユーザーの OS 設定と、これらの設定を尊重するデザイン サイトをチェックします。

タイポグラフィ

• アクセシブルなデザインを作成する最も簡単な方法は、一般的な書体 (Arial、Times New Roman、Calibri、Verdana など) を選択することです。

• 装飾された書体や手書きの書体、および大文字と小文字が 1 つだけ使用できる書体 (たとえば、大文字のみ) は避けてください。

• 書体を探すときは、次の点に特に注意してください:

  • 可能な限り一般的なフォントを使用してください。
  • 精巧なフォントや手書きフォント、および大文字小文字が 1 つだけのフォントの使用は避けてください。
  • 大文字の I、小文字の l、および 1 に特に注意して、独自の特徴を持つ書体を選択してください。
  • 特定の文字の組み合わせを確認して、それらが互いに完全に鏡像になっていないことを確認してください。
  • 特に r と n の文字ペアの間のカーニングを確認してください。

フォントサイズと文字体裁のスタイル

• サイズ変更を可能にするために、基本フォント サイズは相対値 (%、rem、または em) で定義する必要があります。

• 読みやすさを高めるために、色、太字、すべて大文字、斜体などの書体のバリエーションの数を制限します。代わりに、アスタリスク、ダッシュ、個々の単語の強調表示など、コピー内の単語を強調する方法を使用してください。

• 可能な限り、画像上でテキストの代わりにマークアップを使用してください。スクリーン リーダーは、画像に埋め込まれたテキストを (追加のコードを追加しない限り) 読み取ることができません。また、視覚障害のあるユーザーが拡大すると埋め込みテキストがピクセル化される可能性もあります。

構造とレイアウト

• 重要な要素は互いに区別する必要があり、類似した要素はグループ化する必要があります。

間隔

• 読みやすさを向上させ、障害のある読者がコンテンツを理解しやすくするために、テキスト ブロックは狭くする必要があります。

コンテンツの配置

• 不均等な間隔は、特に障害のある人の読みやすさを妨げるため、両端揃えのテキストは避けてください。また、単語の間隔が歪んで、単語の境界を識別するのが難しくなる可能性があります。

• コピーをよりアクセスしやすくするためのスペースと、適切な線の高さや黄金比計算ツールなどのツール。

構造とレイアウトのベスト プラクティス

• 見出し、小見出し、リスト、数字、引用ブロック、その他の視覚的なグループなどの要素を使用して、ページをセクションに分割します。

• 明確に定義された段落、文、単語の間隔を使用します。

• 幅 80 文字 (表語文字の場合は 40 文字) 未満のコピーの列を作成します。

• コピー内に「スペースの川」ができるため、段落の両端揃えは避けてください。

以上がアクセシビリティ (a) ルール - 4の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。