• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

アクセシビリティコーディング規約

提供: WordPress Codex 日本語版
2016年8月29日 (月) 22:13時点におけるAkira Tachibana (トーク | 投稿記録)による版 (和訳完了 「Accessibility Coding Standards」(2016/8/25時点))

移動先: 案内検索

注意: この記事は「Core Contributor Handbook」の「Accessibility Coding Standards」(2016年8月25日時点)の訳です。
最新版については英語版を参照してください。

この「アクセシビリティコーディング規約」は WordPress コアにマージを予定するコードが満たすべきアクセシビリティについて規定します。 WordPress のすべての新規コード、および更新コードは WCAG 2.0 Guideline の Level AA に準拠する必要があります。 この文書は開発中に簡単なリファレンスとして利用可能な基本のガイドラインですが、考えられるすべてのアクセシビリティ問題をカバーする意図はありませんので注意してください。

参照: WordPress コーディング規約WordPress インラインドキュメント規約

HTML のセマンティクス

HTML のセマンティクス、あるいは意味付け、タグ付けでは、意味のある実用的なアプローチを取ってください。セマンティクスのためのセマンティクスは行わないでください。ただしコンテンツと明確に一致する HTML 構造があれば、そのタグを使用しても構いません。たとえば複数の関連するリンクがある場合、「list」要素の使用がもっとも自然です。

見出しの構造

H1」はすべてのページにおいてページのタイトルを表す、メインの見出しです。その下で各章や節に対応する見出し要素を含め、正しい HTML の見出し構造を使用してください。見出しのマークアップをデザイン目的で使用しないでください。

  • H2 から H6 を使用してページの内部構造を表してください。
  • 見出しのレベルをスキップしないでください。
  • 見出しの中に見出し以外の機能、たとえばリンクやボタンを追加しないでください。

コントロールのセマンティクス

ボタンやリンクなど、ネイティブのキーボード操作を伴うコントロールは常に推奨されます。ページ内部での参照やリンクのように明確なリンク先が存在する場合、コントロールは「<a href="">」を使用してください。そうでなければ「<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 属性は必須ですが、値は空白で構いません。

<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 要素と関連付けてください。

ラベル

すべてのフォーム上のインプットには明示的に関連付けた <label> 要素が必要です。ラベルは非表示でも構いませんが、その場合は「.screen-reader-text」を使用する必要があります。プレースホルダーは使用できますが、ラベルの代用にはなりません。ラベルがフィールドのラベルの場合、クリックすると対応するフィールドに項目が移動し、チェックボックスやラジオボタンのラベル場合、クリックすると該当する項目が選択される必要があります。

情報の伝達を目的として新しい title 属性を導入しないでください。代替のラベルが必要であれば aria-label を使用し、追加のデータを付加するには .screen-reader-text を使用してください。

フォームの作成では、複雑なフォームの場合、<fieldset><legend> を使用して関するフォームの要素を論理的にグループ化するか、見出しの下にラジオボタン、またはチェックボックスをグループ化してください。

最新英語版: Core Contributor Handbook > Accessibility Coding Standards