テキスト

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

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.3.3:

参考情報

チェック内容

チェックID:0032

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。

例:

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

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

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

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

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

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

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.1:

参考情報

チェック内容

チェックID:0031

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない配色になっている:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

チェックID:0051

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 2.4.6:

参考情報

チェック内容

チェックID:0271

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

見出しのテキストは、内容を適切に示す文言になっている。

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 3.1.1:

参考情報

チェック内容

チェックID:0611

対象

コード

対象プラットフォーム

Web

重篤度

[CRITICAL]

日本語のページには、<html lang="ja">の記述がある。

チェックID:0621

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

NVDAによるチェック実施方法の例
  1. NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。(スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照)

  2. ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、表示されているテキストが問題なく読み上げられることを確認する。

iOS VoiceOverによるチェック実施方法の例

多言語読み上げが可能な設定を行った上で読み上げを実行した際、日本語の内容が適切に読み上げられることを確認する。

axe DevToolsによるチェック実施方法の例

<html>要素にはlang属性がなければなりません」という問題が出ないことを確認する。

この問題が出た場合は、そのページの<html>要素の記述を<html lang="ja">(主に利用されている言語が日本語の場合)のように修正する必要があります。

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 3.1.2:

参考情報

チェック内容

チェックID:0911

対象

コード

対象プラットフォーム

Web

重篤度

[MINOR]

複数の言語が含まれているテキストについて、適切にlang属性が指定されている。

チェックID:0921

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

複数の言語が含まれているテキストについて、多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

NVDAによるチェック実施方法の例
  1. NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。(スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照)

  2. ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、使用されている言語に応じて読み上げに用いられる音声が切り替わることを確認する。

iOS VoiceOverによるチェック実施方法の例

多言語読み上げが可能な設定を行った上で読み上げを実行した際、コンテンツの原語に応じて適切に音声合成エンジンが切り替わることを確認する。

[MUST]ズーム機能を用いた200パーセントの拡大表示

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.4:

参考情報

チェック内容

チェックID:0321

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

ブラウザーのズーム機能で200パーセントまで拡大しても、テキストの理解を妨げるようなレイアウト崩れが起こらない。

[MUST]文字サイズ変更機能の使用

コンテンツや機能を損なうことなく、ブラウザーの文字サイズ変更機能で200パーセントの拡大表示をする設定ができるようにする。

意図

ロービジョン者が、ズーム機能ではなく文字サイズ変更機能で拡大表示を行う設定をした際、実際に拡大表示が行われるかどうかにかかわらず、表示が崩れるなど、コンテンツの利用に支障がでることがないようにする。

対応するWCAG 2.1の達成基準

SC 1.4.4:

参考情報

チェック内容

チェックID:0311

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

CSSに絶対値指定(例:px)と相対値指定(例:rem)が混在していない。

チェックID:0323

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

ブラウザーの文字サイズ変更機能で200パーセントの拡大表示をする設定をしても、テキストの理解を妨げるようなレイアウト崩れが起こらない。

[SHOULD]文字サイズ変更機能による200パーセントの拡大表示

ブラウザーの文字サイズ変更機能で200パーセントの拡大表示をできるようにする。

意図

ロービジョン者が、ズーム機能ではなく文字サイズ変更機能で拡大表示をできるようにする。

対応するWCAG 2.1の達成基準

SC 1.4.4:

参考情報

チェック内容

チェックID:0324

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

ブラウザーの文字サイズ変更機能で200パーセントまで拡大することができ、その際テキストの理解を妨げるようなレイアウト崩れが起こらない。

チェックID:0325

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MINOR]

文字の拡大表示に対応している場合は、最大の文字サイズでの表示をしたときに、利用を困難にするような表示崩れが発生しない。

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

400パーセントの拡大表示をしたときでも、横書きのコンテンツのように縦スクロールを前提としたコンテンツては横スクロールが、縦書きのコンテンツのように横スクロールを前提としたコンテンツでは縦スクロールが必要にならないようにする。

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.10:

参考情報

チェック内容

チェックID:0322

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

1280x1024のサイズのウィンドウにおいて400パーセントの拡大表示をしたときに適切にリフローされ

  • 横書きのコンテンツでは横スクロールが、縦書きのコンテンツでは縦スクロールが発生しない、かつ

  • 読み取れない内容や利用できない機能がない

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.12:

参考情報

チェック内容

チェックID:0891

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

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

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

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

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

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.3:
SC 1.4.6:

参考情報

チェック内容

チェックID:0002

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。

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

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

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

チェックID:0021

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

テキストの表示色と背景色には、充分なコントラスト比が確保されている。

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

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

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

axe DevToolsによるチェック実施方法の例

要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。

ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。

  • マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合

  • 大きいテキストのコントラスト比が3:1以上4.5:1未満の場合

    • freeeの場合日本語テキストを想定しているため、「大きいテキスト」を30px(22pt)以上または22px(18pt)以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、その間のサイズではコントラスト不足を検知できない

  • テキスト以外のコントラスト比が不足している場合

    • アイコン、画像、画像化されたテキスト、ボタンやフィールドの枠線など

  • 半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合

  • 要素が重なっていて背景色と前景色の特定が難しい場合