情報設計・コンテンツ準備

情報設計では、要件定義に基づいて、ウェブサイト全体の構成や、各ウェブページの情報構造などユーザーの動線を踏まえたワイヤーフレームを作成し、ページのレイアウトやコンテンツの配置などを設計し、ウェブサイトの骨組みを決めます。

並行してコンテンツ準備では、ウェブサイトに掲載する文章や画像、動画などの原稿を準備します。各種原稿を作成する上で必要なルールなども用意します。

情報設計

制作依頼開発・運用

ウェブサイトに掲載する情報を精査し、構造を整理するためのディレクトリマップを作成したり、ワイヤーフレームを作成する工程です。またコンテンツの原稿も並行して準備を進めることになりますので、それぞれの留意点を説明します。

ウェブサイト構造

制作依頼開発・運用

ウェブサイトの情報構造は、ナビゲーションやウェブページそれぞれのアウトラインに影響するため最も重要です。ここがアクセシブルでないと、ユーザーがウェブサイトをうまく回遊できなかったり、目的のページにたどり着けません。アクセシブルなウェブサイト構造を考える際には、次の点に注意します。

情報の分類やカテゴリーに沿ったツリー構造を作る
ページやコンテンツのタイトルを適切に設定する
ウェブサイト内でページタイトルの重複がないようにする

ツリー構造は、ナビゲーションからの探しやすさを助けます。また、パンくずリストなどの部分的に切り取られたヒエラルキーの矛盾や、知覚した際の混乱を避けるためにも重要です。

適切で重複しないタイトルは、ナビゲーションの見た目を整えるだけでなく、スクリーンリーダーの読み上げを助けます。スクリーンリーダーユーザーにとって、ページに訪れた際またはページ内を移動する際に、最初に読み上げられるのはタイトルです。そのため、タイトルが適切で重複しないことは、スクリーンリーダーユーザーにとって非常に重要です。また、検索エンジンの検索結果やブックマークのタイトルとしても使われることを考えると重複しないことは広い意味でアクセシブルと言えます。

関連する達成基準

コンテンツ

コンテンツはウェブサイトの要です。ページにアクセスしたユーザーがコンテンツを理解できるように、以下の点に注意して設計します。

適切な情報構造でコンテンツを提供する
代替テキストや字幕、音声解説など代替コンテンツを用意する
視覚だけでしか認識できない表現を使わない

適切な情報構造をつくり、見出しなどを用いてコンテンツを組み立てることで、ユーザーはコンテンツを理解しやすくなります。特に見出しの扱いは重要で、スクリーンリーダーにおける見出しジャンプ機能や、検索エンジンの検索結果で活用されたり、AIによる要約にも有効に働くなど、幅広い効果が期待できます。また、リストや表などを使って情報を整理することも、理解の助けになります。

写真や図などのテキスト以外の表現方法を用いているコンテンツには、テキストによる表現方法で情報を伝える代替コンテンツを設けることが求められます。例えば動画には字幕や音声解説をするといった、視覚や聴覚のどちらかだけに偏らない情報提供が必要です。

視覚でしか知覚できない表現は、例えば色のみで情報を伝えるなどがあります。これらは色覚特性をもつユーザーや、画面の色調を変えているユーザーにとっては理解しにくいものです。「左図のような〜」や「丸い印が〜」のように特定の要素を指し示す様な、視覚的にしかわからない表現を使わないようにします。特に二次元的位置関係はレスポンシブデザインなどで変わることがあるため注意が必要です。情報は一次元的な順序でしか知覚できないユーザーがいることを前提に設計します。

問題がある例

フォーム画面のスクリーンショット。企業名・団体名という入力欄名が赤い色で、部署名の入力欄名が緑色で表示されている。 — 色のみで対象箇所がどこかの情報を示している例

前述のスクリーンショット画像を、色覚特性があるユーザーが見た状態の色で再現している。二つとも入力欄名が同じ色に見える。 — 色のみで対象箇所がどこかの情報を示している例を色覚特性があるユーザーが見た場合のイメージ。どこが赤字かがわからない。

よい例

フォーム画面のスクリーンショット。企業名・団体名という入力欄名に、「*」の記号が追加されている。記号の色は赤いが、部署名の入力欄名には記号がないため、テキストで区別ができる状態。 — 色だけではなくテキストで対象箇所がどこかを示している例。

関連する達成基準

コンテンツ原稿

制作依頼開発・運用

情報構造を原稿で用意する

情報の適切な構造化が必要なことを前の項目で説明しました。

実例

すべてが同じフォントサイズ、同じ線の太さでテキストが並んでいる画面のスクリーンショット。大量のテキストがあり、視覚的に見やすい状態ではない。 — 見出しや段落の区切りがわかりにくい画面の例

