ウェブ・アクセシビリティのためのデザイン

前景と背景の間に十分なコントラストをつける

前景テキストは背景色と十分なコントラストが必要です｡これには画像上のテキスト､背景グラデーション､ボタン､その他の要素が含まれます｡ロゴや､写真に偶然写り込んだテキストなどの付随的なテキストには適用されません｡以下のリンクは､WCAGが要求する最小コントラスト比の詳細と､コントラストをチェックする方法を提供しています｡「コントラスト比」は､より技術的に正しい用語「輝度コントラスト比」の短縮版です｡.

色だけで情報を伝えない

色は情報を伝達するのに役立つが､色だけで情報を伝達すべきではない｡要素を区別するために色を使用する場合は､色の知覚に依存しない追加的な識別も行いましょう｡例えば､フォームの必須項目を示すために色に加えてアスタリスクを使用したり､グラフの領域を区別するためにラベルを使用したりしましょう

インタラクティブな要素を識別しやすくする

リンクやボタンなどのインタラクティブな要素には､識別しやすいように明確なスタイルを用意しましょう｡たとえば､マウスホバー､キーボードフォーカス､タッチスクリーン起動時にリンクの外観を変更します｡インタラクティブ要素のスタイルとネーミングは､ウェブサイト全体で一貫して使用するようにしましょう｡

明確で一貫性のあるナビゲーション・オプションの提供

ウェブサイト内のページ間のナビゲーションは､一貫性のあるネーミング､スタイル､配置にすること｡サイト内検索やサイトマップなど､複数のナビゲーション方法を用意すること｡トピックパスや明確な見出しなど､自分のいる位置を示す手がかりを提供することで､ユーザーがウェブサイトやページのどこにいるのかを理解を助けます｡

フォーム要素に明確に関連付けられたラベルが含まれるようにする

すべてのフィールドが隣接して説明的なラベルを持っていることを確認してください｡左から右へ記述する言語の場合､ラベルは通常フィールドの左か上に配置されますが､チェックボックスとラジオボタンは通常右に配置されます｡ラベルとフィールドの間にスペースが空きすぎないようにしましょう｡

理解しやすいフィードバックの提供

フォームの送信を確認する､何か問題が起きたときにユーザーに警告する､ページの変更をユーザーに通知するなど､インタラクションに対するフィードバックを提供することがある｡指示は理解しやすいものでなければなりません｡ユーザーのアクションを必要とする重要なフィードバックは目立つスタイルで表示されるべきです｡

見出しと間隔を使用して､関連するコンテンツをグループ化する

コンテンツ間の関係をより明確にするために､空白と近接を利用する｡見出しをつけることで､コンテンツをグループ化し､乱雑さをなくし､さっと見やすくし理解しやすくする｡

さまざまなビューポートサイズに対応するデザインを作成

携帯電話やズームしたブラウザウィンドウなど､異なるサイズのビューポートでページ情報がどのように表示されるかを考慮すること｡ヘッダーやナビゲーションなどの主要要素の位置や表示は､スペースを最大限に活用することで変更することができます｡読みやすさと可読性を最大化するために､テキストサイズと行幅を確実に設定してください｡

デザインに画像やメディアの代替機能を含める

画像やメディアの代替となる仕組をデザインに用意してください｡例えば下記のものが必要になるでしょう｡

• 音声のトランスクリプトへのビジブルなリンク
• ビデオの音声解説版への可視リンク
• アイコンやグラフィカルなボタンとテキスト
• 表や複雑なグラフのキャプションと説明 コンテンツ作成者や開発者と協力し､テキスト以外のコンテンツの代替案を提供してください｡

自動的に開始するコンテンツのコントロールの提供

ユーザーがアニメーションや自動再生サウンドを停止できるように､目に見えるコントロールを提供しましょう｡これは､カルーセル､画像スライダー､背景音､動画に適用されます｡