デザイン コンテンツ

チェック項目

「ページタイトル」とは

レベル1：必ず達成

ページタイトルは、ページの主題を表す簡潔なテキストを指定してください。ページタイトルはブラウザのタブに表示され、スクリーンリーダーによって読み上げられます。ページの内容を把握したり、たくさん並んだタブの中から目的のタブを探すための重要な手がかりとしてページタイトルは重要です。

参考情報

• 達成基準 2.4.2: ページタイトルを理解する

チェック項目

「見出し」とは

レベル1：必ず達成

ページの情報構造を見出しを使って整理すると、ユーザーが情報を素早く把握できるようになります。特に、スクリーンリーダーの利用者は見出しを拾い読みすることでページの全体構造を把握しています。

参考情報

• 達成基準 2.4.6: 見出し及びラベルを理解する
• スクリーンリーダーによる見出しの拾い読みのデモ

チェック項目

「画像の代替テキスト」とは

レベル1：必ず達成

視覚障害者はスクリーンリーダーを通じて代替テキストを合成音声または点字で読むことになります。ネットワーク状況によって画像がうまく読み込まれなかったときにも代替テキストが使われます。代替テキストが不十分だったり指定されていなかったりすると、必要な情報が伝わらなくなってしまいます。

適切な代替テキストは前後の文脈やユーザーに伝えたい情報によって変化します。「代替テキストの考え方」は適切な代替テキストを考えるときに有用なガイドとなっています。

参考情報

• 代替テキストの考え方
• 達成基準 1.1.1: 非テキストコンテンツを理解する

チェック項目

「動画の字幕」とは

レベル1：必ず達成

動画に字幕を付けると、聴覚障害者のみならず、音を出せない環境や状況にあるユーザーにとっても動画を利用しやすくなります。

参考情報

• 達成基準 1.2.2: キャプション (収録済) を理解する
• Making Audio and Video Media Accessible
• 字幕を追加する - YouTube ヘルプ

チェック項目

「自動再生するコンテンツ」とは

レベル1：必ず達成

画面内に自動再生するコンテンツがあることで、特定のユーザーがウェブページの利用が困難になることがあります。以下はその一例です。

• 注意欠陥障害をもつユーザーは動き続けるコンテンツに注意を取られ、ページのほかの部分を利用できなくなることがあります。
• 情報の取得に時間がかかる人は、コンテンツを読み終わる前に表示が切り替わってしまうかもしれません。
• コンテンツの変化に伴い、フォーカスがリセットされたり音声が途切れたりすることによって、スクリーンリーダー利用上の妨げになることがあります。

参考情報

• 達成基準 2.2.2: 一時停止、停止、非表示を理解する

チェック項目

「閃光」とは

レベル1：必ず達成

閃光を放つ（激しく点滅する）コンテンツは可能な限り避けてください。必要な場合は点滅の速度や色差・面積を小さくする対策を講じてください。

光感受性による発作性障害のある人は、閃光を放つコンテンツによって発作を引き起こす恐れがあります。

参考情報

• 達成基準 2.3.1: 3 回の閃光、又は閾値以下を理解する

チェック項目

「グラフや図」とは

レベル2：可能な限り達成

グラフや図は多くの情報を効率的に伝えられる表現方法ですが、視覚に偏った表現になりがちなため、視覚による情報取得に制約があるユーザーには情報が伝わりづらいことがあります。

グラフや図は複雑になりすぎないようにしてください。グラフや図に含まれる情報量が、本文または代替テキストが伝える情報量を大きく上回ることのないようにしてください。

グラフの元データを利用できるようにしておくと、データの利用性やアクセシビリティが向上します。

参考情報

• 達成基準 1.1.1: 非テキストコンテンツを理解する

チェック項目

「データ可視化」とは

レベル2：可能な限り達成

グラフを表現している視覚的要素（点や線・面など）と凡例を、色だけを手掛かりに紐づけていると、ロービジョンや色覚特性のあるユーザーにとって利用しづらくなることがあります。

具体例：凡例付きの円グラフ