テキストの文章構造を表すHTML要素を利用した状態のブラウザの画面のスクリーンショット。 — 見出しや段落が設定されている画面の例。情報構造を可視化するブラウザのアドオンツールを使って、画面左側にウェブページ全体の構造が表示されている。画面上の見出し部分には、HTMLの見出し要素（h1やh2など）が設定されていることが緑色の枠線とともに表示されている

視覚的にもHTML上でも、情報が適切に構造化されており、情報のまとまりに適した見出しが用意されていることで、ウェブページの内容は読みやすく、理解しやすくなります。情報の構造化はウェブページをHTML化する開発段階で初めて考えるのでは間に合いません。原稿の段階から考慮されていることで、ワイヤーフレームやビジュアルデザイン、開発を情報と一致した状態で用意することができます。

代替コンテンツ

画像で表している情報をテキストによって伝えるのが代替テキストです。画像が見えない状態でウェブページを見て、画像が見えるときのウェブページで把握できる情報がわからないときは、画像の代替テキストが不足していると考えられます。

実例

プロメトリックウェブサイトのトップページのスクリーンショット。 — 画像が問題なく表示されている画面の例

プロメトリックウェブサイトのトップページのスクリーンショット。代替テキストが表示されていない。 — 画像が読み込まれていない状態の画面。代替テキストが設定されていないため、何の情報があるのかわからない例

プロメトリックウェブサイトのトップページのスクリーンショット。代替テキストが表示されている。 — 画像が読み込まれていない状態の画面。代替テキストが設定されているため、どんな情報があるのかがわかる例

代替テキストを作成する場合、画像内に含まれている文字はすべて過不足なく書き起こします。

プロメトリックウェブサイトのトップページで使われている画像のスクリーンショット。画像内に何か所かテキストが含まれている。

悪い例

<img src=”img/slide_01.jpg" alt="世界水準のCBTプロメトリック" >

よい例

<img src=”img/slide_01.jpg" alt="世界水準のCBT Computer Based Testing プロメトリック Futures Start Here." >

地図、組織図、グラフなどの複雑な構成の画像の場合

地図や組織図のように、情報が複雑な構造を持っていたり、目的地までのルートの説明文章が非常に長くなったりする場合は、代替テキストではなく、ウェブページ本文で説明するようにします。 alt属性の中では、見出しや段落分けができません。音声で情報を読み上げている場合、構造が非常にわかりにくくなります。またテキストのコピーも容易ではありません。

代替テキストの長さは文字数として規定はありませんが、80文字程度を目安にするとよいと言われています。

実例

https://www.prometric-jp.com/organizer/service/
グラフのデータを表形式（table要素）で別途表示している。

<h3>積み重ねた実績</h3>

<p>プロメトリックは30年以上にわたって世界中の試験主催者団体の試験配信を安全、確実に行ってきました。<br>

日本でも50以上の多くの試験主催者団体のCBT移行をお手伝いしました。<br>

国内の配信実績は、年間200万試験、累計3,000万件以上と業界トップ規模です。</p>

<img alt="プロメトリック試験配信数推移" width="1960">

<h3>配信数推移表</h3>

<table>

<tbody>

<tr>

<th width="12%">2000</th>

<td width="21%">191,709</td>

<th width="12%">2008</th>

<td width="21%">1,711,853</td>

<th width="12%">2016</th>

<td>1,790,814</td>

</tr>

音声解説

適合レベルAAでは、動画の代替コンテンツに音声解説が必須となります。音声解説は、映像で説明されている情報を音声でもわかるように動画内で説明をすることです。

実例

アクセシビリティの祭典 2018（副音声付き）

動画のシナリオ、コンテの段階で、音声解説でどのような説明をするか、どのタイミングで入れるか、どのくらいの長さが必要かを考えておく必要があります。映像制作担当者と連携し、映像の説明の原稿を作成するようにしてください。

動画

動画の原稿（コンテ、シナリオ）を作成する場合、以下に留意します。

光過敏性発作を起こすような、閃光や点滅の表現が使われていないか

動画やアニメーションでは、急激な光の変化や強い閃光、点滅のような表現が用いられることがあります。こうした表現は、ユーザー自身も予期しない光過敏性発作を起こす可能性があることがわかっています。
しかし、コンテンツオーナーが表現したい内容に、閃光や点滅の手法が必要不可欠なこともあります。ルールとして、光過敏性発作を起こすような表現を用いないのがもっとも安全でアクセシブルではありますが、表現として必要不可欠である場合は、次善の策として以下のような対応を検討してください。

達成基準 2.3.1 3 回の閃光、又は閾値以下の範囲内に収まる表現かを確認する
閃光や点滅の表現は自動再生させないようにする
閃光や点滅を用いているウェブページやコンテンツを表示する前に、ユーザーに情報提供し、利用確認を取るステップを用意する