ウェブ・アクセシビリティのための開発

親ページ： Tips for Getting Started (英語版)

本翻訳について

ボランティアによる本翻訳は原文（英語）の内容を正確に反映できていない可能性があります。

最新英語文書の翻訳
翻訳更新済 2024-04-16. 英語版更新 2019-01-09.

翻訳者 Jay Kishigami.
WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します

すべてのフォームコントロールにラベルを関連付ける

フォーム要素の id 属性にリンクされた <label> 要素の for 性を使うか､ WAI-ARIA 属性を使います｡特定の状況では <label> 要素を視覚的に隠すことが許容されるかもしれませんが､ほとんどの場合ラベルは全ての読者が必要な入力を理解するのに必要です｡

画像の代替テキストを含める

すべての情報画像と機能画像に画像の代替テキストが追加されていることを確認すること｡装飾的な画像は空の代替テキスト､alt=""を使うか､画像自体をCSSに含めてください｡代替テキストは通常､文章コンテンツの責任者が提供します｡

ページの言語と言語の変更を特定する

例えば <html lang="en"> のように　html　タグで lang 属性を使うことで､すべてのページの主要言語を示します｡要素の言語がページの他の部分と異なる場合､特定の要素でlang属性を使います｡

マークアップを使って意味と構造を伝える

見出し､リスト､表などには適切なマークアップを使用しましょう｡HTML5 は <nav> や <aside>　のような追加要素を提供し､ コンテンツをよりよく構造化します｡ WAI-ARIA の役割は､例えば､ role="search" を使って検索機能を識別するなど､追加の意味を提供することができます｡デザイナーやコンテンツ・ライターと協力して､意味について合意し､一貫して使用しましょう｡

ユーザーのミスの回避と修正をサポート

ユーザーがサイトのフォームを完了できるように､明確な指示､エラーメッセージ､通知を提供しましょう｡エラーが発生したら

ユーザー入力を処理する際には､できるだけ書式に寛容であること｡例えば､スペースを含む電話番号を受け付け､必要に応じてスペースを削除します｡

読み取り順をコード順に反映

コード内の要素の順序が､提示される情報の論理的な順序と一致していることを確認する｡これをチェックするひとつの方法は､CSSのスタイルを削除し､コンテンツの順序が理にかなっているかどうかを確認することです｡

ユーザーの技術に適応するコードを書く

モバイルデバイスやタブレットなど､異なるズーム状態やビューポートサイズに表示を適応させるために､レスポンシブデザインを使用すること｡フォントサイズを少なくとも200%大きくする場合は､横スクロールを避け､コンテンツのクリッピングを防ぐこと｡プログレッシブ・エンハンスメントを使用して､使用するテクノロジーに関係なく､コア機能とコンテンツが利用できるようにします｡

非標準のインタラクティブ要素に意味を与える

WAI-ARIAを使用して､アコーディオンや特注ボタンなどのカスタムウィジェットの機能と状態に関する情報を提供します｡例えばrole="navigation" や aria-expanded="true"です｡ ｡このようなウィジェットの動作､例えばコンテンツの展開や折りたたみ､ウィジェットがキーボード・イベントにどのように応答するかなどを実装するには､追加のコードが必要です｡

すべてのインタラクティブ要素がキーボードでアクセスできるようにすること｡

特に､メニュー､マウスオーバー情報､折りたたみ可能なアコーディオン､メディアプレーヤーなどのインタラクティブ要素を開発するときは､キーボードアクセスについて考えてください｡ Use tabindex="0"を使って <div> あるいは <span>のようみ通常はフォーカスを受けない要素を､インタラクションのために使うときにはナビゲーション・オーダーに加えましょう｡スクリプトを使ってキーボード・イベントを捕捉し､それに応答することが必要です｡

可能な限りCAPTCHAを避ける

CAPTCHAは多くの人々に問題を引き起こす｡ユーザー入力が人間によって生成されたものであることを検証するには､自動検出やインターフェイスのインタラクションなど､もっと使いやすい手段があります｡CAPTCHAを本当に含める必要がある場合は､理解しやすく､障害を持つユーザーのための代替手段を含むようにしてください｡下記にその例を示します｡

最初に戻る