(旧版) アクセシビリティコーディング規約
Topics
注意: この文書の現在の版はこちらです。
ここでは WordPress コアにマージを予定するコードが満たすべきアクセシビリティについて規定します。 WordPress のすべての新規コード、更新コードは WCAG 2.0 Guideline の Level AA に準拠する必要があります。なお、この基本のガイドラインは開発における簡便なリファレンスを目指しており、考え得るすべてのアクセシビリティ問題をカバーする意図はありませんので注意してください。
「Accessibility Handbook」にもコード例、参考文献を含むベストプラクティスのページがあります。
HTML のセマンティクス
HTML のセマンティクス、あるいは意味付け、タグ付けでは、意味のある実用的なアプローチを取ってください。セマンティクスのためのセマンティクスは行わないでください。ただしコンテンツと明確に一致する HTML 構造があれば、そのタグを使用しても構いません。たとえば複数の関連するリンクがある場合、「list」要素の使用がもっとも自然です。
見出しの構造
「H1」はすべてのページにおいてページのタイトルを表す、メインの見出しです。その下で各章や節に対応する見出し要素を含め、正しい HTML の見出し構造を使用してください。見出しのマークアップをデザイン目的で使用しないでください。
- H2 から H6 を使用してページの内部構造を表してください。
- 見出しのレベルをスキップしないでください。
- 見出しの中に見出し以外の機能、たとえばリンクやボタンを追加しないでください。
コントロールのセマンティクス
ボタンやリンクなど、ネイティブのキーボード操作を伴うコントロールは常に推奨されます。ページ内部での参照やリンクのように明確なリンク先が存在する場合、コントロールは <a href="{your-valid-target}"> を使用してください。そうでなければ <button> を使用してください。
既存のコントールをアップデートする場合は以下の表に従ってください。
ボタン、あるいはリンクの決定ロジック
| シナリオ | 選択肢 |
|---|---|
| リンク先が null または 意味のない HREF 値、たとえば href=’#’、href がない、href=’#something’ だが #something が存在しない | button |
| リンク先がページ内の意味のある HREF 値、例えば href=’#something’ で #something は存在する | button または a href='#target' |
| リンク先が外部ページの意味のある HREF 値で、レンダリング可能 (ただし実際の動作は AJAX) | JavaScript が利用可能であればリンク、それ以外ではボタン |
| リンク先が外部ページの意味のある HREF 値で、レンダリングできない | ボタン。ただし理想的にはリンク先がレンダリング可能であるべき |
| 同じページの新しい場所にジャンプするボタン | ボタン、またはリンクの両方可 |
| 外部ページの新しい場所にジャンプするボタン | リンク |
動的コンテンツ
ページ内でリロードせずに動的な変化が起きる場合、その変化が、イベントの保存の正常終了等の重要な変化の場合には ARIA を使用し、音を使ってユーザーにフィードバックしてください。
すべてのシンプルな AJAX 応答に対しては wp.a11y.speak() を使用してください。逆に複雑な応答の場合には wp.a11y.speak() は最適な選択でないかもしれません。アクセシビリティチームと使い方を相談し、wp.a11y.speak() を拡張するか、専用の ARIA ライブリージョンをコーディングするかを決定してください。
色のコントラスト
ほとんどの場合、プラグインがコアに色の追加や変更を行うことはないでしょう。もしもプラグインで新しい色の組み合わせを追加する必要があれば、最低限、色のコントラストの要求レベルは満たしてください。最小レベルの色のコントラスト要求は、フォントサイズが24ピクセル以下のレンダリングの場合は4.5:1、24ピクセル以上、あるいは19ピクセルで太字のレンダリングの場合は3.0:1です。
リンクの下線はありか、なしか ?
リンクが容易にリンクとして認識できる場合、たとえばメニューの一部や、明らかにユーザーインターフェースコントロールとして識別できるリンク集であれば、下線は必要ありません。その他のすべてのケース、特にテキスト行内、段落内のリンクでは常に下線が必要です。
キーボードのアクセシビリティ
ユーザーはページ上の操作可能なすべての要素、フォーム上のすべてのインプット、ボタン、リンクにキーボードを使用してアクセスし、操作できなければなりません。キーボードのフォーカスも視覚的に表現される必要があります。スクリーンリーダーが動作している場合、キーボードのイベントが異なる動きをする場合がありますので注意してください。
マウスで完了できる操作はすべてキーボードを使用しても操作できなければなりません。
画像とアイコン
すべての画像リソースはアクセス可能な名前を含む必要があります。そして特定のケースでは名前は空の文字列である必要があります。画像は実際の <img> 要素、アイコンフォント、svg 要素だけでなく、グラフィカルな表現を含むすべてが対象です。要素の種類により、異なる種類のアクセス名があります。
<img> 要素の場合、アクセス可能な名前は alt 属性です。img が装飾で使用される場合も alt 属性は必須ですが、値は空白で構いません。
アイコンフォントの場合、フォントアイコン自身が aria-hidden 属性を持ち、隣接する要素が screen-reader-text を持つ必要があります。アイコンが装飾の場合もアイコンフォントは aria-hidden 属性を持つ必要がありますが、screen-reader-text は省略できます。
<a href="this.html"> <span class="dashicons dashicon-thumbs-up" aria-hidden="true"></span> <span class="screen-reader-text">Something</span> </a>
SVG に関しては、アクセシビリティ情報がアシスト技術で認識できるよう SVG をインラインにしてください。SVG 要素には画像のアクセス名を指定した <title> 要素を含めます。クロス技術サポートのため、title 要素は aria-labelledby 属性を使用して svg 要素と関連付けてください。最大の互換性のため、画像の表現に使用されるすべての SVG 要素は値 ‘img’ を持つ role 属性を保持してください。
ラベル
既存の WordPress のコードでは明示的、暗示的なラベル付きフィールドを混ぜて使用していますが、すべての新規コードでは明示的に関連付けられた <label> 要素が必要です。このときフォームコントロールをラップせず、for または id 属性を使用してください。ラベルは非表示でも構いませんが、その場合は「.screen-reader-text」を使用する必要があります。プレースホルダーは使用できますが、ラベルの代用にはなりません。ラベルがフィールドのラベルの場合、クリックすると対応するフィールドに項目が移動し、チェックボックスやラジオボタンのラベル場合、クリックすると該当する項目が選択される必要があります。
情報の伝達を目的として新しい title 属性を導入しないでください。代替のラベルが必要であれば aria-label を使用し、追加のデータを付加するには .screen-reader-text を使用してください。
フォームの作成では、複雑なフォームの場合、<fieldset> と <legend> を使用して関するフォームの要素を論理的にグループ化するか、見出しの下にラジオボタン、またはチェックボックスをグループ化してください。
最新英語版
最終更新日: