テキスト

これらのガイドラインは、テキスト情報に関するものです。テキスト情報とは、大ざっぱにいえば文字情報ですが、文字情報を画像化して表示するものはこれらのガイドラインの対象ではありません。これについては、「画像化されたテキストに関するガイドライン」を参照してください。

文言と表現

参考:テキスト情報の文言とアクセシビリティー

[MUST] 特定の感覚に依存しない表現

ガイドライン

[MUST] 特定の感覚だけを前提とした表現を用いない。

チェック内容
  • ビジュアル: 形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。(例示参照)

意図

視覚障害者、色弱者がコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

避けるべき表現:
  • 赤字の項目は必須項目です

  • 右の表を参照してください

  • 青いボタンを押してください

問題のない表現:
  • 赤い※印のついた項目は必須項目です

  • 右の表(表3)を参照してください

  • 青い「保存」ボタンを押してください

[MUST] 複数の視覚的要素を用いた表現

ガイドライン

[MUST] 強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。

チェック内容
  • ビジュアル: テキストはグレースケール表示でも意図が伝わるような文言になっている。

意図

視覚障害者や色弱者がコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

[MUST] 適切な文言の見出し

ガイドライン

[MUST] 主題又は目的を説明する見出しを付ける。

チェック内容
  • ビジュアル: 見出し、画像やフォーム・コントロールに付くラベルは、内容を適切に示す文言になっている。

意図

視覚障害者が、ページ内で目的のコンテンツを見つけやすくする。

参考

対応するWCAG 2.1の達成基準

自然言語

参考:lang 属性と音声読み上げ

[MUST] ページの主たる言語の指定

ガイドライン

[MUST] html要素に適切にlang属性を指定する。

チェック内容
  • マークアップ: 日本語のページには、<html lang="ja">の記述がある。

意図

音声/点字出力などが適切に行われるようにする。

対応するWCAG 2.1の達成基準

[SHOULD] 部分的に使用される言語の明示

ガイドライン

[SHOULD] 段落単位など、比較的長いテキストの言語がhtml要素のlang属性で指定したものと異なる場合は、その部分に対して適切にlang属性を指定する。

チェック内容
  • 挙動、マークアップ: 複数の言語が含まれているテキストについて、iOS VoiceOverのように多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

意図

音声/点字出力などが適切に行われるようにする。

対応するWCAG 2.1の達成基準

テキスト表示の拡大

参考:拡大表示時のアクセシビリティー

[MUST] 200パーセントの拡大表示

ガイドライン

[MUST] コンテンツや機能を損なうことなくブラウザーのズーム機能で200パーセントまで拡大できるようにする。

チェック内容
  • ビジュアル、挙動: 200パーセントまで拡大しても、テキストの理解を妨げるようなレイアウト崩れが起こらない。

意図

ロービジョン者が、問題なくコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

[SHOULD] 400パーセントの拡大表示

ガイドライン

[SHOULD] 4倍に拡大表示したときでも、縦スクロールを前提としたコンテンツては横スクロールが、横スクロールを前提としたコンテンツでは縦スクロールが必要にならないようにする。

チェック内容
  • ビジュアル、挙動: 4倍の拡大表示をしたときにも適切にリフローされ、読み取れない内容や利用できない機能がない。

意図

ロービジョン者が、ズーム機能で拡大表示しても問題なくコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

テキストの表示

[MUST] テキスト表示のカスタマイズ

ガイドライン

[MUST] ユーザーがline-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更し、その他のプロパティーを一切変更していない状況において、コンテンツおよび機能に損失が生じないようにする。

チェック内容
  • 挙動: line-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。

意図

ロービジョン者が、問題なくコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

[MUST] コントラスト比の確保

ガイドライン

[MUST] 文字色と背景色に十分なコントラストを確保する。

  • テキストの文字サイズが30px(22pt)以上の場合: 3:1以上([SHOULD] 4.5:1以上)

  • テキストの文字サイズが22px(18pt)以上で太字の場合: 3:1以上([SHOULD] 4.5:1以上)

  • その他の場合: 4.5:1以上([SHOULD] 7:1以上)

チェック内容
  • ビジュアル: テキストは、文字色と背景色に十分なコントラストが確保されている。

意図

ロービジョン者が、コンテンツを利用できるようにする。