Webアクセシビリティ・デザイン

このページではWebインタフェス・デザインやビジュアル・デザインを、障害のある人が利用しやすいものにするための基本的な仕様を紹介しています。

Webアクセシビリティ・ガイドライン (WCAG/Web Content Accessibility Guidelines)の要件を満たすための基本ガイドです。

記事元は以下ですが、わかりやすい文章にするために、大幅に意訳しています。
自分の理解で学びたい方は、直接以下のリンクをご覧ください。

引用:Writing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI) | W3CWeb 

Webアクセシビリティ・デザイン

Table of Contents

前景と背景の十分なコントラスト

前景のテキストは背景色と十分なコントラストが必要です。

  • 画像上のテキスト
  • 背景のグラデーション
  • ボタンなどの要素

ただし、ロゴや写真にたまたま写っていた文字など、画像に付随する文字は対象外です。

悪い例

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

良い例

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

色だけで情報を伝えない

色は情報を伝えるのに便利ですが、色だけで情報を伝えてはいけません。要素を区別するために色を使用する場合は、色の認識に頼らない追加の方法も検討してください。例えば、フォームの”必須項目”には、色だけでなく『アスタリスク』を使用したり、グラフの領域を区別するために『ラベル』を使用したりします。

悪い例

赤字のところは必須です。

良い例

必須項目は赤字で『*』の記号がついてる箇所です。

悪い例

直角三角形はどれですか?

〇 緑
〇 青
〇 赤
〇 ない

良い例

直角三角形はどれですか?

〇 緑(1)
〇 青(2)
〇 赤(3)
〇 黄色(4)
〇 ない

インタラクティブな要素をかんたんに識別できるようにする

リンクやボタンなどの インタラクティブ な要素には、その要素を識別しやすいように、はっきりとしたスタイルを設定します。例えば、マウスのホバー、キーボードのフォーカス、タッチスクリーンの起動など、リンクのスタイル(色や背景色、アンダーラインなど)が変化するようにします。インタラクティブ要素のスタイルとネーミングはWebサイト全体で統一します。

例:

マウスを使えず、キーボードだけでWebページを操作する人もいます。

ユーザーがキーボードを使ってすべてのインタラクティブ要素にアクセスでき、どの要素にフォーカスがあるのかが明確であることが重要です。

キーボードフォーカスを見えるようにするには、Webページのタブ移動操作に合わせて移動する、ボーダーやハイライト表示が有効です。

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

Webサイト内の各ページのナビゲーションは、一貫したネーミング、スタイリングで配置します。

サイト内検索やサイトマップなど、Webサイトで特定ページを探す方法を複数用意します。

パンくずや見出しなど、ユーザーがWebサイトのどこにいるのかを理解できるようにします。

フォーム要素には明確なラベル名にする

すべてのフィールドに、入力やチェックを施す説明的なラベルをつけてください。左から右へ読む言語サイト(日本やアメリカ)の場合、ラベルは通常フィールドのに配置します。ただし、チェックボックスやラジオボタンの場合は、一般的には右に配置します。ラベルとフィールドの間にスペースを多く取りすぎないよう注意が必要です。

例:

かんたんに理解できる入力結果を表示する

フォーム送信後の確認、問題が発生した場合の警告、通知など、インタラクションに対する入力結果を表示します。入力結果の文章は、理解しやすくする必要があります。ユーザーの操作を必要とする重要な入力結果の文章は、目立つスタイルで表示する必要があります。

例:

見出しと余白を使用し、関連するコンテンツをグループ化します

余白と右寄せ、左寄せを使用し、コンテンツ間の関係を明確にします。見出しのスタイルの設定、コンテンツのグループ化を行い、混乱を減らし、一目で理解しやすくします。

悪い例

スペースなど余白が無くあいまい。

良い例

見やすいスペースや余白、関連性のグループ化。

さまざまなビューポートサイズのデザイン

携帯電話やズームしたブラウザウィンドウなど、さまざまなサイズの ビューポート でページデザインがどのように表示されるかを確認してください。

ヘッダーやナビゲーションなど主要な要素の位置と表示を変更するなど、余白を最大限に活用します。テキストサイズと行幅が、より読みやすくなるように設定されていることを確認してください。

携帯電話や拡大したブラウザウィンドウなど、サイズの異なるビューポートでWebページがどのように表示されるかを考慮する必要があります。ヘッダーやナビゲーションなど主要な要素の位置や見せ方は、余白を最大限に活用し、表現します。テキストのサイズと線の幅は、読みやすさと可読性を高めるように設定します。

広いウィンドウで小さな文字で表示する場合は、複数のカラムで主要コンテンツを表示し、ナビゲーションオプションを設置し、主要コンテンツの次にサブコンテンツ情報を表示します。

携帯電話のような狭いウィンドウでの表示や大きな文字での表示は、主要コンテンツは1列で、ナビゲーションオプションはアイコンで表示し、主要コンテンツの次にくるサブコンテンツ情報はアイコンなどで表示します。

画像やメディアの代替手段をデザインに組み込みむ

イメージやメディアの代替案を設計に組み込むことができます。たとえば、次のような場合があります。

  • オーディオの トランスクリプト への可視リンク
  • ビデオの音声付きバージョンへの可視リンク
  • アイコンやグラフィカルなボタンに添えられたテキスト
  • 表や複雑なグラフの キャプション や説明文

Webデザイナーやプログラマーと協力し、テキスト以外のコンテンツの代替手段を提供します。

例:

例:トランスクリプトやオーディオ・ビデオへのリンクがあるデザイン

自動的に開始されるコンテンツの制御を行う

アニメーションや自動再生されるサウンドをユーザーが停止できるように、可視化されたコントロールを提供してください。これは、カルーセル、画像スライダー、背景の音、動画などに適用します。

例:

例:カルーセル上に再生/停止や選択のコントロールを表示します

google 広告