宇宙トレーナー

クラシックでスタイリッシュな宇宙トレーナー
This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.
ボランティアによる本翻訳は原文(英語)の内容を正確に反映できていない可能性があります。
翻訳者 Jay Kishigami.
WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します
Needs Translation Notice: 本翻訳後に英語版が更新されています. — 変更履歴
英語版更新 2024-07-16 — 翻訳更新済 2024-04-16.
Needs Translation 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"
を使って検索機能を識別するなど、追加の意味を提供することができます。デザイナーやコンテンツ・ライターと協力して、意味について合意し、一貫して使用しましょう。
<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>
ユーザーがサイトのフォームを完了できるように、明確な指示、エラーメッセージ、通知を提供しましょう。エラーが発生したら
ユーザー入力を処理する際には、できるだけ書式に寛容であること。例えば、スペースを含む電話番号を受け付け、必要に応じてスペースを削除します。
例として, (02) 1234 1234
<label for="phone">電話番号</label>
<input id="phone" name="phone" type="tel"
pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
aria-describedby="phone-desc">
<p id="phone-desc">例として, (02) 1234 1234</p>
コード内の要素の順序が、提示される情報の論理的な順序と一致していることを確認する。これをチェックするひとつの方法は、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"
です。 。このようなウィジェットの動作、例えばコンテンツの展開や折りたたみ、ウィジェットがキーボード・イベントにどのように応答するかなどを実装するには、追加のコードが必要です。
<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を本当に含める必要がある場合は、理解しやすく、障害を持つユーザーのための代替手段を含むようにしてください。下記にその例を示します。
これらのヒントは、Webアクセシビリティのために考慮すべきことのほんの一部です。アクセシビリティが重要である理由、および障害者がWebをより利用しやすくするためのガイドラインについては、以下のリソースを参照してください。
ビフォー・アフター・デモンストレーション — 同じビジュアル・デザインを共有するアクセシブルなウェブサイトとアクセシブルでないウェブサイトの例で、主要なアクセシビリティの障害と修復を強調する注釈、およびWCAGの評価レポートが掲載されています。
WCAGを満たす方法(クイックリファレンス) —すべてのWCAG要件とテクニックのカスタマイズ可能なリファレンス
ご意見、ご提案、コメントをemail wai@w3.org かGitHubまでお寄せください。
This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.