私のブックマーク
ブックマークを追加
ブックマークを削除ウェブアクセシビリティの4つの原則
ウェブアクセシビリティは複雑なテーマですが、結局のところ4つの原則に集約されます。コンテンツは次のようにする必要があります：
知覚可能
コンテンツはすべての人に利用可能でなければなりません。特定のデバイスやブラウザに依存したり、視覚や聴覚など特定の身体的感覚を必要としたりしてはいけません。
操作可能
ユーザーは、キーボード、マウス、または支援技術を使用して、最終的なサイトを効果的に移動し操作できる必要があります。
理解可能
コンテンツは理解をサポートする方法で提示されるべきであり、スクリーンリーダーユーザーのためにサイトのメンタルモデルの構築を支援する必要があります。同様に、サイトの操作（ナビゲーションメニュー、リンク、フォームなど）は簡単に理解できるべきです。主要なコンテンツエリア内のリンクに下線を引くなど、既知のユーザー行動を取り入れたテーマを構築することがこの点で役立ちます。
堅牢
コンテンツは、幅広いユーザーエージェントで同等に利用可能でなければなりません。障害のあるユーザーは、ウェブにアクセスするためにさまざまなハードウェアおよびソフトウェアソリューション（一般に「支援技術」と呼ばれる）を使用する場合があります。これには、スクリーンリーディングおよび音声認識ソフトウェア、点字リーダー、スイッチ（単一入力デバイス）が含まれます。
これらの4つの原則を考慮して設計されたテーマは、アクセシブルなウェブサイトの作成を容易にします。
知覚可能かつ理解可能
色と色のコントラスト
背景色と前景色の間に十分な色のコントラストがあることで、コンテンツが読みやすくなります。テーマの作成者は、プレーンコンテンツテキストのすべての背景/前景の色のコントラストが、ウェブコンテンツアクセシビリティガイドライン（WCAG）2.0で指定されたAAレベルのコントラスト比（4.5:1）内に収まるようにする必要があります。
- 色だけでコントロール、テキストコンテンツ内のリンク、またはエラーメッセージを識別することはできません。
- リンクテキストにテキスト装飾がない場合、リンクテキストの色と周囲の非リンクテキストの色の間に3:1の色のコントラストが必要です。その他の色のコントラスト要件に加えて。
コンテンツ内のリンク（他のテキストに囲まれたリンク）とナビゲーションメニューにグループ化されたリンクには別の要件があります。リンクのグループは、文脈から明らかであれば下線を引く必要はありません。
リサイズ可能なテキスト
ユーザーは、ブラウザの設定を含む多くの手段でテキストをリサイズできます。ユーザーがテキストを元のサイズの200%までリサイズしても、すべてのコンテンツと機能は利用可能でなければなりません。
- テキストのリサイズは多次元スクロールを引き起こしてはいけません。
- 拡大されたテキストはオーバーフローや重なりを引き起こしてはいけません。
これらの問題を避けるために、次のことをお勧めします：
- フォントサイズと行の高さに相対単位を使用する。
- 異なるブラウザや画面幅でテーマをテストする。
フォントサイズとリサイズされたテキストに関するベストプラクティス
画像
装飾的でない画像
例：
- ヘッダーのテキストを置き換えるヘッダー画像
- ナビゲーションのためにテキストの代わりに使用される画像
img要素に含まれる装飾的でない画像には、alt属性が必要です。
装飾的な画像
例：
- ヘッダーのテキストと一緒に使用されるヘッダー画像
- ナビゲーションテキストリンクに付随する画像やアイコン
可能な場合、装飾的な画像は
aCSSを使用して含めるべきです。
img要素に含まれる装飾的な画像には、空のalt属性が必要です：alt=""。- テキストと一緒に表示される装飾的な画像は、
aria-hiddenを使用してスクリーンリーダーから隠すべきです。
特集画像
特集画像のalt属性はメディアライブラリで定義されています。
- 特集画像がリンクされていない場合、alt属性は画像を説明する必要があります。
- 特集画像が投稿にリンクされている場合、altテキストは投稿のタイトルを使用する必要があります。
操作可能
コントロール
すべてのコントロールは、メニュー、サブメニュー、ダイアログ、モーダル、ポップアップの開閉ボタンを含むすべての画面サイズでキーボードで使用可能でなければなりません。
見出し
見出しは、コンテンツを論理的なサブセクションに分割するための重要な方法です。見出しのレベルはコンテンツの重要性を示します。スクリーンリーダーユーザーは、見出しを読み取ることでページの内容をスキャンし、見出しを介してセクションに移動できます。したがって、見出しは論理的に使用され、プレゼンテーションの目的で使用されないことが重要です。
リンク
リンクテキスト
リンクテキストは、リンク先のリソースを説明する必要があります。たとえテキストが文脈から外れて読まれてもです。一部の支援ソフトウェアは、ページ内のリンクをスキャンし、ユーザーにシンプルなリストとして提示します。このような状況では、すべてのリンクが文脈から外れて読み上げられます。したがって、リンクに使用されるテキストは説明的であることが重要です。裸のURLはリンクとして使用されるべきではありません。
アクセシビリティ準拠要件：繰り返しの「続きを読む」や「続けて読む」テキストを避ける
リンクの下線とリンク状態のスタイリング
一般的に、リンクはナビゲーションメニューやリストの外にある場合、下線を引くべきです。色だけを使用してリンクを区別することは不十分です。すべての人が色を認識できるわけではありません。
ユーザーは、リンクにマウスをホバーさせているとき、リンクにフォーカスしているとき、すでに訪れたリンクであるときに、テキストがリンクであるかどうかを判断できる必要があります。フォーカス状態のデフォルトブラウザスタイルは、より目立つフォーカススタイルに置き換えられない限り、削除してはいけません。
コンテンツ内のリンクに下線を引くためのアクセシビリティ準拠要件
スキップリンク
スキップリンクは、ユーザーが任意のページに入るときにコンテンツやナビゲーションに直接移動できるメカニズムを提供します。たとえば、コンテンツにスキップするリンクを使用すると、ユーザーはヘッダーエリアをスキップしてメインコンテンツに直接移動できます。
複数のメニューやコンテンツエリアを持つデザインでは、複数のスキップリンクを使用できます：
- メインナビゲーションにスキップ
- コンテンツにスキップ
- フッターにスキップ
これらのリンクは、適切な
aCSS技術を使用して初めは画面外に配置される場合がありますが、スクリーンリーダーユーザーには利用可能であり、視覚的なキーボードナビゲーターにはフォーカス時に表示されるべきです。
フォーム
- ユーザーがフォームを完了できるように十分な情報を提供します。
- すべての入力フィールドにはラベルが必要です。プレースホルダーテキストはラベルの代わりにはなりません。入力フィールドには、可視のフォーカススタイルも必要です。
- 関連するチェックボックスのセットなど、関連するコントロールを
fieldsetおよびlegendでグループ化します。 - フォーム内のタブ順序が入力フィールドの視覚的順序と一致することを確認します：フォーカスを予期せず移動したり、入力フィールドをスキップしたりしないでください。
フォーム送信時
送信後の応答（エラーメッセージを含む）は常に知覚可能であるべきです。可能であれば、エラーメッセージは送信後のページの上部に生成され、ユーザーがすぐに問題を認識できるようにするべきです。エラーメッセージは、文脈から外れて読まれても意味があるべきです。
堅牢
コンテンツに最も適したHTML要素を使用します。アクションを実行する際にはボタンを使用し、ページの一部や新しいページに移動する際にはリンクを使用します。
- ユーザーがJavaScriptとCSSの両方を無効にしても、ウェブサイトのコンテンツは利用可能であるべきです。
- テーマがサポートするbrowsersを特定し、異なる画面サイズでこれらのブラウザでテーマをテストします。
リソース
Make WordPress Accessibleは、できるだけ多くの人々にWordPressをアクセシブルにすることを目的としたWordPressアクセシビリティチームの公式ブログです。誰でも議論、バグスクラブ、会議に参加できます。また、メールを通じて議論をフォローしたり、投稿やコメントのフィードを購読したりすることもできます。
変更履歴：
- 書き直して公開 2023-02-16
