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

ページタイトルはページ内容のタイトルであり、他と被らないタイトルをつける

  • Webページごとに、ページ内容のタイトルを決定し、他のページと区別する短いタイトルをつけます
  • ページタイトルは、コンテンツの見出しと同じです。固有で関連性の高い情報にします
例:

例えば、オンライン販売の本屋のWebサイトでは以下のようにします

  • ホームページタイトル
    • ABCブックストアオンライン
  • ページタイトルの後にホームページタイトルをつける
    • ABCブックストアオンライン | 今月発売週刊誌
  • プロセス内のステップを含むページ名
    • 購入方法 (ステップ 1 / 3) | ABCブックストアオンライン

見出しの書き方-意味や文章構造を伝える

シンプルな見出しを使い段落をまとめ、セクションを明確に説明します。見出しは、コンテンツ概要を簡潔に書きます。また、見出しを使いコンテンツを整理します。

悪い例
悪い見出し配置の表示例
<h1>理解しやすい情報</h1>
	 <p>コンテンツ制作者は、テキストコンテンツが、音声合成による読み上げ時も含めて、可能な限り多くの人に読まれ、理解されるようにする必要があります。そのようなコンテンツにはアラビア語、オランダ語、韓国語など、ウェブページの主要言語の識別Webページのテキストの文章、フレーズ、その他の部分の言語の識別珍しい単語、フレーズ、イディオム、略語などの定義を提供すること可能な限り明確でシンプルな言語を使用する、または簡略化したバージョンを提供する <br><br>この要件を満たすことで、支援技術を含むソフトウェアがテキストコンテンツを正しく処理できるようになります。例えば、この要件は、ソフトウェアがコンテンツを読み上げたり、ページの要約を生成したり、技術的な専門用語などの珍しい単語の定義を提供したりするのに役立ちます。また、より複雑な文章やフレーズ、ボキャブラリーを理解するのが難しい人にも役立ちます。特に、さまざまなタイプの認知障害を持つ人々を支援します。</p>
良い例
良い見出し配置の表示例
<h1>理解しやすい情報</h1>
	<h2>テキストが読みやすく、理解しやすい</h2>
		<p>コンテンツ制作者は、テキストコンテンツが、音声合成による読み上げ時も含めて、可能な限り多くの人に読まれ、理解されるようにする必要があります。そのようなコンテンツにはアラビア語、オランダ語、韓国語など、ウェブページの主要言語の識別Webページのテキストの文章、フレーズ、その他の部分の言語の識別珍しい単語、フレーズ、イディオム、略語などの定義を提供すること可能な限り明確でシンプルな言語を使用する、または簡略化したバージョンを提供する。</p>
	<h2>支援技術とソフトウエア</h2>
		<p>この要件を満たすことで、支援技術を含むソフトウェアがテキストコンテンツを正しく処理できるようになります。例えば、この要件は、ソフトウェアがコンテンツを読み上げたり、ページの要約を生成したり、技術的な専門用語などの珍しい単語の定義を提供したりするのに役立ちます。また、より複雑な文章やフレーズ、ボキャブラリーを理解するのが難しい人にも役立ちます。特に、さまざまなタイプの認知障害を持つ人々を支援します。</p>

リンク先の内容を説明するためのリンクテキストをつけるとき、「ここをクリック」「もっとよむ」 など、あいまいなリンクテキストは使用しないでください。

ドキュメントタイプやファイルサイズなど、リンク先の情報を指定します。例(wordドキュメント、20MB)

悪い例

リンクテキストに意味を持たない例

携帯電話の詳細な機能についてはここをクリックしてください。

良い例

リンクテキストに意味がある例

携帯電話の詳細な機能を読んでください

画像には意味のある代替テキストを書く

すべての画像に対し、画像の情報や機能を意味する代替テキストを記載してください。ただし、装飾的な画像には代替テキストは不要です。

悪い例

携帯電話の充電方法。付属のケーブルと電源アダプターを使い、携帯電話を電源コンセントに接続します。

画像の代替テキスト

<img src="iphone.png" alt="携帯電話を充電"> 
良い例

携帯電話の充電方法。付属のケーブルと電源アダプターを使い、携帯電話を電源コンセントに接続します。

画像の代替テキスト

<img src="iphone.png" alt="コンセントを携帯の下部につなぎます"> 

マルチメディアのトランスクリプトやキャプションの作成

ポッドキャストのような音声のみのコンテンツでは、 トランスクリプト を提供します。
トレーニングビデオのような音声と映像のコンテンツの場合は、 キャプション を提供します。

トランスクリプトやキャプションには、「ドアがきしむ」など、コンテンツを理解する上で重要となる音声情報や音を含めます。ビデオのトランスクリプトには、「彼女は部屋を出た」のように、重要な視覚的コンテンツの説明も含めます。

明確な指示

指示、ガイダンス、エラーメッセージは明確で理解しやすく、不必要に専門的な表現を避けます。日付のフォーマットなどの入力要件を記載します。

例:

パスワードは、少なくとも1つの数字(0-9)を含む6文字以上でなければなりません。

例:

エラーは、問題の内容とその解決方法を示します。

  •  ユーザー名「Takashi777」はすでに使用されています。
  •  パスワードには、少なくとも1つの数字を含める必要があります。

コンテンツは明確かつ簡潔に

文脈に応じてシンプルな言葉とフォーマットを使用します。

  • 短くて分かりやすい文章と段落で書く
  • 不必要に複雑な単語やフレーズを使わない。
  • 省略単語は、最初に使うときに展開する。例えば、WCAG(Web Content Accessibility Guidelines)など
  • あまり知られていない用語は、用語集を用意することを検討する
  • 必要に応じてリスト形式にする
  • 意味を明確にするために、画像、イラスト、動画、音声、記号などの使用を検討する
悪い例

CPP:車両衝突が発生した場合、会社が指名した代表者は、すべての関係者に属する財産に対する損害の範囲と原因を確認するよう求めます。当社の担当者が因果関係を理解できる情報を入手した場合、当社は適切な金銭的補償を行う場合と行わない場合があります。その結果、次の選択肢の1つを生じることがあります。クレームが承認されず、拒絶された状態、クレームの状態が曖昧であり、更なる処理が行われる前に追加情報を必要とすること、クレームが部分的に承認され、減額された支払がなされ、発行されること、又はクレームが完全に承認され、かつ、全額のクレームの支払が割り当てられ、発行されること。

良い例

CPP(Claims Processing Procedure)の略:

お客様が交通事故に遭われた場合、当社の代理店が調査を行います。調査の結果、保険金の支払いが決定されます。その結果、以下のようなことが考えられます。

  • 承認された請求・・・・・・全額支払い
  • 部分的に承認された請求・・支払額の減額
  • 未決定の請求・・・・・・・より多くの情報が必要
  • 拒否された請求・・・・・・支払いなし
google 広告