最新のWeb開発のチュートリアル
 

ウェブWAI


WAIは、Web開発者のためのガイドラインを定義します。


WAI - ウェブ・アクセシビリティ・イニシアティブ

WAI(W3C、1997)は、障害を持つ人々へのWebにアクセスできるようにする方法については、ウェブ開発者やデザイナーのために意図された一連のガイドラインです。

これらのガイドラインの目的​​は、アクセシビリティですが、彼らはまた、より多くのブラウザ(音声ブラウザ、携帯電話、ハンドヘルドデバイス)に、困難な環境(ハンズフリー、強い光、暗闇の中での作業より多くのユーザーにWebコンテンツを利用可能にするのに役立ちます、悪い光景、重いノイズ)。

注意 あなたのウェブサイトは、WAIの機能(良好​​なコントラスト、サイズ変更可能なテキスト、説明と画像)を欠いている場合は、障害を持つ人々は、あなたの情報にアクセスすることはできません。

あなたのサイトをよりアクセシブルにするための理由:

  • それはあなたの評判とあなたの顧客満足度を向上させます
  • これは、訪問者のあなたの数を増加します
  • それはあなたの訪問者があなたのサイトに長く滞在できるようになります
  • これは、古い機器を持つ人々のためにサイトをより使いやすくなります

「ALT」を忘れないでください

alt属性を使用すると、画像の代替テキストを提供することができます:

<img src="images/banana.jpg" alt="Banana">

時々、Webブラウザは、あなたのイメージは表示されません。 理由は、多くのいずれかになります。

  • ユーザは、画像の表示をオフにしています
  • ブラウザは、画像表示なしでミニブラウザです
  • ブラウザは、音声ブラウザです

あなたは「ALT」属性を使用する場合、ほとんどのブラウザは、少なくとも表示(または読み取り)「ALT」テキストになります。


小さいフォントを使用しないでください。

いくつかのウェブサイトは、単に各ページに複数のテキストを「絞る」する、またはページがより多くの "スタイリッシュ"を作るために小さなテキストサイズを使用します。

ここでも、異なる機器、観察条件、または障害を持つ訪問者がテキストを読んで困難を抱えている可能性があります。

注意 テキストサイズに彼らがあなたのサイトを訪問するたびに拡大するためにあなたの訪問者を強制しないでください。

ベスト文字と行間を選びました

余分な文字間隔を持つテキストが読みやすいです。

減少した文字間隔とテキストが読みにくいです。

良いとテキスト
行間隔
読みやすいです。

減少したテキスト
行間隔
読むことは困難です。


ファンシーフォントを避けます

通常のフォントが読みやすいです。

斜体フォントが読みそう簡単ではありません。

セリフフォントが読みにくくしています。


悪い色のコントラストを避けます

白い背景に黒のテキスト、または黒の背景に白のテキストは、視聴障害を持つ人々のために、と悪い機器上での表示に最適です。

明るい背景上の灰色のテキストは、貧しいコントラストを与えることができます:

白い背景の上のテキストの色の#AAAAAA
白い背景の上のテキストの色#666666
白い背景の上のテキストの色#333333
白い背景の上のテキストの色#000000

暗い背景に灰色のテキストも貧弱なコントラストを与えることができます:

黒の背景にテキストの色#666666
黒の背景にテキストの色#AAAAAA
黒の背景にテキストの色#CCCCCC
黒の背景にテキストの色#FFFFFF

黒と赤、黒と青、黄色と緑のような - - いくつかの組み合わせは、常に目を痛めます:

赤の背景に黒のテキスト
青色の背景に黒色のテキスト
緑色の背景に黄色のテキスト

そして、いくつかの組み合わせは悪くないです。

灰色の背景に黒のテキスト
ライトブルーに黒のテキスト
アンティーク白地に黒のテキスト
ダークブルーに白いテキスト

必ず設定の背景色

ほとんどのWebページは、別のテキスト要素の色を使用します。 ヘッダとリンクの両方は、本文とは異なる色であることが多いです。

Webデザイナーとして、あなたはあなたの訪問者は、デフォルトの色の設定を変更することが可能であるという事実に注意する必要があります。

あなたは(ヘッダやリンクなど)あなたのWeb​​要素の色を定義する場合は、背景色を定義する必要があります。

注意 あなたは背景色を定義しない場合、あなたのウェブサイトには、(光赤赤の背景に、ヘッダー、またはさらに悪いことに、黒の背景に黒のテキストなど)の色のいくつかの非常に悪い組み合わせで終わるかもしれません。