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

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

「アクセシビリティコーディング規約」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(和訳完了 「Accessibility Coding Standards」(2016/8/25時点))
(ja.wordpress.org へ移動)
 
1行目: 1行目:
<p class="important">注意: この記事は「[https://make.wordpress.org/core/handbook/ Core Contributor Handbook]」の「[https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ Accessibility Coding Standards]」(2016年8月25日時点)の訳です。<br />最新版については[https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ 英語版]を参照してください。</p>
+
このページは https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/accessibility/ へ移動しました。
 
+
この「アクセシビリティコーディング規約」は WordPress コアにマージを予定するコードが満たすべきアクセシビリティについて規定します。
+
WordPress のすべての新規コード、および更新コードは WCAG 2.0 Guideline の Level AA に準拠する必要があります。
+
この文書は開発中に簡単なリファレンスとして利用可能な基本のガイドラインですが、考えられるすべてのアクセシビリティ問題をカバーする意図はありませんので注意してください。
+
 
+
参照: [[WordPress コーディング規約]]、[[WordPress インラインドキュメント規約]]
+
 
+
== HTML のセマンティクス<span id="HTML_Semantics"></span> ==
+
 
+
HTML のセマンティクス、あるいは意味付け、タグ付けでは、意味のある実用的なアプローチを取ってください。セマンティクスのためのセマンティクスは行わないでください。ただしコンテンツと明確に一致する HTML 構造があれば、そのタグを使用しても構いません。たとえば複数の関連するリンクがある場合、「<tt>list</tt>」要素の使用がもっとも自然です。
+
 
+
=== 見出しの構造<span id="Heading_structure"></span> ===
+
 
+
「<tt>H1</tt>」はすべてのページにおいてページのタイトルを表す、メインの見出しです。その下で各章や節に対応する見出し要素を含め、正しい HTML の見出し構造を使用してください。見出しのマークアップをデザイン目的で使用しないでください。
+
 
+
* <tt>H2</tt> から <tt>H6</tt> を使用してページの内部構造を表してください。
+
* 見出しのレベルをスキップしないでください。
+
* 見出しの中に見出し以外の機能、たとえばリンクやボタンを追加しないでください。
+
 
+
=== コントロールのセマンティクス<span id="Semantics_for_Controls"></span> ===
+
 
+
ボタンやリンクなど、ネイティブのキーボード操作を伴うコントロールは常に推奨されます。ページ内部での参照やリンクのように明確なリンク先が存在する場合、コントロールは「<tt><a href=""></tt>」を使用してください。そうでなければ「<tt><button></tt>」を使用してください。
+
 
+
既存のコントールをアップデートする場合は以下の表に従ってください。
+
 
+
ボタン、あるいはリンクの決定ロジック
+
<table style="border-width: thin; border-style: solid; border-collapse: collapse;">
+
<tr style="border-bottom: thin solid black;">
+
<th>シナリオ</th>
+
<th>選択肢</th>
+
</tr>
+
<tr style="border-bottom: thin solid black;">
+
<td>リンク先が null または 意味のない HREF 値、たとえば href='#'、href がない、href='#something' だが #something が存在しない</td>
+
<td><tt>button</tt></td>
+
</tr>
+
<tr style="border-bottom: thin solid black;">
+
<td>リンク先がページ内の意味のある HREF 値、例えば href='#something' で #something は存在する</td>
+
<td><tt>button</tt> または <tt>a href='#target'</tt></td>
+
</tr>
+
<tr style="border-bottom: thin solid black;">
+
<td>リンク先が外部ページの意味のある HREF 値で、レンダリング可能 (ただし実際の動作は AJAX)</td>
+
<td>JavaScript が利用可能であればリンク、それ以外ではボタン</td>
+
</tr>
+
<tr style="border-bottom: thin solid black;">
+
<td>リンク先が外部ページの意味のある HREF 値で、レンダリングできない</td>
+
<td>ボタン。ただし理想的にはリンク先がレンダリング可能であるべき</td>
+
</tr>
+
<tr style="border-bottom: thin solid black;">
+
<td>同じページの新しい場所にジャンプするボタン</td>
+
<td>ボタン、またはリンクの両方可</td>
+
</tr>
+
<tr style="border-bottom: thin solid black;">
+
<td>外部ページの新しい場所にジャンプするボタン</td>
+
<td>リンク</td>
+
</tr>
+
</table>
+
 
+
=== 動的コンテンツ<span id="Dynamic_Content"></span> ===
+
 
+
ページ内でリロードせずに動的な変化が起きる場合、その変化が、イベントの保存の正常終了等の重要な変化の場合には ARIA を使用し、音を使ってユーザーにフィードバックしてください。
+
 
+
すべてのシンプルな AJAX 応答に対しては <tt>wp.a11y.speak()</tt> を使用してください。逆に複雑な応答の場合には <tt>wp.a11y.speak()</tt> は最適な選択でないかもしれません。アクセシビリティチームと使い方を相談し、<tt>wp.a11y.speak()</tt> を拡張するか、専用の ARIA ライブリージョンをコーディングするかを決定してください。
+
 
+
* [https://make.wordpress.org/accessibility/2015/04/15/let-wordpress-speak-new-in-wordpress-4-2/ Let WordPress Speak: <tt>wp.a11y.speak()</tt> 入門].
+
* [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions ARIA ライブリージョンMozilla 開発者ドキュメント]
+
 
+
== 色のコントラスト<span id="Color_Contrast"></span> ==
+
 
+
ほとんどの場合、プラグインがコアに色の追加や変更を行うことはないでしょう。もしもプラグインで新しい色の組み合わせを追加する必要があれば、最低限、色のコントラストの要求レベルは満たしてください。最小レベルの色のコントラスト要求は、フォントサイズが24ピクセル以下のレンダリングの場合は4.5:1、24ピクセル以上、あるいは19ピクセルで太字のレンダリングの場合は3.0:1です。
+
 
+
* [https://make.wordpress.org/accessibility/handbook/quick-start-guide/#color-contrast WordPress アクセシビリティクイックスタート: 色のコントラスト]
+
 
+
== キーボードのアクセシビリティ<span id="Keyboard_Accessibility"></span> ==
+
 
+
ユーザーはページ上の操作可能なすべての要素、フォーム上のすべてのインプット、ボタン、リンクにキーボードを使用してアクセスし、操作できなければなりません。キーボードのフォーカスも視覚的に表現される必要があります。スクリーンリーダーが動作している場合、キーボードのイベントが異なる動きをする場合がありますので注意してください。
+
 
+
マウスで完了できる操作はすべてキーボードを使用しても操作できなければなりません。
+
 
+
== 画像とアイコン<span id="Images_and_Icons"></span> ==
+
 
+
すべての画像リソースはアクセス可能な名前を含む必要があります。画像は実際の <tt>&lt;img></tt> 要素、アイコンフォント、svg 要素だけでなく、グラフィカルな表現を含むすべてが対象です。要素の種類により、異なる種類のアクセス名があります。
+
 
+
<tt>&lt;img></tt> 要素のアクセス可能な名前は alt 属性です。img が飾りの場合、その場合も alt 属性は必須ですが、値は空白で構いません。
+
 
+
<pre>
+
<a href="this.html">
+
<span class="dashicons dashicon-thumbs-up" aria-hidden="true"></span>
+
<span class="screen-reader-text">Something</span>
+
</a>
+
</pre>
+
 
+
SVG に関しては、アクセス情報がアシスト技術で認識できるよう SVG をインラインにしてください。SVG 要素には画像のアクセス名を指定した <tt>&lt;title></tt> 要素を含めてください。クロス技術サポートのため、title 要素は aria-labelledby 属性を使用して svg 要素と関連付けてください。
+
 
+
* [http://www.sitepoint.com/tips-accessible-svg/ SVG アクセシビリティの詳細情報]
+
 
+
== ラベル<span id="Labeling"></span> ==
+
 
+
すべてのフォーム上のインプットには明示的に関連付けた <tt>&lt;label></tt> 要素が必要です。ラベルは非表示でも構いませんが、その場合は「.screen-reader-text」を使用する必要があります。プレースホルダーは使用できますが、ラベルの代用にはなりません。ラベルがフィールドのラベルの場合、クリックすると対応するフィールドに項目が移動し、チェックボックスやラジオボタンのラベル場合、クリックすると該当する項目が選択される必要があります。
+
 
+
情報の伝達を目的として新しい title 属性を導入しないでください。代替のラベルが必要であれば aria-label を使用し、追加のデータを付加するには <tt>.screen-reader-text</tt> を使用してください。
+
 
+
フォームの作成では、複雑なフォームの場合、<tt>&lt;fieldset></tt> と <tt>&lt;legend></tt> を使用して関するフォームの要素を論理的にグループ化するか、見出しの下にラジオボタン、またはチェックボックスをグループ化してください。
+
 
+
最新英語版: [https://make.wordpress.org/core/handbook/ Core Contributor Handbook]  > [https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ Accessibility Coding Standards]
+
 
+
[[Category:WordPress の開発]]
+

2020年1月3日 (金) 19:20時点における最新版

このページは https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/accessibility/ へ移動しました。