参考情報

• 達成基準 1.4.1: 色の使用を理解する

チェック項目

「表」とは

レベル2：可能な限り達成

表は画像化せず、HTMLをつかってマークアップされるものとしてデザインしてください。

セルの結合を多用した表や1件のデータが複数行にわたる表、入れ子構造になっている表は、理解しやすさやスクリーンリーダーによる利用性が下がります。多くの情報量を表に含めようとせず、いくつかのシンプルな表に分割できないかどうか検討してください。

具体例①：セルの結合のある表

具体例②：入れ子になった表

参考情報

• 総務省｜報道資料｜統計表における機械判読可能なデータの表記方法の統一ルールの策定

チェック項目

「音声のみのコンテンツ」とは

レベル2：可能な限り達成

映像を伴わない音声のみのコンテンツ（例えばポッドキャスト）は、聴覚障害者が利用することができません。書き起こしテキストなどを用いて、音声と同等の情報を含む代替コンテンツを提供してください。

参考情報

• 達成基準 1.2.1: 音声のみ及び映像のみ (収録済) を理解する

チェック項目

「動画コンテンツ（音声を含む）」とは

レベル2：可能な限り達成

音声付きの動画コンテンツは、視覚障害者や聴覚障害者にとって情報取得の障壁になることがあります。

音を出せないユーザーや聴覚障害者は音声から情報を取得できません。会話や音声・音楽に含まれる情報をキャプションとして提供する必要があります。

視覚障害者は映像から情報を取得できません。動画と同等の情報を含む代替コンテンツを提供するか、音声解説を提供する必要があります。

参考情報

• 達成基準 1.2.2: キャプション (収録済) を理解する
• 達成基準 1.2.3: 音声解説、又はメディアに対する代替 (収録済) を理解する
• 音声・映像コンテンツのアクセシビリティーを確保する
• キャプション・音声解説付き動画の例「映画『この世界の（さらにいくつもの）片隅に』予告編【日本語字幕･音声ガイド付き】 - YouTube」

チェック項目

「テキスト画像」とは

レベル2：可能な限り達成

ロービジョンのユーザーはテキストを自分の読みやすい配色に変換する支援技術を使っていることがあります。テキストが画像化されていると、この変換が行われなくなります。ロゴやアプリケーションのスクリーンショットなど、テキストが画像と一体化している場合は例外です。

参考情報

• 達成基準 1.4.5: 文字画像を理解する
• Change color contrast in Windows
• Use color filters in Windows

チェック項目

「リンクテキスト」とは

レベル3：できれば考慮

リンクテキストは遷移先のページタイトルにするなど、遷移先が理解しやすいテキストにしてください。「ここをクリック」といったテキストは単体では遷移先が理解できないため、リンクの前後のテキストを読むまで遷移先が不明瞭な状態になります。

また、リンクをクリックしたときに新しいタブが開かれたり、ファイルがダウンロードされたりすることをあらかじめテキストやアイコンを通じてユーザーに知らせるようにしてください。

参考情報

• 達成基準 2.4.4: リンクの目的 (コンテキスト内) を理解する
• G201: 新しいウィンドウを開くときに、利用者へ事前に知らせる

チェック項目

「コンテンツの順序」とは

レベル3：できれば考慮

スクリーンリーダーはコーディングされた順番どおりに読み上げます。視覚上の順序とコード上の順序が食い違っていたり、情報のヒエラルキーをうまくコード化できていなかったりすると、スクリーンリーダー利用者が混乱してしまうかもしれません。レイアウトを素直にコード化したときに情報のヒエラルキーが崩れてしまいそうなデザインは避けるか、エンジニアとコミュニケーションをとり意図したとおりに読み上げられるようにしてください。

参考情報

• 達成基準 1.3.2: 意味のある順序を理解する

チェック項目

「目次とサイトマップ」とは

レベル3：できれば考慮

目次やサイトマップは、ページやウェブサイト全体がどのような構造になっているかを把握するのに役立ちます。

参考情報

• 達成基準 2.4.5: 複数の手段を理解する