テキスト

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0032

形状、色、大きさ、視覚的な位置、方向、音などのうち、1つだけを用いた説明ではなく、複数の要素を用いた説明をしている。

例：

避けるべき表現

  • 赤字の項目は必須項目です

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

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

  • 画面右下のボタンを押してください

問題のない表現

  • 赤い※印のついた項目は必須項目です

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

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

  • 画面右下の「新規作成」ボタンを押してください

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報
関連FAQ

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

適切な文言の見出し

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報
関連FAQ

チェック内容

チェックID：0271

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

ページの主たる言語の指定

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0611

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

対象

コード

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0621

スクリーン・リーダーで読み上げたとき、適切な言語の音声エンジンで読み上げられる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0621-axe-01と0621-nvda-01がOKであることを確認する。

0621-axe-01：axe DevToolsによるチェック方法の例

axe DevToolsで「<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)」という問題が出ないことを確認する。

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

0621-nvda-01：NVDAによるチェック方法の例

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

このチェックを正しく実施するためには、多言語処理のための設定を行う必要があります。（スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」および「音声合成エンジンの管理」の項を参照）

参考動画：適切な言語の音声【NVDAでアクセシビリティー チェック】

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0911

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

対象

コード

対象プラットフォーム

Web

重篤度

[MINOR]

チェックID：0921

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

チェック手順：Web

以下の0921-nvda-01がOKであることを確認する。

0921-nvda-01：NVDAによるチェック方法の例

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

参考動画：複数の言語の音声【NVDAでアクセシビリティー チェック】

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0321

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

文字サイズ設定の変更

ブラウザーの文字サイズ設定を200パーセントにしても、コンテンツの理解や機能が損なわれるような表示の崩れが発生せず、適切に拡大表示されるようにする。

対象プラットフォーム

Web

意図

ロービジョン者の中には、ブラウザーのズーム機能ではなく、文字サイズの変更機能を利用して、コンテンツを拡大表示する人もいる。このようなユーザーの利用に支障が出ないようにする。

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0311

CSSのサイズなどの指定で、絶対値指定（例：px）と相対値指定（例：rem）が混在していない。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0323

ブラウザーの文字サイズの設定を200パーセントにしても、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0324

ブラウザーの文字サイズ設定を200パーセントにしたとき、実際にテキストが200パーセントに拡大され、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

ズーム機能を用いた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の達成基準
参考情報

チェック内容

チェック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の達成基準
参考情報

チェック内容

チェックID：0002

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

  • 文字サイズが29px（22pt）以上の場合：3:1以上

  • 文字サイズが24px（18pt）以上で太字の場合：3:1以上

  • その他の場合：4.5:1以上

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0021

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0021-axe-01または0021-webaim-01がOKであることを確認する。

0021-axe-01：axe DevToolsによるチェック方法の例

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はコントラスト不足を検知できない

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

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

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

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

0021-webaim-01：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の達成基準
参考情報

チェック内容

チェックID：0003

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

  • 文字サイズが24px（18pt）以上の場合：3:1以上

  • 文字サイズが19px（14pt）以上で太字の場合：3:1以上

  • その他の場合：4.5:1以上

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

チェックID：0021

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]