テキスト
これらのガイドラインは、テキスト情報に関するものです。テキスト情報とは、大ざっぱにいえば文字情報ですが、文字情報を画像化して表示するものはこれらのガイドラインの対象ではありません。これについては、「画像化されたテキストに関するガイドライン」を参照してください。
特定の感覚に依存しない表現
特定の感覚だけを前提とした表現を用いない。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者、色弱者がコンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.3.3(レベルA)：
- 参考情報
チェック内容
チェックID：0032
形状、色、大きさ、視覚的な位置、方向、音などのうち、1つだけを用いた説明ではなく、複数の要素を用いた説明をしている。
例：
- 避けるべき表現
赤字の項目は必須項目です
右の表を参照してください
青いボタンを押してください
画面右下のボタンを押してください
- 問題のない表現
赤い※印のついた項目は必須項目です
右の表（表3）を参照してください
青い「保存」ボタンを押してください
画面右下の「新規作成」ボタンを押してください
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
複数の視覚的要素を用いた表現
強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者や色弱者がコンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.1(レベルA)：
- 参考情報
チェック内容
チェックID：0031
グレイスケール表示でも利用に支障が出ない配色になっている:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェックID：0051
グレイスケール表示でも利用に支障が出ない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェック手順：Web、モバイル
グレイスケール表示にして、以下を確認する：
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
適切な文言の見出し
主題又は目的を説明する見出しを付ける。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者が、ページ内で目的のコンテンツを見つけやすくする。
- 対応するWCAG 2.1の達成基準
達成基準2.4.6(レベルAA)：
- 参考情報
チェック内容
チェックID：0271
見出しのテキストは、内容を適切に示す文言になっている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
ページの主たる言語の指定
html要素に適切にlang属性を指定する。
- 対象プラットフォーム
Web
- 意図
音声/点字出力などが適切に行われるようにする。
- 対応するWCAG 2.1の達成基準
達成基準3.1.1(レベルA)：
- 参考情報
チェック内容
チェックID：0611
日本語のページには、<html lang="ja">の記述がある。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
チェックID：0621
スクリーン・リーダーで読み上げたとき、適切な言語の音声エンジンで読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
チェック手順：Web
以下のaxe DevToolsによるチェックとNVDAによるチェックを見足していることを確認する。
axe DevToolsによるチェック方法の例
「<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)」という問題が出ないことを確認する。
この問題が出た場合は、そのページの<html>要素の記述を<html lang="ja">（主に利用されている言語が日本語の場合）のように修正する必要があります。
NVDAによるチェック方法の例
ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、表示されているテキストが問題なく読み上げられることを確認する。
このチェックを正しく実施するためには、多言語処理のための設定を行う必要があります。（スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」および「音声合成エンジンの管理」の項を参照）
部分的に使用される言語の明示
段落単位など、比較的長いテキストの言語がhtml要素のlang属性で指定したものと異なる場合は、その部分に対して適切にlang属性を指定する。
- 対象プラットフォーム
Web
- 意図
音声/点字出力などが適切に行われるようにする。
- 対応するWCAG 2.1の達成基準
達成基準3.1.2(レベルAA)：
- 参考情報
チェック内容
チェックID：0911
複数の言語が含まれているテキストについて、適切にlang属性が指定されている。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[MINOR]
チェックID：0921
複数の言語が含まれているテキストについて、多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[MINOR]
チェック手順：Web
以下のNVDAによるチェックを見足していることを確認する。
NVDAによるチェック方法の例
ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、使用されている言語に応じて読み上げに用いられる音声が切り替わることを確認する。
テキストを表示するUIコンポーネントの言語の明示
テキストを表示するUIコンポーネントにおいて、言語やロケールを指定できる場合は、適切なものを指定する。
- 対象プラットフォーム
Web、モバイル
- 意図
音声/点字出力などが適切に行われるようにする。
- 対応するWCAG 2.1の達成基準
達成基準3.1.2(レベルAA)：
チェック内容
チェックID：0912
ロケールの指定が可能なUIコンポーネントにおいては、適切なロケールを指定している。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
チェックID：0922
日付、時刻、数値などは、ページやアプリケーションで利用されている自然言語において自然な形で読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
チェック手順：Web
以下のNVDAによるチェックを見足していることを確認する。
NVDAによるチェック方法の例
ブラウズ・モードで上下矢印キーを用いて日付、時刻、数値などを読み上げさせて、以下のすべてを満たしていることを確認する。
当該箇所の読み上げに用いられる音声は、他の箇所を読み上げさせたときの音声と同じ種類の音声である
当該箇所の読み上げが、そのページやアプリケーションで用いられている言語において自然なものになっている（例：日本語が用いられている場合に、「1月1日」を「ジャニュアリーファースト」などと読み上げない）
ズーム機能を用いた200パーセントの拡大表示
コンテンツや機能を損なうことなく、ブラウザーのズーム機能で200パーセントまで拡大できるようにする。
- 対象プラットフォーム
Web
- 意図
ロービジョン者が、問題なくコンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.4(レベルAA)：
- 参考情報
チェック内容
チェックID：0321
ブラウザーのズーム機能で200パーセントまで拡大しても、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
文字サイズ設定の変更
ブラウザーの文字サイズ設定を200パーセントにしても、コンテンツの理解や機能が損なわれるような表示の崩れが発生せず、適切に拡大表示されるようにする。
- 対象プラットフォーム
Web
- 意図
ロービジョン者の中には、ブラウザーのズーム機能ではなく、文字サイズの変更機能を利用して、コンテンツを拡大表示する人もいる。このようなユーザーの利用に支障が出ないようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.4(レベルAA)：
- 参考情報
チェック内容
チェックID：0311
CSSに絶対値指定（例：px）と相対値指定（例：rem）が混在していない。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
チェックID：0323
ブラウザーの文字サイズの設定を200パーセントにしても、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
チェックID：0324
ブラウザーの文字サイズ設定を200パーセントにしたとき、実際にテキストが200パーセントに拡大され、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[MINOR]
モバイルOSの文字サイズ設定の変更
モバイルOSの設定で文字サイズを最大にしても、コンテンツの理解や機能が損なわれるような表示の崩れが発生せず、適切に拡大表示されるようにする。
- 対象プラットフォーム
モバイル
- 意図
ロービジョン者が、OSの文字サイズ変更設定で拡大表示を行う設定をした際、実際に拡大表示が行われるかどうかにかかわらず、表示が崩れるなど、コンテンツの利用に支障がでることがないようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.4(レベルAA)：
チェック内容
チェックID：0325
文字の拡大表示に対応している場合は、最大の文字サイズでの表示をしたときに、利用を困難にするような表示崩れが発生しない。
- 対象
プロダクト
- 対象プラットフォーム
モバイル
- 重篤度
[MINOR]
チェックID：0326
OSの設定で最大の文字サイズを指定しても、コンテンツの理解や利用を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 対象プラットフォーム
モバイル
- 重篤度
[NORMAL]
ズーム機能を用いた400パーセントの拡大表示
ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときでも、横書きのコンテンツのように縦スクロールを前提としたコンテンツては横スクロールが、縦書きのコンテンツのように横スクロールを前提としたコンテンツでは縦スクロールが必要にならないようにする。
- 対象プラットフォーム
Web
- 意図
ロービジョン者が、ズーム機能で拡大表示しても問題なくコンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
- 参考情報
チェック内容
チェックID：0322
1280x1024のサイズのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに適切にリフローされ
横書きのコンテンツでは横スクロールが、縦書きのコンテンツでは縦スクロールが発生しない、かつ
読み取れない内容や利用できない機能がない
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[MINOR]
テキスト表示のカスタマイズ
ユーザーがline-heightを1.5em以上、段落に続く空白を2em以上、letter-spacingを0.12em以上に変更し、その他のプロパティーを一切変更していない状況において、コンテンツおよび機能に損失が生じないようにする。
- 対象プラットフォーム
Web
- 意図
ロービジョン者が、問題なくコンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.12(レベルAA)：
- 参考情報
チェック内容
チェックID：0891
line-heightを1.5em以上、段落に続く空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を読めなくなるなど、コンテンツおよび機能に損失が生じない。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
コントラスト比の確保
文字色と背景色に十分なコントラストを確保する。
テキストの文字サイズが29px（22pt）以上の場合：3:1以上
テキストの文字サイズが24px（18pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
注：freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [1]の日本語訳[2]中の訳注で示されている基準を用いています。
- 対象プラットフォーム
Web
- 意図
ロービジョン者が、コンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.3(レベルAA)：
達成基準1.4.6(レベルAAA)：
- 参考情報
チェック内容
チェックID：0002
テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
文字サイズが29px（22pt）以上の場合：3:1以上
文字サイズが24px（18pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
チェックID：0021
テキストの表示色と背景色には、充分なコントラスト比が確保されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順：Web
以下のaxe DevToolsによるチェック、またはWebAIM Contrast Checkerによるチェックのいずれかを満たしていることを確認する。
axe DevToolsによるチェック方法の例
「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)」という問題が出ないことを確認する。
ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。
マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
freeeの場合日本語テキストを想定しているため、「大きいテキスト」を29px（22pt）以上または24px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、18pt以上22pt未満（太字の場合は14pt以上18pt未満）の日本語のテキストについて、Axe DevToolsはコントラスト不足を検知できない
テキスト以外のコントラスト比が不足している場合
アイコン、画像、画像化されたテキスト、ボタンや入力フィールドの枠線など
半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
要素が重なっていて背景色と前景色の特定が難しい場合
WebAIM Contrast Checkerによるチェック方法の例
WebAIM Contrast Checkerで、以下の基準を満たしていることを確認する：
文字サイズが29px（22pt）以上の場合：3:1以上
文字サイズが24px（18pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
モバイルOSでのコントラスト比の確保
文字色と背景色に十分なコントラストを確保する。
テキストの文字サイズが24px（18pt）以上の場合：3:1以上
テキストの文字サイズが19px（14pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
注：モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン[3] [4]においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
- 対象プラットフォーム
モバイル
- 意図
ロービジョン者が、コンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.3(レベルAA)：
達成基準1.4.6(レベルAAA)：
- 参考情報
チェック内容
チェックID：0003
テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
文字サイズが24px（18pt）以上の場合：3:1以上
文字サイズが19px（14pt）以上で太字の場合：3:1以上
その他の場合：4.5:1以上
- 対象
デザイン
- 対象プラットフォーム
モバイル
- 重篤度
[NORMAL]
チェックID：0021
テキストの表示色と背景色には、充分なコントラスト比が確保されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]