About this translation ボランティアによる本翻訳は原文（英語） の内容を正確に反映できていない可能性があります。
翻訳者 Jay Kishigami. translations も歓迎します
Notice: The English original has been substantially updated since this translation. — 変更履歴 2024-07-16 — 翻訳更新済 2024-04-16 .
We welcome a translation update .
すべてのフォームコントロールにラベルを関連付ける
フォーム要素の id 属性にリンクされた <label> 要素の for 性を使うか､ WAI-ARIA 属性を使います｡特定の状況では <label> 要素を視覚的に隠すことが許容されるかもしれませんが､ほとんどの場合ラベルは全ての読者が必要な入力を理解するのに必要です｡
画像の代替テキストを含める
すべての情報画像と機能画像に画像の代替テキストが追加されていることを確認すること｡装飾的な画像は空の代替テキスト､alt=""を使うか､画像自体をCSSに含めてください｡代替テキストは通常､文章コンテンツの責任者が提供します｡
ページの言語と言語の変更を特定する
例えば <html lang="en"> のように html タグで lang 属性を使うことで､すべてのページの主要言語を示します｡要素の言語がページの他の部分と異なる場合､特定の要素でlang属性を使います｡
マークアップを使って意味と構造を伝える
見出し､リスト､表などには適切なマークアップを使用しましょう｡HTML5 は <nav> や <aside> のような追加要素を提供し､ コンテンツをよりよく構造化します｡ WAI-ARIA の役割は､例えば､ role="search" を使って検索機能を識別するなど､追加の意味を提供することができます｡デザイナーやコンテンツ・ライターと協力して､意味について合意し､一貫して使用しましょう｡
スーパーベアが窮地を救う
2015年8月7日
街の人気者であるクマが､またしても若いネコを木から救い出すという偉業を成し遂げた｡目撃者によると､スーパーベアーの努力はネコには理解されず､救助者に軽い引っかき傷を負わせたという｡
<section>
<article>
<h2> スーパーベアが窮地を救う</h2>
<time datetime= "2015-08-07" > 2015年8月7日</time>
<p> 街の人気者であるクマが､またしても若いネコを木から救い出すという偉業を成し遂げた｡目撃者によると､スーパーベアーの努力はネコには理解されず､救助者に軽い引っかき傷を負わせたという｡</p>
<aside>
<h3> Related Articles</h3>
<ul>
<li><a href= "#" > クマが市の鍵を受け取る</a></li>
<li><a href= "#" > スーパーベアが市長に立候補</a></li>
</ul>
</aside>
</article>
</section>
<form action= "#" method= "post" >
<div role= "search" >
<label for= "search" > 検索</label>
<input type= "search" id= "search" aria-describedby= "search-help" >
<div id= "search-help" > 顧客IDまたは名前でレコードを検索</div>
<button type= "submit" > Go</button>
</div>
</form>
ユーザーのミスの回避と修正をサポート
ユーザーがサイトのフォームを完了できるように､明確な指示､エラーメッセージ､通知を提供しましょう｡エラーが発生したら
ユーザーが問題の場所を見つけるのを助けるましょう
具体的でわかりやすい説明をしましょう
修正を提案しましょう
ユーザー入力を処理する際には､できるだけ書式に寛容であること｡例えば､スペースを含む電話番号を受け付け､必要に応じてスペースを削除します｡
例: バリデーションに寛容なオーストラリアの電話番号フィールド 読み取り順をコード順に反映
コード内の要素の順序が､提示される情報の論理的な順序と一致していることを確認する｡これをチェックするひとつの方法は､CSSのスタイルを削除し､コンテンツの順序が理にかなっているかどうかを確認することです｡
宇宙トレーナー
クラシックでスタイリッシュな宇宙トレーナー
<img src= "images/trainer.png" alt= "..." >
<h3> 宇宙トレーナー</h3>
<p> 宇宙...</p>
<a href= "..." > カートに加える</a>
すべてのコードを見る
<article class= "product" >
<img alt= "パープルのハイトップ・トレーナーに白いシューレース、足首の外側に空白の白いドット、白いトゥキャップがあしらわれている。" src= "images/trainer.png" >
<h3 class= "name" > 宇宙トレーナー</h3>
<p class= "desc" > クラシックでスタイリッシュな宇宙トレーナー</p>
<p class= "buy" ><a href= "javascript:return false" ><svg class= "icon" ><use xlink:href= "#cart-plus" /></svg> カートに加える</a></p>
</article>
<h3> 宇宙トレーナー</h3>
<img src= "images/trainer.png" alt= "..." >
<p> 宇宙...</p>
<a href= "..." > カートに加える</a>
すべてのコードを見る
<article class= "product" >
<h3 class= "name" > 宇宙トレーナー</h3>
<img alt= "パープルのハイトップ・トレーナーに白いシューレース、足首の外側に空白の白いドット、白いトゥキャップがあしらわれている。" src= "images/trainer.png" >
<p class= "desc" > クラシックでスタイリッシュな宇宙トレーナー</p>
<p class= "buy" ><a href= "javascript:return false" ><svg class= "icon" ><use xlink:href= "#cart-plus" /></svg> カートに加える</a></p>
</article>
ユーザーの技術に適応するコードを書く
モバイルデバイスやタブレットなど､異なるズーム状態やビューポートサイズに表示を適応させるために､レスポンシブデザインを使用すること｡フォントサイズを少なくとも200%大きくする場合は､横スクロールを避け､コンテンツのクリッピングを防ぐこと｡プログレッシブ・エンハンスメントを使用して､使用するテクノロジーに関係なく､コア機能とコンテンツが利用できるようにします｡
例: メディアクエリを使ってナビゲーションを適応させる
/* 狭いビューポートでは､ナビゲーションを全幅にする */
@media screen and ( min-width : 25em ) {
#nav {
float : none ;
width : auto ;
}
#main {
margin-left : 0 ;
}
}
/* より広いビューポートでは､ナビゲーションを左に配置する*/
@media screen and ( min-width : 43em ) {
#nav {
float : left ;
width : 24% ;
}
#main {
margin-left : 27% ;
}
}
非標準のインタラクティブ要素に意味を与える
WAI-ARIA を使用して､アコーディオンや特注ボタンなどのカスタムウィジェットの機能と状態に関する情報を提供します｡例えばrole="navigation" や aria-expanded="true"です｡ ｡このようなウィジェットの動作､例えばコンテンツの展開や折りたたみ､ウィジェットがキーボード・イベントにどのように応答するかなどを実装するには､追加のコードが必要です｡
例: WAI-ARIAを使ったメニューの機能と状態の識別
<nav aria-label= "主たるナビゲーション" role= "navigation" >
<ul>
<li><a href= "..." > ホーム</a></li>
<li><a href= "..." > ショップ</a></li>
<li class= "has-submenu" >
<a aria-expanded= "false" aria-haspopup= "true" href= "..." > SpaceBears</a>
<ul>
<li><a href= "..." > SpaceBear 6</a></li>
<li><a href= "..." > SpaceBear 6 Plus</a></li>
</ul>
</li>
<li><a href= "..." > MarsCars</a></li>
<li><a href= "..." > Contact</a></li>
</ul>
</nav>
すべてのインタラクティブ要素がキーボードでアクセスできるようにすること｡
特に､メニュー､マウスオーバー情報､折りたたみ可能なアコーディオン､メディアプレーヤーなどのインタラクティブ要素を開発するときは､キーボードアクセスについて考えてください｡ Use tabindex="0"を使って <div> あるいは <span>のようみ通常はフォーカスを受けない要素を､インタラクションのために使うときにはナビゲーション・オーダーに加えましょう｡スクリプトを使ってキーボード・イベントを捕捉し､それに応答することが必要です｡
var buttonExample = document . getElementById ( ' example-button ' );
buttonExample . addEventListener ( ' keydown ' , function ( e ) {
// Toggle the menu when RETURN is pressed
if ( e . keyCode && e . keyCode == 13 ) {
toggleMenu ( document . getElementById ( ' example-button-menu ' ));
}
});
buttonExample . addEventListener ( ' click ' , function ( e ) {
// Toggle the menu on mouse click
toggleMenu ( document . getElementById ( ' example-button-menu ' ));
});
可能な限りCAPTCHAを避ける
CAPTCHAは多くの人々に問題を引き起こす｡ユーザー入力が人間によって生成されたものであることを検証するには､自動検出やインターフェイスのインタラクションなど､もっと使いやすい手段があります｡CAPTCHAを本当に含める必要がある場合は､理解しやすく､障害を持つユーザーのための代替手段を含むようにしてください｡下記にその例を示します｡
CAPTCHAを解く3つ以上の方法を提供すること｡
CAPTCHAを迂回できる人間の担当者へのアクセスを提供すること｡
認証されたユーザーにはCAPTCHAを要求しないこと｡