freeeアクセシビリティー・ガイドライン

このガイドラインは、参考情報の追加や表現の改善などで、随時更新されます。

リリース:

Ver. 202510.0-RELEASE+7.0.0

ガイドライン・バージョン：

Ver. 202510.0-RELEASE

チェックシート・バージョン：

7.0.0

更新日:

2025年10月31日

はじめに

freeeアクセシビリティー・ガイドラインは、アクセシビリティーが高いWebコンテンツの実現に必要な事項をまとめたものです。加えて、モバイル・アプリケーションにこれらの考え方を適用し、アクセシビリティーを向上させるために必要な情報についてもまとめています。フリー株式会社でのプロダクト開発において使いやすいガイドラインを提供することを目的に、Web Content Accessibility Guidelines (WCAG) 2.1に基づいて策定されています。

freeeアクセシビリティー・ガイドラインについて

ガイドライン策定の背景

freee社内では、プロダクトのアクセシビリティー改善を目的とした取り組みが進められる中で、いくつかの参考情報が有志によってまとめられてきました。この文書は、これらの情報を1箇所に集約し、継続的に更新していくことで、開発の現場でより使いやすい資料を提供することを目的に策定されているものです。

Webアクセシビリティーに関するガイドラインとしては、2008年にW3C勧告となったWeb Content Accessibility Guidelines (WCAG) 2.0が国際的に広く用いられています。さらにWCAG 2.0は、ISO/IEC 40500:2012として国際標準規格となり、その一致規格としてJIS X 8341-3:2016にもなっていて、日本国内においても参照されることが多いガイドラインになっています。

WCAGを社内で用いるガイドラインとして採用できるのがある種理想的な形ですが、これはあまり現実的な方法とは言えません。WCAGは、特定の技術に依存しない形で記述されているためです。こうすることで、今後Web上で用いられる技術がHTML、CSS、JavaScript以外のものに移行した場合にも適用できる内容になりますし、Web以外の媒体にも適用できるものになる可能性が高くなるという利点があります。しかし、結果として表現が抽象的になり、開発の現場においては理解しづらいものになってしまっているのも現状です。この問題を回避するために、開発の現場での使いやすさを意識し、WCAGの内容を踏襲した独自のガイドラインをまとめることになりました。

freeeアクセシビリティー・ガイドラインは、以下の方針で編集しています：

• 抽象的で分かりづらい表現をなるべく廃し、HTML/CSS/JavaScriptを用いた開発およびiOSやAndroidのアプリケーション開発を意識した具体的な表現を用いる。

• この文書で示すガイドライン項目を満たすことで、WCAG 2.1にレベルAAで適合した状態を実現できるようにする。

• 画像、リンク、フォームなど、対象となるコンテンツの種類ごとにやるべきことが分かるように分類する。

• freeeのプロダクトの性質などを考慮して、前提となるWCAG 2.1の達成基準のレベルを見直す。

• 各ガイドライン項目を満たしているかどうかを確認する方法をなるべく明記する。

• 理解を助けるための参考情報や事例を提示する。

なお、この文書で示している各ガイドライン項目は、2018年にW3C勧告となったWCAG 2.1に基づいて策定しています。WCAG 2.1は、WCAG 2.0策定後の状況の変化などを反映した項目追加などがされていますが、互換性を保った変更となっていますので、WCAG 2.1を満たすことでWCAG 2.0やJIS X 8341-3:2016を満たすことにもなります。

当ガイドラインの構成

この文書では、アクセシビリティーを担保するために必要な事項（ガイドライン項目）を、適用対象ごとのカテゴリーに分類しています。

各ガイドライン項目は、ガイドライン項目の本文に加えて以下の情報から構成されています。

対象プラットフォーム

そのガイドライン項目が対象としているものについて、以下のように示しています。

Web

デスクトップWebおよびモバイルのWeb（ブラウザーで表示されるものおよびWebビューで表示されるもの）

モバイル

モバイル・アプリケーション

意図

各ガイドライン項目が、どのようなユーザーのどのようなニーズを満たすものなのかを簡単に示しています。ガイドライン項目が解決しようとしている問題の本質を理解することで、そのガイドライン項目を満たしているかどうかのより正確な判断につながります。

対応するWCAG 2.1の達成基準

そのガイドライン項目がWCAG 2.1のどの達成基準に基づいているものなのかを示しています。そのガイドライン項目を満たすと、WCAG 2.1のどの達成基準を満たしたことになるのかを判断する参考情報として用いることができます。達成基準の番号、レベル、原文へのリンク、ウェブアクセシビリティ基盤委員会 (WAIC) による翻訳版へのリンクを掲載しています。

なお、WCAG 2.1の各達成基準と当ガイドラインの項目との対応に、WCAG 2.1の各達成基準に対応するガイドライン項目の一覧を示しています。

参考情報

必要に応じて、「意図」をより良く理解するための参考情報や、チェック方法に関する補足情報へのリンクを掲載している場合があります。

関連FAQ

よくある質問と回答（FAQ）に掲載されているFAQのうち、そのガイドライン項目に関連するものへのリンクを掲載しています。

チェック内容

そのガイドライン項目を満たしているかどうかを判断するために行うチェックの例を示しています。ここに示しているのはあくまでも例で、他により適切なチェック方法が存在する可能性もあります。

各チェック内容は、チェック内容本文に加えて以下の情報から構成されています。

チェックID

各チェック内容にはIDを割り当ててあります。すべてのチェックはアクセシビリティー・チェック全項目一覧にまとめてあり、「チェックID」からリンクしています。

対象

対象は、「チェック内容」の種類に応じて、以下のように分類しています。

デザイン

主に仕様を決める時点や設計段階で確認すべき項目

コード

マークアップやコーディングを確認しなければ判断が難しく、主に実装時に確認すべき項目

プロダクト

実際に操作してみたときの挙動で判断でき、主に実装後に確認する項目

対象プラットフォーム

ガイドライン項目同様、そのチェック内容の適用を想定しているものについて、以下のように示しています。

Web

デスクトップWebおよびモバイルのWeb（ブラウザーで表示されるものおよびWebビューで表示されるもの）

モバイル

モバイル・アプリケーション

なお、複数のガイドライン項目に対応しているチェック内容の場合、ガイドライン項目で示している「対象プラットフォーム」とそのチェック内容で示している「対象プラットフォーム」が一致していない場合があります。（例：ガイドライン項目の対象プラットフォームはWebのみで、対応するチェック内容の対象プラットフォームがWebとモバイルの場合）

重篤度

そのチェック内容を満たしていない場合の影響の大きさを示す、以下の4段階の指標です。

[CRITICAL]

操作不能になる人がいる

[MAJOR]

操作や情報取得が著しく難しくなる人がいる

[NORMAL]

不便を感じる人が少なからずいる

[MINOR]

問題はあるが影響は小さい

例示

対象が「コード」の場合、具体的な実装方法例を示している場合があります。

また、対象が「プロダクト」の場合、具体的なチェックの実施方法を示している場合があります。

WCAGの達成基準のレベルとチェック内容の重篤度

WCAG 2.1では、各達成基準にA、AAまたはAAAのいずれかのレベルが割り当てられています。WCAG本文では、レベルAが最低レベルでレベルAAAが最高レベルという記述はありますが、各レベルの明確な定義はありません。一般的には、レベルAは最低限満たすべき基準、レベルAAはより多くの人が利用できるようにするための基準、レベルAAAはより多くの人が利用できるようにするための基準の中でも特に厳しい基準という位置づけになっています。

また、どのレベルの達成基準を満たしているかによって、そのWebコンテンツのWCAGへの適合レベルが判断されます。例えば、当ガイドラインではWCAG 2.1の適合レベルAA相当の状態の実現を目標としていますが、これはレベルAの達成基準とレベルAAの達成基準のすべてを満たしている状態です。

一方、等ガイドラインの各ガイドライン項目はWCAG 2.1の達成基準に基づいています。ガイドライン策定当初にはこれらの達成基準に割り振られているレベルを参考に、各ガイドライン項目には[MUST]または[SHOULD]の2段階の優先度を割り当てていました。しかし、この優先度については以下のような理由でVer. 202309.1で廃止しました。

• 1つのガイドライン項目に対して、重篤度が異なる複数のチェック内容が示されている場合があり、ガイドライン項目の優先度とチェック内容の重篤度の関係が分かりづらい。

• 例えば優先度が[MUST]のガイドライン項目に示されているチェック内容の重篤度が[MINOR]の場合など、ガイドライン項目の優先度とチェック内容の重篤度の関係が分かりづらい。

• 1つのガイドライン項目がWCAGのレベルが異なる複数の達成基準と関連付けられている場合があり、ガイドライン項目の優先度とWCAGの達成基準のレベルの関係が分かりづらい。

• freee社内の運用の実態を見ると、ガイドライン項目よりもより具体的な状況について示しているチェック内容が参照されることが圧倒的に多く、結果としてチェック内容の重篤度がガイドライン項目の優先度よりも参考にされることが多い。

優先度は廃止しましたが、WCAG 2.1のレベルAA相当を目標にするという方針には変わりはなく、各ガイドライン項目は基本的にWCAG 2.1のレベルAおよびレベルAAの達成基準に基づいています。

なお、freeeのプロダクトの性質などを考慮して、一部WCAGに示されているものとは異なるレベルとして扱った達成基準があります。具体的には当ガイドラインとWCAG 2.1の各達成基準のレベルに示しています。

関連文書

• Web Content Accessibility Guidelines (WCAG) 2.0

• Web Content Accessibility Guidelines (WCAG) 2.1

• Web Content Accessibility Guidelines (WCAG) 2.1 (WAICによる日本語訳)

この文書のステータス

この文書は、freee社内で進められる新規プロダクト開発、既存プロダクトの改善の際に用いるために策定されたものです。freee社外のWeb開発においても、参考にしていただける部分があるのではないかと考え、一般に公開しています。

この文書は、より理解しやすいものにすることを目指して、参考情報や例示の追加、表現の改善などを随時行います。

この文書の最新版は以下のURLで公開しています：

HTML版

https://a11y-guidelines.freee.co.jp/

GitHubリリース・ページ

https://github.com/freee/a11y-guidelines/releases/latest

この文書の改善のための提案は、GitHub上でお知らせください。

著作権と利用許諾条件

「freeeアクセシビリティー・ガイドライン」は、フリー株式会社が作成したもので、クリエイティブ・コモンズ 表示 4.0 国際 ライセンスで提供されています。

Copyright © 2020-2025, フリー株式会社

バージョン情報

この文書のバージョン：

Ver. 202510.0-RELEASE+7.0.0

ガイドライン・バージョン：

Ver. 202510.0-RELEASE

チェックシート・バージョン：

7.0.0

更新日:

2025年10月31日

freeeアクセシビリティー・ガイドラインの活用方法

ここでは、当ガイドラインの想定される活用方法を紹介します。

計画段階での活用

開発やアクセシビリティー改善の取り組みの計画段階では、対象となるコンテンツなどの性質を考慮して、まず当ガイドラインのどのカテゴリーが関係するかを検討すると良いでしょう。初めてアクセシビリティー改善に取り組む場合などは、これらのカテゴリーの各ガイドライン項目の本文と意図、リンクされている参考情報を確認することで、どのようなことをなぜ実施することになるのかということへの理解が進むと思います。

チェックリストの活用

以下で示すチェックの実施に当たってfreee社内では、チェック実施用Googleスプレッドシートで紹介しているような、チェック内容をGoogleスプレッドシートにまとめたものを活用しています。

このスプレッドシートは、チェックの対象に応じて複数のシートに分かれています。必要なシートを選んで、チェックの結果を記入していくだけのものですが、各チェック内容には関連するガイドライン項目や参考情報へのリンクも掲載していますので、改めてガイドライン項目を確認するような場合にも利用しやすくなっています。

チェックの結果について、freee社内ではOK/NG/該当無しから選ぶようにしています。チェック内容によっては、対象となるページや画面には関係のないものもありますので、そのような場合には「該当無し」を選ぶようにしています。

すべてのチェック結果がOKとなるのが理想ですが、影響の大きさや代替手段の提供状況などを考慮した結果として、NGを許容することもあり得ます。重要なことは、チェック結果が良いことではなくて、なるべく多くのユーザーにとって利用しやすいものを製作するということです。

設計段階での活用

計画段階で確認した当ガイドラインの内容を意識してプロダクトの設計を進めることで、基本的な考え方を考慮した設計を行えると思います。しかし、具体的な注意点などを網羅して設計を進めるのは、アクセシビリティーに関して経験が豊富な人でも容易なことではありません。そこで、ある程度設計資料[#}_の作成が進み、実装にはいる前の段階で、設計段階でアクセシビリティーに関する問題が混入していないことを確認すると良いでしょう。

具体的には、各ガイドライン項目でチェック内容として上げられているもののうち、対象が「デザイン」となっているものについて、設計資料をチェックします。この段階で見つかった問題をなるべく実装前に解決しておくことで、アクセシビリティーの確保が容易になります。

実装段階での活用

設計資料でアクセシビリティーについて十分に考慮されていれば、設計資料に従って実装を行うことで、アクセシビリティーに関する問題が発生する可能性は低くなります。これに加えて、対象が「コード」となっているチェック内容を確認することで、発生することが多い問題を回避することができます。

また、対象が「プロダクト」のチェック内容には実装物の期待される挙動が示されている場合もありますので、実装前に内容を確認しておくと良いでしょう。

品質保証（QA）段階での活用

品質保証（QA）の工程で、プロダクトの様々な機能のテストと合わせて、アクセシビリティーについても問題がないことを確認すると良いでしょう。対象が「プロダクト」のチェック内容が、この段階でのチェックを想定したものです。

この段階でのチェック結果にNGがある場合は、そのチェック内容の重篤度なども考慮して対応方針を検討すると良いでしょう。

この文書の編集について

この文書は、GitHub上の以下のリポジトリーで管理しています：

https://github.com/freee/a11y-guidelines

内容の修正、追加、誤字脱字の修正などは、上記リポジトリーのIssuesまたはPull Requestsでお知らせください。

Pull Requestを作製する場合は、まず上記リポジトリーをforkしてください。forkしたリポジトリーで作業用のブランチを作製し、必要な変更を加えた上で、上記リポジトリーのdevelopブランチに対してPull Requestを作成してください。

以下、この文書の編集に関する情報をまとめて記します。

作業環境の準備

必要環境

この文書のソースを処理してHTMLファイルを生成するためには、PythonとGNU Makeが動作する環境が必要です。

手元の開発環境では、Python 3.9.xとGNU Make 4.3で動作を確認しています。

開発環境の構築

まず、forkしたgitリポジトリーをcloneします。このリポジトリーでは、Deque Systems Inc.のaxe-coreのリポジトリーをサブモジュールとして含んでいますので、git clone実行時には、--recursiveオプションを指定してください：

git clone --recursive <リポジトリー・パス>

以後、必要に応じて以下のコマンドを実行してサブモジュールを更新してください：

git submodule update --init --recursive

次に、必要なPythonモジュールをインストールします：

pip install --upgrade -r requirements.txt

HTMLファイルの生成

HTMLファイルの生成のために必要な情報はMakefileに記述されており、GNU Makeが必要です。

リポジトリーのトップ・ディレクトリーで以下を実行してHTMLファイルを生成します：

make html

pythonコマンドをpython3などの別名で実行する必要がある環境では、以下のように実行します：

make PYTHON=python3 html

生成されたHTMLファイルは、ja/build/html以下に日本語版が、en/build/html以下に英語版が出力されます。

ソース・コード

この文書は、Sphinxで処理することを前提に作成しています。全体としてはreStructuredText（reST）で記述していますが、ガイドライン項目とチェック内容、FAQについてはYAMLで記述したファイルをreSTに変換して処理しています。

リポジトリーのルート・ディレクトリーには、以下のディレクトリーがあります。

ja

reSTで記述した日本語版のファイルが含まれています。

en

jaディレクトリー内のファイルを英訳したものが含まれています。なお、未訳のファイルについては、日本語のファイルがそのまま含まれています。

data

yaml

ガイドライン項目とチェック内容、FAQの内容や関連情報を記述したYAMLファイルが含まれています。

json

yamlディレクトリー内のファイルのスキーマ定義と、これらのファイルを処理するために必要なファイルが含まれています。

tools

yaml2x

yaml2rst

必要なreSTファイルを生成するためのスクリプトと関連ファイルが含まれています。元々はYAMLファイルを処理してreSTファイルを出力するためのスクリプトだったのでこのような名前になっていますが、現在はaxe-coreのソース・コードを処理して必要なreSTファイルを出力する機能も追加されています。

yaml2json

YAMLファイル群れを処理してJSONファイルに変換するためのスクリプトが含まれています。なおこのスクリプトは、HTMLファイルの生成に当たっては必要ありません。

a11y_guidelines

yaml2rstとyaml2jsonで共通に使用するモジュールが含まれています。

vendor

サブモジュールとして参照しているリポジトリーのソース・コードが含まれています。現時点では、axe-coreのソース・コードが含まれています。

yaml2rstの実行

tools/yaml2x/yaml2rst/yaml2rst.pyスクリプトを実行すると、必要なreSTファイルを生成することができます。いくつかのコマンド・ライン・オプションがありますが、手動で実行する場合は以下の2つのオプションが必要です。

--langまたは-lオプション

出力するreSTファイルの言語を指定します。日本語の場合はjaを、英語の場合はenを指定します。

--basedirまたは-bオプション

dataディレクトリーがあるディレクトリーを指定します。このディレクトリー内のYAMLファイルを処理してreSTファイルを出力します。

例えば、リポジトリーのルート・ディレクトリーで以下のように実行すると、日本語版のreSTファイルがja/source/incとja/source/faqの各ディレクトリーに出力されます。

python tools/yaml2x/yaml2rst/yaml2rst.py -l ja -b .

なお、ルート・ディレクトリーでmake htmlを実行すると、このスクリプトの実行も含めて、日本語版、英語版のHTMLを出力するために必要な処理が実行されます。

ファイルの編集

ガイドライン項目、チェック内容とFAQについては、data/yaml以下のYAMLファイルを編集します。これらの内容を含むページを中心に、多くのページはYAMLファイルから生成されたreSTファイルをincludeする構造になっています。

一方、source/explanationsディレクトリーにあるファイルを中心に、基本的にreSTで記述されているファイルもあります。これらのページの修正に当たっては、当該のreSTファイルを編集します。

表記ルール

この文書の日本語部分は、原則として日本翻訳連盟が公開しているJTF日本語標準スタイルガイド(翻訳用）に従って記述しています。リポジトリーのルート・ディレクトリーの.textlintrcに、現在使用しているtextlintのルールが含まれていますが、現時点では不完全な状態です。

英語版の位置づけ

この文書の正式版は日本語版です。英語版は、日本語版の内容を翻訳したものですが、日本語版の内容と異なる部分がある場合は、日本語版の内容が優先されます。

日本語版の更新に当たっては、なるべく同時に英語版を更新するようにしていますが、日本語版の更新が先行する場合もあります。

また、現時点で、未訳のページもあり、これらについては日本語版のソースがそのまま含まれている状態になっています。今後、順次英訳を進めていく予定です。

なお、英訳版が存在するページに関しては、日本語版のソース・コード中に以下のような記述をすることで、英訳版へのリンクが生成されるようになっています。

.. translated:: true

更新履歴

Ver. 202205.0以降、チェック内容に関連する更新情報はアクセシビリティー・チェック・リスト更新履歴のみに掲載しています。

Ver. 202510.0 (2025年10月31日)

• チェックID：0002からコントラストの日本語独自の基準を削除

• チェックID：0441の画像のチェックに「画像がない」場合も追加

• チェックID：1141の「データの変更や削除」について基準を明確化

• クリエイティブ・コモンズ・ライセンスのバナー画像のalt属性の値を修正

Ver. 202508.0 (2025年8月26日)

• アクセシビリティー・チェック・リストをV7.0.0に更新

• 参考情報更新：

  • 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

  • 拡大表示時のアクセシビリティー

  • テキストによる画像の説明

Ver. 202504.0 (2025年4月21日)

• FAQ追加：アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

• FAQ追加：スクリーン・リーダーによる長いテキストの読み上げが途中で止まる

• FAQ追加：Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

• axe DevToolsのルールと当ガイドラインの対応の変更

  • 2025年4月4日時点のaxe-coreのソースに基づいた内容に更新

  • Deque Universityの記事へのリンクについて、日本語版、英語版のページをそれぞれリンクするように変更

• アクセシビリティー・チェック・リストをV6.1.0に更新

Ver. 202411.0 (2024年11月22日)

• 自動的に変化するコンテンツの問題点の文言の見直し

• NVDAを用いたチェックの実施方法のNVDAチートシートを最新版に更新

• FAQの更新

  • 例を追加：スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある

  • 追加：「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか

Ver. 202409.0 (2024年9月26日)

• WCAG 2.1の達成基準2.5.1に対応するモバイル・アプリケーションを対象としたガイドライン項目と関連する解説を追加：

  • 入力ディバイス：モバイルOS標準のジェスチャーによる操作

  • モバイル・アプリケーションのアクセシビリティーに関する基本事項

• アクセシビリティー・チェック・リストをV5.1.0に更新

Ver. 202408.0 (2024年8月20日)

参考：freeeアクセシビリティー・ガイドラインVer. 202408.0を公開しました & アクセシビリティー関連の問い合わせもしやすい体制作りを始めました

• axe DevToolsのルールと当ガイドラインの対応を2024年5月16日時点のaxe-coreのソースに基づいた内容に更新

• この文書の編集についてを現状に合わせて更新

• アクセシビリティー・チェック・リストをV5.0.2に更新

Ver. 202405.0 (2024年5月14日)

• 参考情報更新：コントラスト比のチェック方法

• FAQ追加：スラッシュ（/）を含む数字はどのように読み上げられるべきか

• axe DevToolsのルールと当ガイドラインの対応を2024年4月29日時点のaxe-coreのソースに基づいた内容に更新

Ver. 202404.0 (2024年4月23日)

• 参考情報更新：グレースケール表示への切り替え方

• FAQ追加：

  • どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

  • hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

• その他細かな表記の修正

Ver. 202403.1 (2024年3月29日)

• 参考情報に加筆

  • クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

  • NVDAを用いたチェックの実施方法

• FAQ追加：テキスト・リンクのクリック可能な領域が小さい

• 当文書の編集方法に関する記述を現状に合わせて更新：この文書の編集について

Ver. 202403.0 (2024年3月4日)

• NVDAの推奨設定として、新たに「クリック可能」に関する設定を追加：NVDAを用いたチェックの実施方法→「事前準備」→「その他の初期設定」→「書式とドキュメント情報」

• 「マウスオーバー」に関する部分の文言の調整

• ガイドライン項目とチェック内容を中心に、英訳を追加：https://a11y-guidelines.freee.co.jp/en/index.html

• アクセシビリティー・チェック・リストをV4.3.7に更新

• 社名表記を「フリー株式会社」に統一

Ver. 202401.0 (2024年1月15日)

• 「ホバー」という表記を「マウスオーバー（ホバー）」または「マウスオーバー」に変更

• アクセシビリティー・チェック・リストをV4.3.4に更新

Ver. 202312.1 (2023年12月25日)

• アクセシビリティー・チェック実施に当たっての各種スクリーン・リーダーの位置づけについて改めて明記：スクリーン・リーダーを用いたチェックの実施方法

• グレースケール表示への切り替え方を更新

• FAQに関連する表示の調整

• FAQ記事追加

  • axe DevToolsの警告への対処

  • グレースケール表示にするブックマークレットで表示が崩れる

Ver. 202312.0 (2023年12月15日)

• アクセシビリティー・チェック・リストをV4.3.3に更新

• よくある質問と回答（FAQ）を追加

Ver. 202311.1 (2023年11月27日)

参考：freeeアクセシビリティー・ガイドラインVer. 202311.1を公開しました

• macOSのfnキーに関する設定について追記：macOSのVoiceOverを用いたチェックの実施方法

• アクセシビリティー・チェック・リストをV4.3.2に更新

• macOS VoiceOverを用いたチェック方法の例を追加し、これらをまとめたページを新設：macOS VoiceOverを用いたチェック実施方法の例

Ver. 202311.0 (2023年11月7日)

• 文言を見直し、「スクロール」を「自動スクロール」に変更：点滅、自動スクロールを伴うコンテンツ

• アクセシビリティー・チェック・リストをV4.3.1に更新

• macOS VoiceOverを用いたチェックに関する情報を追加：macOSのVoiceOverを用いたチェックの実施方法

• 誤字修正

Ver. 202310.0 (2023年10月3日)

• 参考情報の各ページの関連ガイドライン項目の項について、自動生成するように変更

Ver. 202309.1 (2023年9月26日)

• 各ガイドライン項目の優先度を廃止

• ガイドライン項目とチェック内容の表示を調整

• 優先度の廃止と表示の調整を反映する形で、全般的に文言を見直し

• 文字サイズ変更設定に関するガイドライン項目の見直し

  • テキスト：文字サイズの設定による200パーセントの拡大表示をテキスト：文字サイズ設定の変更に統合

  • テキスト：モバイルOSの文字サイズ設定の変更を見直し、対象プラットフォームがWebのテキスト：文字サイズ設定の変更と整合性がある形に変更

• 制限時間に関するガイドライン項目の見直し

  • ログイン・セッション：制限時間を設けないをログイン・セッション：ログイン・セッションにタイムアウトを設ける場合に統合し、同ガイドライン項目をログイン・セッションの有効期限に改名

  • フォーム：制限時間を設けないをフォーム：フォームの入力に制限時間を設ける場合に統合し、フォーム入力の制限時間に改名

• アクセシビリティー・チェック・リストをV4.3.0に更新

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

Ver. 202309.0 (2023年9月4日)

• axe DevToolsを使用したアクセシビリティー・チェックの記述を、axe DevToolsの最新版に合わせて更新

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

Ver. 202308.0 (2023年8月8日)

• フォーム・コントロールのキーボード操作に関するガイドラインを追加: キーボード操作を可能にする

• axe DevToolsを使用したアクセシビリティー・チェックに、推奨する初期設定について追記

• アクセシビリティー・チェック・リストをV4.2.0に更新

Ver. 202307.0 (2023年7月20日)

参考：freeeアクセシビリティー・ガイドラインVer. 202307.0を公開しました

• コントラスト比関連のガイドラインで、これまで[SHOULD]として記載していた基準を削除

  • テキスト：コントラスト比の確保

  • 画像化されたテキスト：画像内のテキストのコントラスト比

  • 画像：画像内のテキストのコントラスト比

• コントラスト比関連のガイドラインの文字サイズの記述について、ウェブアクセシビリティ基盤委員会が示しているものに修正

  • テキスト：コントラスト比の確保

  • 画像化されたテキスト：画像内のテキストのコントラスト比

  • 画像：画像内のテキストのコントラスト比

• コントラスト比関連のガイドラインで指定されている文字サイズについて、モバイルでは異なる基準を用いることとし、対象プラットフォームをモバイルにしたガイドラインを追加

  変更

  • テキスト：コントラスト比の確保

  • 画像化されたテキスト：画像内のテキストのコントラスト比

  • 画像：画像内のテキストのコントラスト比

  追加

  • テキスト：モバイルOSでのコントラスト比の確保

  • 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

  • 画像：モバイルOSでの画像内のテキストのコントラスト比

• NVDAを用いたチェックの実施方法の更新

  • NVDAの読み上げに関連するキー操作についての記述と、関連する解説動画を追加

  • Windowsの音声合成エンジンの管理に関する解説動画を追加

• NVDAを用いたチェック実施方法の例に掲載しているチェック方法の多くについて、具体的なチェック実施方法を紹介する動画を追加（アクセシビリティー・チェック全項目一覧や各ガイドラインの当該チェックIDの項からも参照可能）

• アクセシビリティー・チェック・リストをV4.1.0に更新

• 一部マークアップの修正

Ver. 202306.1 (2023年6月16日)

• アクセシビリティー・チェック・リストをV4.0.0に更新

• 一部マークアップの修正

Ver. 202306.0 (2023年6月8日)

• iOS VoiceOverを用いたチェックの実施方法を最新のHuman Interface Guidelinesに合わせて更新

Ver. 202305.0 (2023年5月23日)

• NVDAを用いたチェックの実施方法の更新

  • 多言語関連のチェックを実施する際に必要となる、Windowsの設定について追記

  • NVDAチートシートの画像を最新版に更新

  • 入力ヘルプ機能に関する動画を追加

• axe DevToolsのルールと当ガイドラインの対応の更新

  • メッセージの日本語、英語の表示順序を変更

  • axe-core最新版に基づいた内容に更新

Ver. 202304.1 (2023年4月21日)

• Material Design関連のリンクを更新：Android TalkBackを用いたチェックの実施方法

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

Ver. 202304.0 (2023年4月7日)

• NVDAを用いたチェックの実施方法の内容を補足する動画を追加

Ver. 202303.2 (2023年3月20日)

• アクセシビリティー・チェック・リストをV3.5.6に更新

Ver. 202303.1 (2023年3月10日)

• 外部情報へのリンクのうち、Material Design関連以外のものについて、掲載URLが変更されたものを更新

• HTMLファイルの生成に用いているSphinxの設定を見直し

Ver. 202303.0 (2023年3月6日)

• アクセシビリティー・チェック・リストをV3.5.5に更新

Ver. 202302.0 (2023年2月20日)

• アクセシビリティー・チェック・リストをV3.5.4に更新

• ソースの管理やビルド方法に関する情報を加筆：この文書の編集について

• カラーユニバーサルデザイン機構（CUDO）のサイト上のURLなどの変更に合わせてリンクを修正：色を用いた表現に関する注意点

Ver. 202301.0 (2023年1月27日)

• NVDAの初期設定に関する説明で、マウス追跡の推奨設定を追加：NVDAを用いたチェックの実施方法

Ver. 202210.0 (2022年10月11日)

• テキストの拡大に関連するガイドラインについて、意図が明確になるように文言を修正

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

  • 文字サイズ設定の変更

  • モバイルOSの文字サイズ設定の変更

  • 文字サイズの設定による200パーセントの拡大表示

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

• NVDAの初期設定に関する説明で、NVDA Version 2022.3jpにおけるNVDAメニューの構成変更を反映：NVDAを用いたチェックの実施方法

Ver. 202209.1 (2022年9月22日)

• NVDAの多言語処理に関する項目の推奨設定を変更：NVDAを用いたチェックの実施方法

• 各ガイドラインの「チェック内容」の項とアクセシビリティー・チェック全項目一覧の表示を変更

• 誤字修正

Ver. 202209.0 (2022年9月6日)

参考：freeeアクセシビリティー・ガイドラインVer. 202209.0を公開しました

• 各ガイドラインに「対象プラットフォーム」欄を追加

• ガイドラインの優先度の記述箇所を変更

• チェック内容の更新情報を分離してアクセシビリティー・チェック・リスト更新履歴として掲載するように変更

• テキスト：テキスト表示のカスタマイズの記述をWCAGが示す条件と一致するように変更し、関連する参考情報（ユーザーCSSを適用したチェックの実施方法）に掲載しているブックマークレットを修正

• モバイル・アプリケーションの観点からガイドラインとチェック内容を全体的に見直し

  • 意図の変更を伴わない文言変更：

    • マークアップと実装：文書構造を適切に示すマークアップ、実装を行う（タイトルのみ）

    • ページ全体：適切なセクション分けと見出しの付与

    • 入力ディバイス：適切なフォーカス順序

    • 入力ディバイス：ダウン・イベントをトリガーにしない

    • 入力ディバイス：特定の入力ディバイスを前提としない

    • アイコン：十分な大きさのクリック/タッチのターゲット

    • フォーム：十分な大きさのクリック/タッチのターゲット

    • 動的コンテンツ：ステータス・メッセージの適切な実装

  • 追加：

    • 入力ディバイス：モバイルの支援技術のサポート

    • テキスト：テキストを表示するUIコンポーネントの言語の明示

    • テキスト：モバイルOSの文字サイズ設定の変更

    • アイコン：十分な大きさのクリック/タッチのターゲット（モバイル）

    • フォーム：十分な大きさのクリック/タッチのターゲット（モバイル）

• NVDAの設定に関して加筆：NVDAを用いたチェックの実施方法

• キーボードのみによる操作に関して加筆：Tab / Shift+Tab キーを用いたチェック

Ver. 202205.0 (2022年5月10日)

• 誤字修正

Ver. 202203.0 (2022年3月29日)

• 動的コンテンツ：[MUST]適切なDOMツリーを維持するの見直し

  • モバイル・アプリケーションへの適用を前提に、タイトルを「支援技術への適切な情報提供の維持」に変更し、文言を見直し

  • WCAG 2.1の達成基準1.3.2に加えて、達成基準1.3.1との関連付けも追加

• モーダル・ダイアログに関連するチェック内容の見直し

  • チェックID：1291、チェックID：1311からモーダル・ダイアログに関する記述を削除

  • 新たにチェックID：1292、チェックID：1312、チェックID：1313を追加

• チェック内容の文言見直し

  • チェックID：0811に例外があることを明示。

  • チェックID：0081の意図が明確になるように文言修正

• チェック内容の確認方法の例の見直し

  • チェックID：0413のiOS VoiceOverとAndroid TalkBackによる確認方法の文言修正と、NVDAによる確認方法の追加

  • チェックID：0621に、axe-DevToolsによる確認方法を追加

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

Ver. 202202.0 (2022年2月18日)

参考：freeeアクセシビリティー・ガイドラインVer. 202202.0を公開しました

• 「マークアップ全般」カテゴリーを「マークアップと実装」に改名し、全体的に見直し

  • [MUST]文書構造を適切にマークアップするについて、スタティックなコンテンツを対象としていることが明確になるように文言を変更

  • [MUST]対話的なUIコンポーネントの実装とチェックID：0553を追加

  • [MUST]コンポーネントをアクセシブルにするの文言を変更

  • 関連して参考情報に加筆：UIコンポーネントのアクセシビリティー

• ガイドラインおよびチェック内容のYAMLのスキーマ定義を、JSON Schemaで記述して追加

Ver. 202201.1 (2022年1月20日)

• ARIAランドマークに関するMDNの開設記事へのリンクを追加：適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• axe DevToolsを使ったARIAランドマークに関するチェックの実施方法を追加：チェックID：0682

Ver. 202201.0 (2022年1月11日)

参考：freeeアクセシビリティー・ガイドラインVer. 202201.0を公開しました

• クリック/タッチのターゲット・サイズ関連の変更

  • テキスト中のリンクは対象外であることが明確になるように文言を変更：アイコン：[SHOULD]十分な大きさのクリック/タッチのターゲット

  • ブラウザーのデフォルトから見た目を変更していないフォーム・コントロールは対象外であることが明確になるように文言を変更：フォーム：[SHOULD]十分な大きさのクリック/タッチのターゲット、クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

  • チェック内容を、アイコンに対するものとフォーム・コントロールに対するものに分離：

    • 修正：チェックID：0331、チェックID：0351

    • 追加：チェックID：0332、チェックID：0352

  • 対象がデザインのチェック内容に、ターゲット領域が明示されている必要があることを明記：チェックID：0331、チェックID：0332

• ARIAランドマーク関連の変更

  • ARIAランドマークに関する確認方法を参考情報に追加：適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

  • ARIAランドマークに関するチェックを追加：チェックID：0682

• 対象がデザインのチェック内容について、全般的に文言を見直し

• Googleスプレッドシートにまとめて公開しているアクセシビリティー・チェック・リストのバージョン番号に関する説明を追加：アクセシビリティー・チェック・リストのバージョン番号について

Ver. 202112.0 (2021年12月3日)

• Androidでグレースケール表示をする方法を追加：グレースケール表示への切り替え方

• Androidで拡大表示をする方法を追加：拡大表示時のアクセシビリティー

• 誤字修正

• YAMLファイルの処理の改善

Ver. 202111.0 (2021年11月19日)

• 画像化されたテキスト中のガイドライン、「隣接領域とのコントラスト比の確保」を削除

• Android TalkBackに関する情報を追加：Android TalkBackを用いたチェックの実施方法

• これらの変更を反映する形でチェック内容を更新

• ガイドラインの各カテゴリー・ページにページ内目次を追加

Ver. 202110.2 (2021年10月18日)

• この文書の編集についてを追加

Ver. 202110.1 (2021年10月11日)

• チェックリストに関する記述を現状に合わせて修正：チェック実施用Googleスプレッドシート

• チェックリストの変更履歴を追加：アクセシビリティー・チェック・リスト更新履歴

• 誤字修正

Ver. 202110.0 (2021年10月8日)

参考：freeeアクセシビリティー・ガイドラインVer. 202110.0を公開しました

• ガイドラインおよびチェック内容について、YAMLで記述して管理するように変更

• チェック内容について、モバイル・アプリケーションについても適用できるように追加、修正

• iOSに関する情報を追加

  • iOS VoiceOverに関する情報：iOS VoiceOverを用いたチェックの実施方法

  • 拡大表示の方法：拡大表示時のアクセシビリティー

  • グレイスケール表示の方法：グレースケール表示への切り替え方

• 各ガイドラインの構成を見直し（ガイドラインの内容には変更無し）

• 各チェック内容の構成の見直し

  • 重篤度の追加

  • 対象プラットフォームの追加

• ガイドラインおよびチェック内容の構成の見直しを反映する形で、当ガイドラインに関する説明を更新：freeeアクセシビリティー・ガイドラインについて

• 当ガイドラインの活用方法に関する説明を追加：freeeアクセシビリティー・ガイドラインの活用方法

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

Ver. 202107.0 (2021年7月12日)

参考：freeeアクセシビリティー・ガイドラインVer. 202107.0を公開しました

• ガイドラインの文言変更

  • 入力ディバイス：[MUST]キーボード・トラップの回避

  • ページ全体：[MUST]画面方向を固定しない

• チェック内容の文言変更：チェックID：0201

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

• フリー株式会社のコーポレート・アイデンティティーの変更に対応

  • ページ内のロゴを新しいものに変更

  • OGP用の画像を差し替え

  • 社内デザイン・システムVibesのコントラスト比の表のURLを差し替え

Ver. 202106.0 (2021年6月1日)

• コントラスト比のチェック方法について加筆：コントラスト比のチェック方法

• NVDAチートシートの更新に合わせて、掲載している画像などを変更：スクリーン・リーダーを用いたチェックの実施方法

• axe DevToolsのルールと当ガイドラインの対応を最新のaxe-coreのソースに基づいた内容に更新

Ver. 202105.0 (2021年5月6日)

参考：freeeアクセシビリティー・ガイドラインVer. 202105.0を公開しました

• 表示中のWebページをグレースケール表示にするブックマークレットを追加：グレースケール表示への切り替え方

• 誤字修正

Ver. 202104.0 (2021年4月1日)

参考：freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました

• axeがaxe DevToolsに改名されたことなどに対応して、表記や画面キャプチャーを更新

• axe DevToolsのルールと当ガイドラインの対応情報を追加：axe DevToolsのルールと当ガイドラインの対応

• チェック内容をまとめたGoogleスプレッドシートに関する情報を追加：チェック実施用Googleスプレッドシート

• コントラスト関連のチェックについて、テキスト情報とそれ以外のものを分離

• コントラスト関連のガイドライン、参考情報、チェック内容の箇所に、社内デザイン・システムVibesのカラー・コントラスト表へのリンクを追加

Ver. 202103.0 (2021年3月1日)

• [MUST]文書構造を適切にマークアップするに関連するチェック内容とそのチェック実施方法例を追加

  • チェックID：0561

  • チェックID：0562

• 上記、チェックID: 0561と内容が重複するチェックID: 0741を削除

• 意図の変更を伴わないチェック内容の文言変更：チェックID：0441

Ver. 202102.0 (2021年2月2日)

参考：freeeアクセシビリティー・ガイドラインVer. 202102.0を公開しました

注意：分割されて一部優先度が変更されたガイドラインがあります。

• ホバーで表示されるコンテンツに関するガイドラインの見直し

  • 変更前：[SHOULD]ホバーで表示されるコンテンツ

    [SHOULD]ホバーで表示されるコンテンツについて、以下のすべてを満たす。

    • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（Escキーで消える、など）

    • ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。

    • ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。

  • 変更後：以下の2ガイドラインに分割

    • [MUST]ホバーで表示されるコンテンツの拡大

      [MUST]ホバーで表示されるコンテンツについて、ポインターをホバーで表示されたコンテンツ上に移動しても、コンテンツが消えないようにすることで、そのコンテンツを拡大表示して利用することを可能にする。

    • [SHOULD]ホバーで表示されるコンテンツの非表示

      [SHOULD]ホバーで表示されるコンテンツについて、以下のすべてを満たす。

      • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（Escキーで消える、など）

      • ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。

• ホバーで表示されるコンテンツに関するガイドラインの変更に伴うチェック内容の変更

  • 変更：チェックID：0091、チェックID：0111

  • 追加：チェックID：0092、チェックID：0112

• 意図の変更を伴わないチェック内容の文言変更

  • チェックID：0322

  • チェックID：1171

  • チェックID：1291

  • チェックID：1311

• 誤字修正

Ver. 202101.1 (2021年1月20日)

• 参考情報更新

  • ユーザーCSSを適用したチェックの実施方法に掲載しているCSSおよびブックマークレットの修正

• 誤字修正

Ver. 202101.0 (2021年1月5日)

参考：freeeアクセシビリティー・ガイドラインVer. 202101.0を公開しました

• 参考情報更新

  • Tab / Shift+Tab キーを用いたチェックに、キーボードのみを用いた操作が可能であることを確認する方法として、マウス・ポインターを非表示にする方法を追加

• 誤字修正

Ver. 202011.0 (2020年11月27日)

参考：freeeアクセシビリティー・ガイドラインVer. 202011.0を公開しました

注意：新たに追加されたガイドラインと、優先度が変更されたガイドラインがあります。

• WCAG 2.1の各達成基準と当ガイドラインの対応表を追加：当ガイドラインの優先度とWCAG 2.1の適合レベル

• WCAG 2.1の各達成基準の適合レベルと、当ガイドラインの優先度の関係に関する情報を追加：当ガイドラインとWCAG 2.1の各達成基準のレベル

• 画像化されたテキストに関するガイドラインの見直し：[SHOULD]画像化されたテキストを使用しない

  • 変更前：画像化されたテキストを用いていない、または用いられている画像化されたテキストがコントラスト比と代替情報に関するガイドラインを満たしている場合に[MUST]の条件を満たす

  • 変更後：画像化されたテキストが用いられていない場合は[SHOULD]の条件を満たし、用いられている画像化されたテキストがコントラスト比と代替情報に関するガイドラインを満たしている場合は[MUST]の条件を満たす

• テキストの代替の音声・映像コンテンツの音声解説に関するガイドラインを追加：[SHOULD]音声解説の提供

  • 対応するチェック内容を追加：チェックID：1562

• 入力ディバイス：[MUST]ショートカット・キーを提供する場合の優先度を[SHOULD]から[MUST]に変更

• ARIAランドマークに関する用語の見直しと統一（内容に変更無し）

• 一部チェック内容について、文言の見直し（内容に変更無し）

• 誤字修正

Ver. 202010.0 (2020年10月27日)

参考：freeeアクセシビリティー・ガイドラインVer. 202010.0を公開しました

注意：以下のチェック実施方法の例の追加に伴い、チェック内容の全項目一覧のURLが変更されています：

旧：https://a11y-guidelines.freee.co.jp/checks/index.html

新：https://a11y-guidelines.freee.co.jp/checks/checklist.html

• チェック内容の追加

  • チェックID：0621

• いくつかのチェック内容について、チェックの実施方法を例として追加

  • NVDAを用いたチェック実施方法の例

  • axe DevToolsを用いたチェック実施方法の例

• 参考情報の追加

  • axe DevToolsを使用したアクセシビリティー・チェック

  • リンク先の内容を推測しやすくする

• 参考情報の更新

  • ARIAライブ・リージョンの実装例と実装時の注意点を追加：ステータス・メッセージとスクリーン・リーダー

  • lang属性に関する具体的な説明を追加：lang 属性と音声読み上げ

  • ナビゲーションの一貫性について加筆：使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

• 誤字修正

Ver. 202009.0 (2020年9月29日)

参考：freeeアクセシビリティー・ガイドラインVer. 202009.0を公開しました

• テキストの拡大表示に関連するガイドライン、チェック内容、参考情報を更新

  • 意図をより明確にするために、「200パーセントの拡大表示」を3ガイドラインに分割

    変更前

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

    変更後

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

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

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

  • 意図を明確にするために[SHOULD]400パーセントの拡大表示の文言を変更

  • 関連するチェック内容の変更と追加

    • 変更：チェックID：0321、チェックID：0322

    • 追加：チェックID：0311、チェックID：0323、チェックID：0324

  • 関連する参考情報の更新：拡大表示時のアクセシビリティー

• その他参考情報の更新

  • 色を用いた表現に関する注意点にカラー・ユニバーサル・デザインに関する記述を追加

  • スクリーン・リーダーを用いたチェックの実施方法にNVDAのスピーチビューアーに関する説明を追加

• 誤字修正

Ver. 202008.0 (2020年8月21日)

参考：freeeアクセシビリティー・ガイドラインVer. 202008.0を公開しました

• チェック内容の見直し

  • チェック対象を「デザイン」、「コード」、「プロダクト」に変更

  • 全ガイドラインに対するチェック内容の見直しと整理

  • すべてのチェック内容をまとめた章を追加：アクセシビリティー・チェック全項目一覧

• 参考情報更新

  • クリック/タッチ・ターゲットのサイズの確認方法についての記述を追加：クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

• 誤字修正

Ver. 202007.0 (2020年7月10日)

参考：freeeアクセシビリティー・ガイドラインVer. 202007.0を公開しました

• 参考情報追加：スクリーン・リーダーを用いたチェックの実施方法

• 参考情報更新

  • 様々なユーザーの入力手段の特徴とそのサポート：[MUST]ダウン・イベントをトリガーにしないに関する説明で、クリック・イベントについての記述を追加

• 動的コンテンツの[MUST]点滅、スクロールを伴うコンテンツから「動きを伴うコンテンツ」の記述を削除し、音声・映像コンテンツにアニメーションや動画を対象とした新ガイドラインを追加：[MUST]動きを伴うコンテンツ

• リンクのターゲット・サイズに関するガイドラインについて、テキスト・リンクについてはWCAGで例外とされているので、アイコンの場合の基準のみ記し、アイコンのカテゴリーに移動：[SHOULD]十分な大きさのクリック/タッチのターゲット

• フォームのターゲット・サイズに関するガイドラインについて、アイコンと同じ基準を明記：[SHOULD]十分な大きさのクリック/タッチのターゲット

• 入力ディバイスのガイドライン2項目をマージ：[MUST]特定の入力ディバイスを前提としない

  マージ対象ガイドライン：

  [MUST]入力ディバイスのサポート

  OSがサポートしている入力ディバイスの使用を妨げない。

  [MUST]ユーザーの動きだけをトリガーにしない

  加速度センサー、モーション・キャプチャーなどを活用した、ユーザーの動きをトリガーにする機能は、他のインターフェースによっても実行できるようにする。

• ガイドラインの文言を一部変更（下表参照）

Ver. 202007.0でのガイドライン文言変更箇所

該当箇所	変更前	変更後	補足
ページ全体：[SHOULD]適切なセクション分けと見出しの付与	h?要素を使って適切に見出しを付ける。	コンテンツを適切にセクション分けし、h?要素を使って見出しを付ける。	意図が明確になるように同ガイドラインの見出しも変更しています。
入力ディバイス：[MUST]ダウン・イベントをトリガーにしない	操作の実行、完了のトリガーにはダウン・イベントを使わず、アップ・イベントを使う。	クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベントを使わず、アップ・イベントやクリック・イベントを使い、誤った操作を中断できるようにする。	意図の項にも追記して、ドラッグ&ドロップがこのガイドラインに抵触しないことを明示しています。
テキスト：[MUST]適切な文言の見出し	主題又は目的を説明する見出しおよびラベルを付ける。	主題又は目的を説明する見出しを付ける。	「ラベル」はフォーム・コントロールと画像の説明を意図したものでしたが、これらはそれぞれ別カテゴリーでカバーされているため削除しました。併せて見出しも変更しています。
テキスト：[MUST]複数の視覚的要素を用いた表現	文字色に何らかの意味を持たせている場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。	強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。	ガイドラインの意図を考慮して、掲載セクションを変更しています。
音声・映像コンテンツ：[MUST]書き起こしテキストの提供	テキストの代替情報ではない音声・映像コンテンツにおいて、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。	テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。
動的コンテンツ：[MUST]点滅、スクロールを伴うコンテンツ	自動的に開始し5秒以上継続する、点滅、スクロールまたは動きを伴うコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるようにする。	同じページ上に、自動的に開始し5秒以上継続する、点滅やスクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。
動的コンテンツ：[MUST]自動更新されるコンテンツ	自動的に内容が更新されるコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。	予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。
フォーム：[SHOULD]誤操作の防止	誤った操作が確定することでユーザーに不利益が生じる可能性がある機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。	法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。

Ver. 202006.0 (2020年6月18日)

参考：freeeアクセシビリティー・ガイドラインVer. 202006.0を公開しました

• ガイドライン部分の文書構造を見直し

• 入力ディバイスに関するガイドラインの構成を一部変更（内容に変更無し）

• コントラスト関連のガイドラインで、文字サイズの表記をpxとptを併記するように変更

• 動的コンテンツに関するガイドラインにガイドラインを1項目追加：[MUST]支援技術への適切な情報提供の維持

• その他内容の変更を伴わないガイドライン文言の変更

• 「チェック内容」と「チェック対象」を対にして表記するように変更

• チェック内容の追加と文言変更

• 「意図」について、一部内容の変更を伴わない文言変更と追記

Ver. 202005.1 (2020年5月26日)

• 日本翻訳連盟が公開しているJTF日本語標準スタイルガイド(翻訳用）に基づき表記揺れなど修正

• 誤字修正

Ver. 202005.0 (2020年5月21日、Global Accessibility Awareness Day)

参考：freeeアクセシビリティー・ガイドラインVer. 202005.0を公開しました

• 一部文言を修正

• 色に関するガイドラインについて、色弱者に加えて視覚障害者のアクセスに影響することを「意図」に明記

• 参考情報の追加:

  • 自動的に変化するコンテンツの問題点

  • フォーム・コントロールのラベル付けの必要性

  • 色を用いた表現に関する注意点

  • フォーム操作で発生する動的な変化が及ぼす影響

  • 入力エラーの扱い

  • クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

  • 画像化されたテキストの問題点

  • 画像化されたテキストを使用する場合の代替情報の提供

  • コントラスト比確保の重要性

  • ユーザーCSSを適用したチェックの実施方法

  • キーボード・トラップが引き起こす問題

  • 様々なユーザーの入力手段の特徴とそのサポート

  • 音声・映像コンテンツの存在を認知可能にする

  • 音声の自動再生とアクセシビリティー

  • 音声・映像コンテンツのアクセシビリティーを確保する

  • Tab / Shift+Tab キーを用いたチェック

• 参考情報の更新:

  • UIコンポーネントのアクセシビリティー: AccessibleNameとroleについて加筆

• 誤字修正

• CSSなど修正

Ver. 202004.0 (2020年4月30日)

参考：freeeアクセシビリティー・ガイドラインを一般公開しました

• 初版公開

ガイドライン

マークアップと実装

これらのガイドライン項目は、マークアップと実装全般に関するもので、すべてのコンテンツが対象です。

文書構造を適切に示すマークアップ、実装を行う

静的なテキスト・コンテンツは、文書構造などのセマンティクスを適切に表現するHTMLの要素やコンポーネントで実装する。

対象プラットフォーム

Web、モバイル

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

• 適切なマークアップにより、スクリーン・リーダーで見出しや箇条書きの項目を探しやすくなる。

• スクリーン・リーダーなどの支援技術には、見出しやリンクの一覧表示機能など、適切なマークアップを前提に実装されている機能がある。

対応するWCAG 2.1の達成基準

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

参考情報

• セマンティクスを適切にマークアップする重要性

関連FAQ

• 見出しレベルの指定

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

チェック内容

チェックID：0541

見出しとして表現されるべきものが、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：0542

箇条書き、表などとして表現されるべきものが、使用するべきHTMLの要素やデザイン・システムのコンポーネントと共に、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0543

見出しには適切な見出しレベルが指定されている：

• 文書の階層構造を反映した見出しレベルが指定されている

• ページ全体では、見出しレベルは1から始まっている

• 見出しレベルは、1の下位は2、2の下位は3のように1ずつ増加していて、抜けがない状態になっている

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0551

見出しが、設計資料に従って適切に実装されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

実装方法の例：見出しの実装

Web

h1～h6でマークアップする。

iOS

UIAccessibilityTraits.headerをセットする。

Android

当該テキストに対してandroid:accessiblityHeadingをtrueに設定する（Android 9以降）

チェックID：0552

箇条書き、表などのセマンティクスが、設計資料に従って適切に実装されている。

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

実装方法の例：セマンティクスに応じた実装

Web

• 箇条書き（ul、ol、dl）、表（table）などを使用する

• デザイン・システムの適切なコンポーネントを使用する

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0561-axe-01を満たしている、かつ(0561-content-00または0561-nvda-01または0561-macvo-01を満たしている)ことを確認する。

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

axe DevToolsで以下のいずれの問題も出ない。

• 見出しは空にしてはなりません (Headings should not be empty)

• 見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

• ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

0561-content-00：その他の手段によるチェック方法の例

チェック対象は、モーダル・ダイアログで、設計資料で見出しが示されていない。

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

NVDAで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. ブラウズ・モードで要素リストを表示（NVDA+F7）

2. 「種別」を「見出し」に設定（Alt+H）

参考動画：見出し【NVDAでアクセシビリティー チェック】

0561-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. VO+Uを押下してローターのメニューを表示

2. 「見出し」を選択

チェックID：0562

スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0562-content-00または0562-nvda-01を満たしていることを確認する。

0562-content-00：その他の手段によるチェック方法の例

チェック対象の画面に表が存在しない。

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

以下の手順で、ページ上のすべての表をNVDAで発見することができ、かつ、表中のセル間を移動して、セルの内容を適切に読み上げることができる。

• 表の発見：

  1. ブラウズ・モードでページの先頭に移動（Ctrl+Home）

  2. 前後の表への移動（TまたはShift+Tキー）で、表に移動

• 表中のセル間を移動して、セルの内容を読み上げる：

  1. ブラウズ・モードで表の先頭部分を探す

  2. 以下のキー操作でセル間を移動：

     • Ctrl+Alt+←：左のセル

     • Ctrl+Alt+→：右のセル

     • Ctrl+Alt+↓：下のセル

     • Ctrl+Alt+↑：上のセル

セル移動時に読み上げられる内容：

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

• 左右の移動：移動先のセルの列見出し、列の番号、セルの内容

• 上下の移動：移動先のセルの行見出し、行の番号、セルの内容

ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。

• 上下矢印：前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。

• 左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

参考動画：表【NVDAでアクセシビリティー チェック】

文法的に正しいマークアップ

文法的に正しい、仕様に準拠したマークアップを行う。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術が、Webページを正確に解析できるようにする。

HTML要素の開始タグと終了タグが適切に記述されていること、適切な入れ子構造になっていることで、様々なユーザー・エージェントや支援技術が期待した動作をする。

対応するWCAG 2.1の達成基準

• 達成基準4.1.1(レベルA)：

  • Parsing

  • 構文解析

参考情報

• The Nu Html Checkerを用いたHTMLのバリデーション

チェック内容

チェックID：0571

validatorやlinterでチェックが通る。

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

対話的なUIコンポーネントの実装

リンクやボタン、フォーム・コントロールなど、ユーザーの操作を受け付けるUIコンポーネントは、なるべくHTMLの適切な要素、または使用している開発フレームワークの標準的なコンポーネントを用いて実装する。

対象プラットフォーム

Web、モバイル

意図

• スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

• 支援技術のユーザーが適切に操作することができるようにする。

• キーボードによる操作を可能にする。

対応するWCAG 2.1の達成基準

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

参考情報

• UIコンポーネントのアクセシビリティー

チェック内容

チェックID：0553

ボタンはbutton要素で、リンクはhref属性があるa要素で、エディット・ボックス、チェックボックス、ラジオボタンなど、各種フォーム・コントロールはHTMLの適切な要素で実装されている

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0554

UIコンポーネントは、OSや開発フレームワークの標準コンポーネントを用いて実装されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

コンポーネントをアクセシブルにする

ユーザーの操作を受け付けるUIコンポーネントは、以下を満たす実装をする。

• 支援技術を含むユーザー・エージェントが取得できる形で、適切にAccessibleNameとroleを定義する。

• 支援技術を含むユーザー・エージェントが、コンポーネントの状態、プロパティー、ユーザーが設定可能な値を設定でき、これらの変更を認知できるようにする。

対象プラットフォーム

Web、モバイル

意図

支援技術が、例えばJavaScriptで実装されているような独自のコンポーネントを問題なく扱えるようにする。

• 例えば開閉できるメニュー、タブなど、標準的なHTMLだけでは実装できないようなコンポーネントについて、スクリーン・リーダーがそれはどのようなコンポーネントで、どのような状態にあのかを正確にユーザーに伝え、かつユーザーの操作を可能にする。

• ユーザーの操作によってコンポーネントの状態が変化する場合は、その変化が認知できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準4.1.2(レベルA)：

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

参考情報

• UIコンポーネントのアクセシビリティー

チェック内容

チェックID：0581

独自実装が必要なUIコンポーネントのアクセシビリティー確保に必要な情報が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェック手順：Web

以下の0581-content-00または0581-content-01を満たしていることを確認する。

0581-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、独自実装が必要なUIコンポーネントが存在しない。

0581-content-01：その他の手段によるチェック方法の例

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

実装方法の例：スクリーン・リーダーに役割を伝える

Web

role属性を適切に指定する。

iOS

• 適切なaccessibilityTraitsを指定する。

Android

• jetpack composeを使用している場合：role属性を適切に指定する

• jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

チェックID：0587

複数の状態を持つコンポーネントは、その状態が視覚的にもスクリーン・リーダーでも分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：0591

静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェック手順：Web

以下の0591-content-00または0591-nvda-01を満たしていることを確認する。

0591-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、静的なテキストしか存在しない。

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

以下のすべてを満たしていることをNVDAで確認：

• ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる

• その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる

• 操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる

• 操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる

参考動画：開閉するボタン【NVDAでアクセシビリティー チェック】

チェックID：0592

複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

ページ全体

これらのガイドライン項目は、ページ全体に関するもので、すべてのページが対象です。

タイトルの指定

title要素に、ページの主題又は目的を説明したタイトルを記述する。

対象プラットフォーム

Web

意図

ページ全体を一望することができない視覚障害者が、目的のページにアクセスしているかどうか判断できるようにする。

• 多くのスクリーン・リーダーにはタイトルバーの内容を簡単に確認できる機能がある。

• 多くのスクリーン・リーダーでは、複数のウィンドウを切り替える操作をする際タイトルバーの内容が読み上げられる。

対応するWCAG 2.1の達成基準

• 達成基準2.4.2(レベルA)：

  • Page Titled

  • ページタイトル

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0631

そのページ/画面の適切なタイトルが設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0631-content-00または0631-content-01を満たしていることを確認する。

0631-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0631-content-01：その他の手段によるチェック方法の例

そのページ/画面のタイトルは、ページ/画面の目的を示し、かつ他のページ/画面とは異なるものになっている。

チェックID：0651

ページ/画面には、適切なタイトルが付けられている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0651-content-00を満たしている、または(0651-axe-01と0651-content-01を満たしている)ことを確認する。

0651-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

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

axe DevToolsで「ドキュメントにはナビゲーションを補助するために<title>要素がなければなりません (Documents must have <title> element to aid in navigation)」という問題が出ない。

0651-content-01：その他の手段によるチェック方法の例

ブラウザーのタイトルバーまたはタブバーに表示されているそのページ/画面のタイトルは、ページ/画面の目的を示し、かつ他のページ/画面とは異なるものになっている。

ページを構成する領域の明示

ページを構成する領域を示すマークアップをする。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術が、ページの構成を適切にユーザーに提示できるようにする。

• 多くのスクリーン・リーダーには、ARIAランドマークで示される領域間を移動する機能がある。

• スクリーン・リーダーのユーザーは、ページ内の目的の部分に容易に移動できる。

対応するWCAG 2.1の達成基準

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0661

ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0671

• header, main, nav, footerの各要素が適切に用いられている。または

• これらがrole属性で明示されている。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0682-axe-01を満たしている、かつ(0682-content-00または0682-misc-01を満たしている)ことを確認する。

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

画面上に表示されているコンテンツに対して、axe DevToolsで以下のいずれの問題も発生しない。（非表示箇所に対して以下の問題が発生しても、通常は問題ない。）

• bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)

• asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)

• contentinfoランドマークは他のランドマークに含まれるべきではありません (Contentinfo landmark should not be contained in another landmark)

• mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)

• ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)

• ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

• ランドマークには一意のロール又はロール／ラベル／タイトル (すなわちアクセシブルな名前) の組み合わせがなければなりません (Landmarks should have a unique role or role/label/title (i.e. accessible name) combination)

• ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)

0682-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0682-misc-01：Landmark Navigation via Keyboard or Pop-upによるチェック方法の例

Landmark Navigation via Keyboard or Pop-upをインストールしたブラウザーで表示した際、コンテンツのすべてのパーツが適切なARIAランドマークの領域に属している。

本文の開始位置の明示

本文が始まる位置を示すマークアップをする。

対象プラットフォーム

Web

意図

視覚障害者が、容易に本文の先頭を見つけられるようにする。

• 多くのスクリーン・リーダーには、ARIAランドマークで示される領域間を移動する機能、見出し間を移動する機能がある。

• スクリーン・リーダーのユーザーは、領域間を移動する機能でmain要素の先頭に移動したり、見出し間を移動する機能で本文の直前に移動したりして、迅速に本文を読み始めることができる。

対応するWCAG 2.1の達成基準

• 達成基準2.4.1(レベルA)：

  • Bypass Blocks

  • ブロックスキップ

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0672

• main要素が本文の開始位置を反映している。または

• 本文の先頭部分にh1要素やh2要素でマークアップされた見出しがある。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0681

スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0681-axe-01を満たしている、かつ(0681-nvda-01または0681-nvda-02または0681-macosvo-01または0681-macosvo-02を満たしている)ことを確認する。

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

axe DevToolsで以下のいずれの問題も出ない。

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

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

NVDAのブラウズ・モードで、次/前の見出しへの移動（H / Shift+Hキー）を用いて、本文直前の見出しに移動できる。

参考動画：本文の開始位置【NVDAでアクセシビリティー チェック】

0681-nvda-02：NVDAによるチェック方法の例

NVDAのブラウズ・モードで、次のランドマークへの移動（Dキー）でmain要素の先頭部分に移動でき、その直後から本文が始まっている。

0681-macosvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverの次/前の見出しへの移動（VO+Command+H / VO+Command+Shift+Hキー）を用いて、本文直前の見出しに移動できる。

0681-macosvo-02：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の以下の操作を行ってmain要素の先頭部分に移動でき、その直後から本文が始まっている。

1. VO+Uキーを押下してローターのメニューを表示

2. 「ランドマーク」を選択

3. 「本文」を選んでEnterキーを押下

適切な記述順序

最初から順に読み進めた場合に、コンテンツの意味が正しく伝わるような順序でHTMLの各要素を記述する。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術のユーザーが、コンテンツを正しく理解できるようにする。

• 画面上で近接して表示されているコンテンツは、HTMLソース中ても同様に近接して記述することで、スクリーン・リーダーのユーザーにも見つけやすく、認知しやすくなる。

• CSSでレイアウトを制御しているような場合に注意が必要。

対応するWCAG 2.1の達成基準

• 達成基準1.3.2(レベルA)：

  • Meaningful Sequence

  • 意味のある順序

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0711-nvda-01または0711-macvo-01を満たしていることを確認する。

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

NVDAが起動している状態の操作で、以下を満たしている：

• ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

0711-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverが起動している状態の操作で、以下を満たしている：

• VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

適切なセクション分けと見出しの付与

コンテンツを適切にセクション分けし、スクリーン・リーダーが認識できる形で見出しを付ける。

対象プラットフォーム

Web、モバイル

意図

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

• 多くのスクリーン・リーダーは、見出し間で移動する機能、見出しのリストを表示する機能がある。

• 適切な見出しが付けられていれば、見出しを追うことで斜め読みのような読み方ができる。

対応するWCAG 2.1の達成基準

• 達成基準2.4.10(レベルAAA)：

  • Section Headings

  • セクション見出し

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0541

見出しとして表現されるべきものが、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：0543

見出しには適切な見出しレベルが指定されている：

• 文書の階層構造を反映した見出しレベルが指定されている

• ページ全体では、見出しレベルは1から始まっている

• 見出しレベルは、1の下位は2、2の下位は3のように1ずつ増加していて、抜けがない状態になっている

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0551

見出しが、設計資料に従って適切に実装されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

実装方法の例：見出しの実装

Web

h1～h6でマークアップする。

iOS

UIAccessibilityTraits.headerをセットする。

Android

当該テキストに対してandroid:accessiblityHeadingをtrueに設定する（Android 9以降）

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0561-axe-01を満たしている、かつ(0561-content-00または0561-nvda-01または0561-macvo-01を満たしている)ことを確認する。

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

axe DevToolsで以下のいずれの問題も出ない。

• 見出しは空にしてはなりません (Headings should not be empty)

• 見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

• ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

0561-content-00：その他の手段によるチェック方法の例

チェック対象は、モーダル・ダイアログで、設計資料で見出しが示されていない。

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

NVDAで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. ブラウズ・モードで要素リストを表示（NVDA+F7）

2. 「種別」を「見出し」に設定（Alt+H）

参考動画：見出し【NVDAでアクセシビリティー チェック】

0561-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. VO+Uを押下してローターのメニューを表示

2. 「見出し」を選択

チェックID：0721

ページ内の機能や内容の区切り、本文の先頭部分などに適切に見出しが配置されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0722

複数の種類の情報を含む画面においては、情報の区切りに見出しが配置されている。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

画面方向を固定しない

コンテンツの性質上必要不可欠な場合を除いて、特定の画面方向（縦置き/横置き）での利用を強制しない。

対象プラットフォーム

Web、モバイル

意図

タブレットなどの端末を、特定の方向（縦置き/横置き）に固定して使う必要がある肢体不自由者などが、コンテンツを利用することを妨げない。

対応するWCAG 2.1の達成基準

• 達成基準1.3.4(レベルAA)：

  • Orientation

  • 表示の向き

参考情報

• 画面の表示方向と肢体不自由者の利用

チェック内容

チェックID：0751

特定の画面方向に固定した使用を前提としたデザインになっていない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0771

画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

コンポーネントの一貫した出現順序

ナビゲーション・メニューなど、複数のページに共通して用いられるコンポーネントは、すべてのページで同じ出現順序にし、コンポーネント内でのリンクの出現順序も同じにする。

対象プラットフォーム

Web、モバイル

意図

視覚障害者、認知障害者などが、ページの構成を容易に予測できるようにする。

• 共通部分に一貫性があれば、複数のページで毎回すべての表示内容を確認しなくても、推測に基づく操作がしやすくなる。

対応するWCAG 2.1の達成基準

• 達成基準3.2.3(レベルAA)：

  • Consistent Navigation

  • 一貫したナビゲーション

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック内容

チェックID：0661

ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0781

グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている要素は、すべてのページで一貫性のある形で用いられている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0781-content-00を満たしている、または(0781-content-01と0781-content-02を満たしている)ことを確認する。

0781-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、複数のページ/画面で共通に用いられている要素が存在しない。

0781-content-01：その他の手段によるチェック方法の例

複数のページ/画面で共通に用いられている要素について、すべてのページで一貫した出現順序になっている。

0781-content-02：その他の手段によるチェック方法の例

これらの要素の中でのリンクやボタンの出現順序は、すべてのページで同じになっている。

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0801-content-00を満たしている、または(0801-keyboard-01を満たしている、かつ(0801-nvda-01または0801-macvo-01を満たしている))ことを確認する。

0801-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0801-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動した際、複数のページで移動順序が一貫している。

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

NVDAのブラウズ・モードで上下矢印キーで読み上げさせたとき、複数のページで読み上げ順序が一貫している。

参考動画：同じ出現順序【NVDAでアクセシビリティー チェック】

0801-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせたとき、複数のページで読み上げ順序が一貫している。

複数の到達手段

そのページへの到達手段を複数提供する。ただし、そのページが何らかの手順の実行の過程や結果としてしか表示されない場合は除く。

対象プラットフォーム

Web、モバイル

意図

利用環境や認知能力の違いにかかわらず、そのページへのアクセスのしやすさを確保する。

対応するWCAG 2.1の達成基準

• 達成基準2.4.5(レベルAA)：

  • Multiple Ways

  • 複数の手段

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック内容

チェックID：0811

そのページへは、複数の異なるページから到達できる。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

チェック手順：Web

以下の0811-content-00または0811-content-01または0811-content-02を満たしていることを確認する。

0811-content-00：その他の手段によるチェック方法の例

チェック対象のページは、特定の文脈で表示されなければ意味がないページである。

例：

• ウィザードの途中で表示されるページ

• 操作結果の表示など、特定の操作をしたときのみ表示されるページ

0811-content-01：その他の手段によるチェック方法の例

チェック対象のページには、グローバル・ナビゲーション中のリンクから到達できる。

0811-content-02：その他の手段によるチェック方法の例

チェック対象のページへは、特定のページ中のリンクから遷移できることに加えて、何らかの別の方法でも到達できる。

例：

• ヘルプページからのリンク

• サイトマップからのリンク

• サイト内検索の結果からのリンク

• 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示されるページからのリンク

現在地の明示

そのページが、サイト構造のどこに位置しているかが分かるようにする。

対象プラットフォーム

Web、モバイル

意図

ページ全体を一望することができない視覚障害者が、目的のページにアクセスしているかどうか判断できるようにする。

• スクリーン・リーダーによっては、aria-current属性が付与されているメニュー・アイテムなどに「現在のページ」などという読み上げが追加される。

対応するWCAG 2.1の達成基準

• 達成基準2.4.8(レベルAAA)：

  • Location

  • 現在位置

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック内容

チェックID：0841

そのページ/画面のサイトやアプリケーション内での位置がグローバル・ナビゲーションやパンくずリスト内で示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0841-content-00を満たしている、または(0841-content-01と0841-content-02を満たしている)ことを確認する。

0841-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、グローバル・ナビゲーションやパンくずリストが存在しない。

0841-content-01：その他の手段によるチェック方法の例

グローバル・ナビゲーションやパンくずリスト内で、そのページ/画面のサイトやアプリケーション内での位置が視覚的に分かるように示されている。

0841-content-02：その他の手段によるチェック方法の例

グローバル・ナビゲーションやパンくずリスト内で、そのページ/画面のサイトやアプリケーション内での位置を示す要素に、適切なaria-current属性の値が指定されている。

チェックID：0851

グローバル・ナビゲーションやパンくずリスト内でそのページ/画面の位置が明示されている。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

実装方法の例：位置の明示

Web

• aria-current属性の付与

チェックID：0861

スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0861-content-00または0861-nvda-01または0861-macvo-01を満たしていることを確認する。

0861-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

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

NVDAのブラウズ・モードでの矢印キーの操作による読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある。

参考動画：現在のページ【NVDAでアクセシビリティー チェック】

0861-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによる読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある。

チェックID：0862

グローバル・ナビゲーションやパンくずリスト内で、そのページが対応する要素が分かるような表示がされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0862-content-00または0862-content-01を満たしていることを確認する。

0862-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0862-content-01：その他の手段によるチェック方法の例

グローバル・ナビゲーションやパンくずリスト内で、そのページが対応する要素が分かるような表示がされている。

ログイン・セッション

これらのガイドライン項目は、ログイン・セッション管理に関するものです。

ログイン・セッションの有効期限

ログイン・セッションには有効期限を設けない。有効期限を設ける場合は、次に挙げる事項のうち、少なくとも1つを満たす。

• 解除：ログイン時などに、ユーザーが有効期限の設定を解除することができる。又は、

• 調整：ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、有効期限の大幅な調整をすることができる。又は、

• 延長：時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが有効期限を10回以上延長することができる。又は、

• 必要不可欠な例外：有効期限が必要不可欠なもので、有効期限を延長することがコンテンツの動作を無効にすることになる。又は、

• 20時間の例外：有効期限が20時間よりも長い。

対象プラットフォーム

Web、モバイル

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくサービスを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.1(レベルA)：

  • Timing Adjustable

  • タイミング調整可能

• 達成基準2.2.3(レベルAAA)：

  • No Timing

  • タイミング非依存

参考情報

• 制限時間とアクセシビリティー

チェック内容

チェックID：1321

ログイン・セッションに有効期限が設定されていない。または、以下のいずれかを満たしている：

• ログイン時などに、ユーザーが有効期限の設定を解除することができる。又は、

• ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、有効期限の大幅な調整をすることができる。又は、

• 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが有効期限を10回以上延長することができる。又は、

• 有効期限が必要不可欠なもので、有効期限を延長することがコンテンツの動作を無効にすることになる。又は、

• 有効期限が20時間よりも長い。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

制限時間超過後の操作の継続

ログイン・セッションが切れた場合は、再認証後でもデータを失うことなくユーザーが操作を継続できるようにする。

対象プラットフォーム

Web、モバイル

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくサービスを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.5(レベルAAA)：

  • Re-authenticating

  • 再認証

参考情報

• 制限時間とアクセシビリティー

チェック内容

チェックID：1381

ログイン・セッションがタイムアウトした場合、再認証後にデータを失うことなくユーザーが操作を継続できるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

入力ディバイス

これらのガイドライン項目は、様々な入力ディバイスの利用を可能にするためのもので、すべてのコンテンツが対象です。

キーボード操作を可能にする

マウスまたはタッチUIを使わないと実行できないような機能を作らず、キーボードによる操作を可能にする。

対象プラットフォーム

Web

意図

マウスを使わない/使えない視覚障害者、肢体不自由者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.1.1(レベルA)：

  • Keyboard

  • キーボード

• 達成基準2.1.3(レベルAAA)：

  • Keyboard (No Exception)

  • キーボード (例外なし)

• 達成基準2.5.1(レベルA)：

  • Pointer Gestures

  • ポインタのジェスチャ

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0155

モーダル・ダイアログがキーボードのみで操作できる設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0155-content-00または0155-content-01を満たしていることを確認する。

0155-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

0155-content-01：その他の手段によるチェック方法の例

モーダル・ダイアログが閉じた際、フォーカスがモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻るような設計になっていて、フォーカスが戻るべき位置が設計資料で明示されている。

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0172-keyboard-01を満たしていることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェックID：0174

モーダル・ダイアログはキーボードのみで操作できる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0174-content-00を満たしている、または(0174-keyboard-01と0174-keyboard-02と0174-keyboard-03を満たしている)ことを確認する。

0174-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

0174-keyboard-01：キーボード操作によるチェック方法の例

モーダル・ダイアログが表示された直後にTabキーを押下すると、フォーカスがモーダル・ダイアログ内に移動する。

0174-keyboard-02：キーボード操作によるチェック方法の例

モーダル・ダイアログ内で、フォーカスがモーダル・ダイアログの最後の要素に移動するまでTabキーを押した後、再度Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。同様に、Shift+Tabキーを押してフォーカスがモーダル・ダイアログの最初の要素に移動した後、再度Shift+Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。

0174-keyboard-03：キーボード操作によるチェック方法の例

モーダル・ダイアログが閉じた際、フォーカスはモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻る。

チェックID：0211

すべての操作がキーボードのみでできるように設計されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0211-content-00または0211-content-01を満たしていることを確認する。

0211-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、静的なテキストのみが存在し、クリックやマウスオーバーなどのマウス操作を受け付けるもの（リンク、ボタン、フォーム・コントロールその他）は存在しない。

0211-content-01：その他の手段によるチェック方法の例

クリックやマウスオーバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる設計になっている。

チェックID：0231

すべての操作はキーボードのみで可能である。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0231-content-00または0231-content-01を満たしていることを確認する。

0231-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、静的なテキストのみが存在し、クリックやマウスオーバーなどのマウス操作を受け付けるもの（リンク、ボタン、フォーム・コントロールその他）は存在しない。

0231-content-01：その他の手段によるチェック方法の例

クリックやマウスオーバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

チェックID：0361

マウスオーバー時に表示される情報や実行できる機能は、キーボードだけで操作している場合やタッチUIで操作している場合にも表示・実行できるような設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0361-content-00または0361-content-01を満たしていることを確認する。

0361-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、マウスオーバー時にのみ表示される情報や実行できる機能が存在しない。

0361-content-01：その他の手段によるチェック方法の例

マウスオーバー時に表示される情報や実行できる機能について、キーボードのみで操作する方法やタッチUIで操作する方法が設計資料に明示されている。

チェックID：0581

独自実装が必要なUIコンポーネントのアクセシビリティー確保に必要な情報が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェック手順：Web

以下の0581-content-00または0581-content-01を満たしていることを確認する。

0581-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、独自実装が必要なUIコンポーネントが存在しない。

0581-content-01：その他の手段によるチェック方法の例

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

実装方法の例：スクリーン・リーダーに役割を伝える

Web

role属性を適切に指定する。

iOS

• 適切なaccessibilityTraitsを指定する。

Android

• jetpack composeを使用している場合：role属性を適切に指定する

• jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

モバイルOS標準のジェスチャーによる操作

モバイル・アプリケーションにおいて、そのアプリケーション固有の独自ジェスチャーを用いなければ利用できないような機能がなく、すべての機能はOS標準のジェスチャーによって操作できる。

対象プラットフォーム

モバイル

意図

OSの標準ではないタッチ・ジェスチャーを使うことが難しい上肢不自由者や視覚障害者が、コンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.5.1(レベルA)：

  • Pointer Gestures

  • ポインタのジェスチャ

参考情報

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

チェック内容

チェックID：0154

アプリケーション固有の独自ジェスチャーを用いなければ利用できないような機能が設計資料に存在しない。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[CRITICAL]

モバイルの支援技術のサポート

OS標準のスクリーン・リーダーの利用時、以下を満たす。

• 操作を受け付けるすべてのUIコンポーネントは、スクリーン・リーダーでフォーカスし、操作することができる

• 画面に表示されているすべての情報は、スクリーン・リーダーでフォーカスし、内容を確認できる

• スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている

OS標準のスクリーン・リーダーとは、iOS、iPadOSではVoiceOver、AndroidではTalkBackを差す。

対象プラットフォーム

モバイル

意図

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

• 音声入力やスイッチを用いたインターフェースなど、スクリーン・リーダー以外の支援技術による利用を可能にする。

対応するWCAG 2.1の達成基準

• 達成基準1.4.11(レベルAA)：

  • Non-text Contrast

  • 非テキストのコントラスト

• 達成基準4.1.2(レベルA)：

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

参考情報

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

チェック内容

チェックID：0153

スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[CRITICAL]

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：0581

独自実装が必要なUIコンポーネントのアクセシビリティー確保に必要な情報が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

実装方法の例：スクリーン・リーダーに役割を伝える

Web

role属性を適切に指定する。

iOS

• 適切なaccessibilityTraitsを指定する。

Android

• jetpack composeを使用している場合：role属性を適切に指定する

• jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

適切なフォーカス順序

キーボード操作時のTab / Shift+Tabキー操作、スクリーン・リーダー利用時のタッチUIでの左右フリック操作などでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

対象プラットフォーム

Web、モバイル

意図

スクリーン・リーダーなどの支援技術のユーザーや、キーボードのみで操作しているユーザーが適切にコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.3.2(レベルA)：

  • Meaningful Sequence

  • 意味のある順序

• 達成基準2.4.3(レベルA)：

  • Focus Order

  • フォーカス順序

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0172-keyboard-01を満たしていることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェックID：0174

モーダル・ダイアログはキーボードのみで操作できる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0174-content-00を満たしている、または(0174-keyboard-01と0174-keyboard-02と0174-keyboard-03を満たしている)ことを確認する。

0174-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

0174-keyboard-01：キーボード操作によるチェック方法の例

モーダル・ダイアログが表示された直後にTabキーを押下すると、フォーカスがモーダル・ダイアログ内に移動する。

0174-keyboard-02：キーボード操作によるチェック方法の例

モーダル・ダイアログ内で、フォーカスがモーダル・ダイアログの最後の要素に移動するまでTabキーを押した後、再度Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。同様に、Shift+Tabキーを押してフォーカスがモーダル・ダイアログの最初の要素に移動した後、再度Shift+Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。

0174-keyboard-03：キーボード操作によるチェック方法の例

モーダル・ダイアログが閉じた際、フォーカスはモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻る。

フォーカス箇所の可視化

キーボードで操作可能な要素について、フォーカス・インジケーターを消さない。

対象プラットフォーム

Web

意図

キーボードのみを使っている場合でも、フォーカスされている箇所が分かるようにし、操作を可能にする。

対応するWCAG 2.1の達成基準

• 達成基準2.4.7(レベルAA)：

  • Focus Visible

  • フォーカスの可視化

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0151

フォーカスされている場所が視認できるようになっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0151-content-01または0151-content-02を満たしていることを確認する。

0151-content-01：その他の手段によるチェック方法の例

フォーカス・インジケーターについて、ブラウザーのデフォルトのものから変更していない。

0151-content-02：その他の手段によるチェック方法の例

フォーカス・インジケーターが設計資料で明示されている。

チェックID：0171

キーボードによる操作時、常にフォーカス箇所が視覚的に確認できる

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0171-keyboard-01を満たしていることを確認する。

0171-keyboard-01：キーボード操作によるチェック方法の例

ページ先頭からTabキーでフォーカスを移動し、常にフォーカス位置を視覚的に確認できることを確認する。

キーボード・トラップの回避

ページ中のあらゆるコンポーネントについて、Tabキー、矢印キー、Escキーの押下など簡単な操作でフォーカスを外すことができるようにする。

対象プラットフォーム

Web

意図

キーボードのみを利用している場合に、ページ中の特定のコンポーネントがページの他の部分へのアクセスを阻害しないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.1.2(レベルA)：

  • No Keyboard Trap

  • キーボードトラップなし

参考情報

• キーボード・トラップが引き起こす問題

チェック内容

チェックID：0201

キーボードのみの操作で、フォーカスが特定の場所に閉じ込められるような状態が発生しない。

特に注意が必要なコンポーネントの例：

• 動画や音声コンテンツのプレイヤー

• ポップアップ・メニュー

• モーダル・ダイアログ

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0201-keyboard-01または0201-keyboard-02または0201-keyboard-03を満たしていることを確認する。

0201-keyboard-01：キーボード操作によるチェック方法の例

ページの先頭から、Tabキーを順に押してフォーカスを移動した際、特定の箇所から抜け出せないような状況が発生しない。

0201-keyboard-02：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。

0201-keyboard-03：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、そのコンポーネントを非表示にするためのボタンやメニューが存在し、キーボードのみで操作できる。

ダウン・イベントをトリガーにしない

クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベント（mousedown, touchdownなど）を使わず、アップ・イベント（mouseup, touchupなど）やクリック・イベント（clickなど）を使い、誤った操作を中断できるようにする。

対象プラットフォーム

Web、モバイル

意図

ポインティング・ディバイスやタッチUIでのタップの誤操作の影響を小さくする。

• 意図しない場所でマウス・ボタンを押下してしまった場合に、ターゲットから外れた場所でボタンをリリースすることで、操作をキャンセルできる。

• ドラッグ&ドロップの操作で誤った場所でマウス・ボタンを押下した場合、元の位置にマウス・ポインターを戻したうえでマウス・ボタンを放すと、ドラッグ&ドロップの操作をキャンセルできる。

• タッチUIにおいて意図しない場所に触れてしまった場合に、ターゲットから外れた場所に指を移動して離すすることで、操作をキャンセルできる。

• タッチUIでのドラッグ&ドロップの操作で誤った場所に触れた場合、元の位置に指を戻したうえで放すと、ドラッグ&ドロップの操作をキャンセルできる。

対応するWCAG 2.1の達成基準

• 達成基準2.5.2(レベルA)：

  • Pointer Cancellation

  • ポインタのキャンセル

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェック内容

チェックID：0071

マウス・ボタンのdownイベントをトリガーにしていない。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0081

リンクやボタンなど、マウス・クリックを受け付けるオブジェクトにおいて、マウス・ボタン押下後にもその操作を中止することができる。

注：ドラッグ&ドロップのためのオブジェクトはこのチェックの対象外

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0081-mouse-01を満たしていることを確認する。

0081-mouse-01：mouseによるチェック方法の例

マウスで以下の操作をしたとき、何も実行されない：

1. マウス・ポインターをオブジェクト上に移動

2. マウス・ボタンを押下

3. マウス・ボタンを押下したままの状態でオブジェクト外にマウス・ポインターを移動

4. マウス・ボタンを放す

特定の入力ディバイスを前提としない

そのプラットフォームで標準的ではない入力手段を使用しないとアクセスできない情報や利用できない機能がない。

プラットフォームの標準的な入力手段とは、Webではキーボード、モバイルではOS標準のタッチ操作を指す。また、文字入力に関しては、Windowsのタッチ操作、iOSやAndroidでキーボードを接続した操作もプラットフォームの標準的な入力手段に当たる。

対象プラットフォーム

Web、モバイル

意図

ニーズに応じた異なる多様な入力手段の使用を妨げない。

• スマートフォンでタッチUIだけでなくキーボードを利用することも阻害しないことで、上肢障害や視覚障害があるユーザーの負担を軽減できる。

• 加速度センサーなど動きを伴う動作を前提とした操作（例：シェークで取り消し）だけで実行できる機能を作らないことで、肢体不自由のユーザーの利用を阻害しない。

対応するWCAG 2.1の達成基準

• 達成基準2.5.4(レベルA)：

  • Motion Actuation

  • 動きによる起動

• 達成基準2.5.6(レベルAAA)：

  • Concurrent Input Mechanisms

  • 入力メカニズム非依存

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェック内容

チェックID：0362

本体を振る操作など、標準的なタッチ操作以外の方法を用いないと利用できない機能や情報がない。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[MAJOR]

チェックID：0371

エディット・ボックスや独自に実装した暗証番号入力のためのコンポーネントなど、ユーザーが文字列を入力する場面において、外付けキーボードが接続されたタイミングに関係なく、外付けキーボードによる入力が可能になっている。

対象

コード

対象プラットフォーム

モバイル

重篤度

[MAJOR]

ショートカット・キーを提供する場合

ショートカットキーを提供する場合は、以下のいずれかを満たす。

• ショートカットキーを無効にする設定を可能にする。

• ショートカットキーの割り当ての変更を可能にする。

• 操作対象にフォーカスがあるときのみショートカットキーが有効になるようにする。

対象プラットフォーム

Web

意図

音声認識で操作している場合に、ショートカットキーに割り当てられている機能が誤って実行されないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.1.4(レベルA)：

  • Character Key Shortcuts

  • 文字キーのショートカット

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェック内容

チェックID：0141

ショートカット・キーが支援技術の動作を妨げないようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0141-content-00または0141-content-01を満たしている、または(0141-content-02または0141-content-03を満たしている)ことを確認する。

0141-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、ショートカット・キーが提供されていない。

0141-content-01：その他の手段によるチェック方法の例

ショートカット・キーは、画面の特定の部分にフォーカスがある時だけ利用できるようになっている。

0141-content-02：その他の手段によるチェック方法の例

ユーザーがショートカット・キーを無効にできる。

0141-content-03：その他の手段によるチェック方法の例

ユーザーがショートカット・キーの割当を変更できる。

テキスト

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.3.3(レベルA)：

  • Sensory Characteristics

  • 感覚的な特徴

参考情報

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

チェック内容

チェックID：0032

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

例：

避けるべき表現

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

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

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

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

問題のない表現

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

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

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

適切な文言の見出し

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.4.6(レベルAA)：

  • Headings and Labels

  • 見出し及びラベル

参考情報

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

関連FAQ

• 見出しレベルの指定

チェック内容

チェックID：0271

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.1.1(レベルA)：

  • Language of Page

  • ページの言語

参考情報

• lang 属性と音声読み上げ

チェック内容

チェックID：0611

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

対象

コード

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0621

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0621-axe-01と0621-nvda-01を満たしていることを確認する。

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の達成基準

• 達成基準3.1.2(レベルAA)：

  • Language of Parts

  • 一部分の言語

参考情報

• lang 属性と音声読み上げ

チェック内容

チェックID：0911

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

対象

コード

対象プラットフォーム

Web

重篤度

[MINOR]

チェックID：0921

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

チェック手順：Web

以下の0921-content-00または0921-nvda-01を満たしていることを確認する。

0921-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、単一の言語のテキストしか存在しない。

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

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

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

テキストを表示するUIコンポーネントの言語の明示

テキストを表示するUIコンポーネントにおいて、言語やロケールを指定できる場合は、適切なものを指定する。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.1.2(レベルAA)：

  • Language of Parts

  • 一部分の言語

チェック内容

チェックID：0912

ロケールの指定が可能なUIコンポーネントにおいては、適切なロケールを指定している。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェックID：0922

日付、時刻、数値などは、ページやアプリケーションで利用されている自然言語において自然な形で読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェック手順：Web

以下の0922-nvda-01を満たしていることを確認する。

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

NVDAのブラウズ・モードで上下矢印キーを用いて日付、時刻、数値などを読み上げさせたとき、以下のすべてを満たしている。

• 当該箇所の読み上げに用いられる音声は、他の箇所を読み上げさせたときの音声と同じ種類の音声である

• 当該箇所の読み上げが、そのページやアプリケーションで用いられている言語において自然なものになっている（例：日本語が用いられている場合に、「1月1日」を「ジャニュアリーファースト」などと読み上げない）

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.4(レベルAA)：

  • Resize text

  • テキストのサイズ変更

参考情報

• 拡大表示時のアクセシビリティー

チェック内容

チェックID：0321

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

文字サイズ設定の変更

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.4(レベルAA)：

  • Resize text

  • テキストのサイズ変更

参考情報

• 拡大表示時のアクセシビリティー

チェック内容

チェック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)：

  • Resize text

  • テキストのサイズ変更

チェック内容

チェックID：0325

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

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MINOR]

チェックID：0326

OSの設定で最大の文字サイズを指定しても、コンテンツの理解や利用を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[NORMAL]

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.10(レベルAA)：

  • Reflow

  • リフロー

参考情報

• 拡大表示時のアクセシビリティー

チェック内容

チェックID：0301

ブラウザーのズーム機能で400%に拡大表示しても、特定のレイアウトを保持する必要があるコンテンツを除き、適切にリフローされるように設計されている。

特定のレイアウトを保持する必要があるコンテンツの例：

• 巨大な表

• 印刷のプレビュー

• スキャンされた画像のプレビュー

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

チェック手順：Web

以下の(0301-content-01を満たしている、かつ(0301-content-02または0301-content-03を満たしている))、または(0301-content-04を満たしている、かつ(0301-content-05または0301-content-06を満たしている))ことを確認する。

0301-content-01：その他の手段によるチェック方法の例

チェック対象のページは横書きのコンテンツである。

0301-content-02：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの幅に応じてレイアウトを切り替え、幅320pxでも横スクロールが表示されない設計になっている。

0301-content-03：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの幅が320pxのときに、横スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

0301-content-04：その他の手段によるチェック方法の例

チェック対象のページは縦書きのコンテンツである。

0301-content-05：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの高さに応じてレイアウトを切り替え、高さ256pxでも縦スクロールが表示されない設計になっている。

0301-content-06：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの高さが256pxのときに、縦スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

チェックID：0322

ブラウザーのズーム機能で400%に拡大表示しても、特定のレイアウトを保持する必要があるコンテンツを除き、適切にリフローされる。

特定のレイアウトを保持する必要があるコンテンツの例：

• 巨大な表

• 印刷のプレビュー

• スキャンされた画像のプレビュー

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

チェック手順：Web

以下の(0322-content-01を満たしている、かつ(0322-content-02または0322-content-03を満たしている))、または(0322-content-04を満たしている、かつ(0322-content-05または0322-content-06を満たしている))ことを確認する。

0322-content-01：その他の手段によるチェック方法の例

チェック対象のページは横書きのコンテンツである。

0322-content-02：その他の手段によるチェック方法の例

幅が1280pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときも、横スクロールを必要としないレイアウトになっている。

0322-content-03：その他の手段によるチェック方法の例

幅が1280pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに横スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

0322-content-04：その他の手段によるチェック方法の例

チェック対象のページは縦書きのコンテンツである。

0322-content-05：その他の手段によるチェック方法の例

高さが1024pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときも、縦スクロールを必要としないレイアウトになっている。

0322-content-06：その他の手段によるチェック方法の例

高さが1024pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに縦スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.12(レベルAA)：

  • Text Spacing

  • テキストの間隔

参考情報

• ユーザーCSSを適用したチェックの実施方法

チェック内容

チェックID：0891

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

コントラスト比の確保

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

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

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

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

参考：達成基準 1.4.3: コントラスト (最低限)を理解する

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0002

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

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0021

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0021-axe-01または0021-webaim-01を満たしていることを確認する。

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

axe DevToolsで「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)」という問題が出ない。

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

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

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

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

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

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

0021-webaim-01：WebAIM Contrast Checkerによるチェック方法の例

WebAIM Contrast Checkerで、以下の基準を満たしていることを確認した：

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

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

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

モバイルOSでのコントラスト比の確保

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

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

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

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

参考：

• アクセシビリティ | Apple Developer Documentation

• Accessibility – Material Design 3

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0003

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

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

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

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

チェックID：0021

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

画像化されたテキスト

これらのガイドライン項目は、テキストを画像化して利用する場合を対象としています。

たとえば写真に写っている人物の名札にある名前、図中のテキスト・ラベルなど、文字情報以外の視覚的情報が、コンテンツのより重要な要素となっているようなものは、これらのガイドライン項目の対象外です。

注：WCAG 2.1では"images of text"という用語が用いられ、WCAG 2.1日本語訳では「文字画像」という訳語が当てられています。

画像化されたテキストを使用しない

画像化されたテキストを用いないと実現できない表現が不可欠な場合（例：ロゴ）を除いて、文字情報は画像化せず、テキスト・データで提供する。

対象プラットフォーム

Web、モバイル

意図

• スクリーン・リーダーのユーザーがアクセスできる形で情報を提示する。

• テキスト情報の扱いやすさを損ねない。

対応するWCAG 2.1の達成基準

• 達成基準1.4.5(レベルAA)：

  • Images of Text

  • 文字画像

• 達成基準1.4.9(レベルAAA)：

  • Images of Text (No Exception)

  • 文字画像 (例外なし)

参考情報

• 画像化されたテキストの問題点

チェック内容

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0531-content-00を満たしている、または(0531-content-01を満たしている、かつ(0531-nvda-01または0531-macvo-01を満たしている))ことを確認する。

0531-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、画像化されたテキストはまったく存在しない。

0531-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストが存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

参考動画：画像化されたテキスト【NVDAでアクセシビリティー チェック】

0531-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

テキスト情報の提供

画像化されたテキストに含まれる文字情報をテキストでも提供する。

対象プラットフォーム

Web、モバイル

意図

スクリーン・リーダーのユーザーが画像化されたテキストにアクセスできるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

参考情報

• 画像化されたテキストの問題点

• 画像化されたテキストを使用する場合の代替情報の提供

チェック内容

チェックID：0511

画像化されたテキストを用いていない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0511-content-00を満たしている、または(0511-content-01と0511-content-02を満たしている)ことを確認する。

0511-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、テキスト情報を含む画像はまったく存在しない。

0511-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、テキスト情報を含む画像が存在しない。

0511-content-02：その他の手段によるチェック方法の例

テキスト情報を含む画像について、その内容が適切に伝わる代替テキストが設計資料で明示されている。

チェックID：0521

画像化されたテキストと同じ内容が、スクリーン・リーダーで確認できる形のテキスト・データとしても提供されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：テキスト・データの提供

Web

• alt属性、またはaria-label属性を用いる

iOS

• accessibilityLabelを用いる

Android

• contentDescriptionを用いる

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0531-content-00を満たしている、または(0531-content-01を満たしている、かつ(0531-nvda-01または0531-macvo-01を満たしている))ことを確認する。

0531-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、画像化されたテキストはまったく存在しない。

0531-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストが存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

参考動画：画像化されたテキスト【NVDAでアクセシビリティー チェック】

0531-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

画像内のテキストのコントラスト比

画像化されたテキストの色と背景の色に十分なコントラスト比を確保する。

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

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

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

参考：達成基準 1.4.3: コントラスト (最低限)を理解する

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• 画像化されたテキストの問題点

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0002

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

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

モバイルOSでの画像内のテキストのコントラスト比

画像化されたテキストの色と背景の色に十分なコントラスト比を確保する。

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

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

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

参考：

• アクセシビリティ | Apple Developer Documentation

• Accessibility – Material Design 3

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• 画像化されたテキストの問題点

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0003

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

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

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

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

画像

これらのガイドライン項目は、画像に関するものです。

画像の説明の提供

画像に関する過不足のない説明をテキストで提供する。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が画像の存在を認知し、内容を理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

参考情報

• テキストによる画像の説明

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

チェック内容

チェックID：0421

画像の内容が過不足なく伝わるテキストによる説明が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0421-content-00を満たしている、または(0421-content-01を満たしている、かつ(0421-content-02または0421-content-03を満たしている))ことを確認する。

0421-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、画像が存在しない。

0421-content-01：その他の手段によるチェック方法の例

画像が示す内容を簡潔に示す代替テキストが、設計資料に明示されている。

0421-content-02：その他の手段によるチェック方法の例

代替テキストによる説明は、画像の内容を過不足なく伝えるもので、その情報の理解やページの利用に当たって必要な情報が含まれている。

0421-content-03：その他の手段によるチェック方法の例

代替テキストによる簡潔な説明では不十分な場合、詳細な説明のテキストと、その実装方法（例：aria-describedby属性やfigcaption要素の利用、画像の直前または直後への掲載など）が設計資料に明示されている。

チェックID：0431

• 画像に関する簡潔で過不足ない説明が付加されている。かつ

• 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または関連付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：簡潔な説明の付加

Web

• alt属性またはaria-label属性で指定する

• 表示されているテキストを簡潔な説明として利用する場合は、aria-labelledby属性でそのテキストと画像を関連付ける

iOS

• accessibilityLabelで指定する

Android

• contentDescriptionで指定する

実装方法の例：詳細な説明を付加する

Web

• 詳細な説明と画像がDOMツリー上で離れている場合などには、aria-describedby属性で関連付ける

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0441-axe-01を満たしている、かつ(0441-content-00を満たしている、または((0441-nvda-01または0441-macvo-01を満たしている)))ことを確認する。

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

axe DevToolsで「画像には代替テキストがなければなりません (Images must have alternative text)」という問題が出ない。

ただし、画像に何かしらの代替テキストが指定されていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。

0441-content-00：その他の手段によるチェック方法の例

チェック対象の画面に画像が存在しない、または装飾目的のもののみである。

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

• NVDAで以下の操作をしたとき、画像の内容を適切に表す簡潔な読み上げがされる。

  • ブラウズ・モードで矢印キーを操作して当該箇所を読み上げさせたとき

  • その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

• 詳細な説明が必要な画像の場合、以下のいずれかを満たしている。

• 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでの矢印キーの操作で読み上げさせることができる

• ブラウズ・モードで矢印キーを操作して当該画像を読み上げさせたとき、詳細な説明が読み上げられる

参考動画：画像の説明【NVDAでアクセシビリティー チェック】

0441-macvo-01：macOS VoiceOverによるチェック方法の例

• macOS VoiceOverで以下の操作をしたとき、画像の内容を適切に表す簡潔な読み上げがされる。

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該箇所を読み上げさせたとき

  • その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

• 詳細な説明が必要な画像の場合、以下のいずれかを満たしている。

  • 当該画像の直前または直後に詳細な説明があり、VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせることができる

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該画像を読み上げさせたとき、詳細な説明が読み上げられる

装飾目的の画像の無視

純粋な装飾目的の画像は、スクリーン・リーダーなどの支援技術が無視するようにする。

対象プラットフォーム

Web、モバイル

意図

不要な情報が提示されないようにすることで、視覚障害者の情報取得をスムースにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

参考情報

• テキストによる画像の説明

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

チェック内容

チェックID：0451

情報や機能性を一切持たない画像は、スクリーン・リーダーに無視されるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0451-content-00または0451-content-01を満たしていることを確認する。

0451-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、情報や機能性を持たない画像が存在しない。

0451-content-01：その他の手段によるチェック方法の例

情報や機能性を持たない画像について、代替テキスト（alt属性またはaria-label属性の値）を空にすべきこと、またはrole="presentation"を指定すべきことが設計資料で明示されている。

チェックID：0461

情報や機能性を一切持たない画像は、スクリーン・リーダーで無視されるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

実装方法の例：スクリーン・リーダーに無視させる

Web

• 空のalt属性（alt=""）を指定、または

• role="presentation"を指定、または

• CSSで背景画像として指定

iOS

• isAccessibilityElementをfalseにする。

Android

• importantForAccessibilityをnoにする。

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0471-content-00を満たしている、または((0471-nvda-01と0471-nvda-02を満たしている)、または(0471-macvo-01と0471-macvo-02を満たしている))ことを確認する。

0471-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、情報や機能性を持たない画像が存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない。

参考動画：情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】

0471-nvda-02：NVDAによるチェック方法の例

NVDAのブラウズ・モードで以下の操作を行った際、情報や機能性を持たない画像が無視される：

1. Ctrl+Homeを押下してページの先頭に移動

2. Gを押下して次の画像まで移動

3. 「次の画像がありません」という読み上げがあるまで繰り返す

0471-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない。

0471-macvo-02：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作を行った際、情報や機能性を持たない画像が無視される：

1. VO+Homeを押下してページの先頭に移動

2. VO+Command+Gを押下して次の画像まで移動

3. それ以上VoiceOverカーソルが移動しなくなるまで、または「イメージが見つかりません」という読み上げがあるまで繰り返す

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

特定の色に何らかの意味を持たせている場合、形状、模様など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

• 画像の表示とアクセシビリティー

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

隣接領域とのコントラスト比の確保

画像の隣接領域の色とのコントラスト比を3:1以上にする。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.11(レベルAA)：

  • Non-text Contrast

  • 非テキストのコントラスト

参考情報

• 画像の表示とアクセシビリティー

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0001

アイコンや画像に関して、3:1以上のコントラスト比が確保されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0001-content-00を満たしている、または(0001-content-01と0001-content-02を満たしている)ことを確認する。

0001-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、アイコンや画像が存在しない。

0001-content-01：その他の手段によるチェック方法の例

画像内の重要な情報やアイコンと、その背景色とのコントラスト比が3:1以上である。

0001-content-02：その他の手段によるチェック方法の例

画像や画像化されたテキストと、その隣接領域とのコントラスト比が3:1以上である。

画像内のテキストのコントラスト比

画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストを確保する。

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

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

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

参考：達成基準 1.4.3: コントラスト (最低限)を理解する

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• 画像の表示とアクセシビリティー

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0002

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

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

モバイルOSでの画像内のテキストのコントラスト比

画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストを確保する。

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

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

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

参考：

• アクセシビリティ | Apple Developer Documentation

• Accessibility – Material Design 3

対象プラットフォーム

モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.3(レベルAA)：

  • Contrast (Minimum)

  • コントラスト (最低限)

• 達成基準1.4.6(レベルAAA)：

  • Contrast (Enhanced)

  • コントラスト (高度)

参考情報

• 画像の表示とアクセシビリティー

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0003

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

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

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

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

アイコン

これらのガイドライン項目は、アイコンを対象にしたものです。

ここでアイコンとは、以下の目的で用いられている画像を指します：

• オブジェクトの状態を表す

• クリック可能なボタンやリンクを提供する

テキスト情報の付与

アイコンにはテキストのラベルを併せて表示し、それが難しい場合はアイコンの目的（表している状態、操作の結果）が分かるような代替テキストを付与する。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が画像の存在を認知し、内容を理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

チェック内容

チェックID：0391

アイコンは、その役割や示している状態が伝わるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0391-content-00または0391-content-01を満たしている、または(0391-content-02と0391-content-03を満たしている)ことを確認する。

0391-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、アイコンが存在しない。

0391-content-01：その他の手段によるチェック方法の例

アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。

0391-content-02：その他の手段によるチェック方法の例

アイコンは、色の違いだけで異なる役割や示している状態を表さず、形状（モチーフ）やサイズでも違いが示されている。

0391-content-03：その他の手段によるチェック方法の例

役割や意味がわかるような代替テキスト（alt属性のまたはaria-label属性の値）が設計資料で明示されている。

チェックID：0401

• アイコンの役割や示している状態を表すテキストが表示されていて、そのアイコンと明示的に関連付けられている。または

• そのようなテキストがアイコンに付加されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：表示されているテキストとアイコンを関連付ける

Web

• aria-labelledby属性を用いる

実装方法の例：アイコンにラベルを付加する

Web

• alt属性またはaria-label属性を用いる

iOS

• accessibilityLabelで指定する。

Android

• contentDescription属性で指定する。

実装方法の例：適切な状態の確認

Web

• 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

チェックID：0402

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられないようにする。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

実装方法の例：スクリーン・リーダーに読み上げられないようにする

Web

• img要素の場合、空のalt属性（alt=""）を指定

• img要素以外の要素の場合、aria-label属性やaria-labelledby属性を指定しない

iOS

isAccessibilityElementをfalseにする。

Android

importantForAccessibilityをnoにする。

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0411-axe-01を満たしている、かつ(0411-content-00を満たしている、または(0411-nvda-01または0411-macvo-01を満たしている))ことを確認する。

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

axe DevToolsで「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ない。

0411-content-00：その他の手段によるチェック方法の例

チェック対象の画面にアイコンが存在しない。

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

NVDAで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

• ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき

• そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

参考動画：アイコンの役割や示している状態【NVDAでアクセシビリティー チェック】

0411-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

• VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき

• そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0413-content-00を満たしている、または(0413-nvda-01または0413-macvo-01を満たしている)ことを確認する。

0413-content-00：その他の手段によるチェック方法の例

チェック対象の画面にアイコンが存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

参考動画：アイコンの説明が重複しない【NVDAでアクセシビリティー チェック】

0413-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

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

アイコンに付与されているラベルが非表示のテキストの場合は、形状、サイズが同じで色だけが違う複数のアイコンを用いない。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

チェック内容

チェックID：0391

アイコンは、その役割や示している状態が伝わるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0391-content-00または0391-content-01を満たしている、または(0391-content-02と0391-content-03を満たしている)ことを確認する。

0391-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、アイコンが存在しない。

0391-content-01：その他の手段によるチェック方法の例

アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。

0391-content-02：その他の手段によるチェック方法の例

アイコンは、色の違いだけで異なる役割や示している状態を表さず、形状（モチーフ）やサイズでも違いが示されている。

0391-content-03：その他の手段によるチェック方法の例

役割や意味がわかるような代替テキスト（alt属性のまたはaria-label属性の値）が設計資料で明示されている。

チェックID：0412

テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0412-content-00または0412-content-01を満たしていることを確認する。

0412-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、テキストのラベルが併せて表示されていないアイコンが存在しない。

0412-content-01：その他の手段によるチェック方法の例

テキストのラベルが合わせて表示されていないアイコンで異なる状態や機能を表しているものは、色以外の視覚的な違いもある。

アイコンの一貫性

同じ目的で用いられるアイコンには、サイト内で一貫性のある画像とテキストを用いる。

対象プラットフォーム

Web、モバイル

意図

予測可能性を上げ、混乱を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準3.2.4(レベルAA)：

  • Consistent Identification

  • 一貫した識別性

チェック内容

チェックID：0242

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0242-content-00または0242-content-03を満たしている、または(0242-content-01と0242-content-02を満たしている)ことを確認する。

0242-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、リンクやボタンが存在しない。

0242-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、リンク先が同じ複数のリンクが存在しない。

0242-content-02：その他の手段によるチェック方法の例

チェック対象の画面には、目的が同じ複数のボタンが存在しない。

0242-content-03：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

チェックID：0262

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0262-content-00または0262-content-01を満たしていることを確認する。

0262-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンが存在しない。

0262-content-01：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

コントラスト比の確保

背景色とのコントラスト比を3:1以上にする。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.11(レベルAA)：

  • Non-text Contrast

  • 非テキストのコントラスト

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック内容

チェックID：0001

アイコンや画像に関して、3:1以上のコントラスト比が確保されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0001-content-00を満たしている、または(0001-content-01と0001-content-02を満たしている)ことを確認する。

0001-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、アイコンや画像が存在しない。

0001-content-01：その他の手段によるチェック方法の例

画像内の重要な情報やアイコンと、その背景色とのコントラスト比が3:1以上である。

0001-content-02：その他の手段によるチェック方法の例

画像や画像化されたテキストと、その隣接領域とのコントラスト比が3:1以上である。

十分な大きさのクリック/タッチのターゲット

画像をリンクやボタンにする場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。

• デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

対象プラットフォーム

Web

意図

ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準2.5.5(レベルAAA)：

  • Target Size

  • ターゲットのサイズ

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

関連FAQ

• ラジオボタンやチェックボックスのサイズ

チェック内容

チェックID：0331

ボタンやリンクになっている画像は、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0331-content-00を満たしている、または(0331-content-01と0331-content-02を満たしている)ことを確認する。

0331-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

0331-content-01：その他の手段によるチェック方法の例

リンクやボタンになっている画像について、クリックやタッチに反応する領域が設計資料で明示されている。

0331-content-02：その他の手段によるチェック方法の例

ボタンやリンクになっている画像のクリックやタッチに反応する領域のサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

チェックID：0351

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0351-content-00または0351-content-01を満たしていることを確認する。

0351-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

0351-content-01：その他の手段によるチェック方法の例

ボタンやリンクになっている画像のクリックやタッチに反応するサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

十分な大きさのクリック/タッチのターゲット（モバイル）

画像をリンクやボタンにする場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。

• 44 x 44 CSS px以上、または

• OSのインターフェイス・ガイドラインを満たすサイズ

対象プラットフォーム

モバイル

意図

ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準2.5.5(レベルAAA)：

  • Target Size

  • ターゲットのサイズ

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック内容

チェックID：0333

画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44 x 44 px（OSのUIガイドラインで示されている条件）

Androidの場合

• タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

• 見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

リンク

これらのガイドライン項目は、リンクに関するものです。

ここでリンクとは、ユーザーがクリック（タッチ）することでページ遷移や何らかの機能が実行されるものを差します。リンクにはテキストのみで構成されているもの、アイコンが用いられているもの、画像とテキストの一方又は両方が用いられているものが含まれます。また、a要素で実装されているものに加えて、button要素で実装されていたり、適切なrole属性が付加されて実装されているものも含みます。

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

クリッカブルであることを、色だけで表現しない。

対象プラットフォーム

Web、モバイル

意図

視覚障害者や色弱者がリンクを認知できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

適切なリンク・テキスト

リンク・テキスト（a要素の中身、アイコンのラベルなど）は、そのリンクの目的を判断できるものにする。

対象プラットフォーム

Web、モバイル

意図

• リンク先を閲覧するかどうかの判断を容易にして、肢体不自由者の不必要な操作の抑制につなげる。

• スクリーン・リーダーが提供するリンクの一覧機能を使う視覚障害者が、リンク先について容易に判断できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.4.4(レベルA)：

  • Link Purpose (In Context)

  • リンクの目的 (コンテキスト内)

参考情報

• リンク先の内容を推測しやすくする

チェック内容

チェックID：0241

リンクは、リンク先が容易に推測できるようなテキストで提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェック手順：Web

以下の0241-content-00または0241-content-01または0241-content-02を満たしていることを確認する。

0241-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、リンクが存在しない。

0241-content-01：その他の手段によるチェック方法の例

「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）

0241-content-02：その他の手段によるチェック方法の例

リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）

チェックID：0261

リンクは、リンク先が容易に推測できるようなテキストで提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェック手順：Web

以下の0261-content-00を満たしている、または(0261-content-01または0261-content-02を満たしている)ことを確認する。

0261-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、リンクが存在しない。

0261-content-01：その他の手段によるチェック方法の例

「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）

0261-content-02：その他の手段によるチェック方法の例

リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）

一貫したリンク・テキスト

同じ機能を実行するリンクには、サイト内で一貫性のあるリンク・テキストを付与する。

対象プラットフォーム

Web、モバイル

意図

予測可能性を上げ、混乱を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準3.2.4(レベルAA)：

  • Consistent Identification

  • 一貫した識別性

チェック内容

チェックID：0242

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0242-content-00または0242-content-03を満たしている、または(0242-content-01と0242-content-02を満たしている)ことを確認する。

0242-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、リンクやボタンが存在しない。

0242-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、リンク先が同じ複数のリンクが存在しない。

0242-content-02：その他の手段によるチェック方法の例

チェック対象の画面には、目的が同じ複数のボタンが存在しない。

0242-content-03：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

チェックID：0262

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0262-content-00または0262-content-01を満たしていることを確認する。

0262-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンが存在しない。

0262-content-01：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

適切なフォーカス順序

Tab / Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.4.3(レベルA)：

  • Focus Order

  • フォーカス順序

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0172-keyboard-01を満たしていることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

フォーム

これらのガイドライン項目は、一般的な入力フォームに加え、input要素などフォーム・コントロールを利用している、一見フォームとは思えないようなコンテンツも対象としています。

表示されているテキストをラベルとして用いる

フォーム・コントロールには、表示されているテキストをラベルとして明示的に関連付ける。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が、フォーム・コントロールの目的を容易に判断することができるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

• 達成基準2.4.6(レベルAA)：

  • Headings and Labels

  • 見出し及びラベル

• 達成基準2.5.3(レベルA)：

  • Label in Name

  • 名前 (name) のラベル

• 達成基準3.3.2(レベルA)：

  • Labels or Instructions

  • ラベル又は説明

参考情報

• フォーム・コントロールのラベル付けの必要性

チェック内容

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0931-content-00または0931-content-01または0931-content-02を満たしていることを確認する。

0931-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0931-content-01：その他の手段によるチェック方法の例

フォーム・コントロールのラベルとして適切なテキストまたは代替テキストが付加された画像が画面上にある場合、設計資料にその対応関係が明示されている。

0931-content-02：その他の手段によるチェック方法の例

画面上にラベルとして適切なテキストが表示されていない場合、フォーム・コントロールのラベルとして指定すべきテキストとその実装方法（例：aria-label属性を利用するなど）が設計資料に明示されている。

チェックID：0941

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールにはその役割が分かるラベルが付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：フォーム・コントロールのラベル付け

Web

• label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

• aria-label属性でラベルを指定する

iOS

• accessibilityLabelを用いる。

Android

• labelForを用いる。

実装方法の例：適切な状態の確認

Web

• 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0951-axe-01を満たしている、かつ(0951-content-00を満たしている、または(0951-nvda-01または0951-macvo-01を満たしている))ことを確認する。

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

axe DevToolsで以下のいずれの問題も発生しない。

• フォーム要素にはラベルがなければなりません (Form elements must have labels)

• select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

• フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

• フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

0951-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールが存在しない。

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

NVDAのフォーカス・モードでTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

0951-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOver有効時にTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

表示されているテキストをラベルにできない場合

フォーム・コントロールに対して、表示されているテキストを用いたラベル付けができない場合は、非表示のテキストを用いてラベルを付ける。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が、フォーム・コントロールの目的を容易に判断することができるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

• 達成基準2.4.6(レベルAA)：

  • Headings and Labels

  • 見出し及びラベル

• 達成基準3.3.2(レベルA)：

  • Labels or Instructions

  • ラベル又は説明

参考情報

• フォーム・コントロールのラベル付けの必要性

チェック内容

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0931-content-00または0931-content-01または0931-content-02を満たしていることを確認する。

0931-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0931-content-01：その他の手段によるチェック方法の例

フォーム・コントロールのラベルとして適切なテキストまたは代替テキストが付加された画像が画面上にある場合、設計資料にその対応関係が明示されている。

0931-content-02：その他の手段によるチェック方法の例

画面上にラベルとして適切なテキストが表示されていない場合、フォーム・コントロールのラベルとして指定すべきテキストとその実装方法（例：aria-label属性を利用するなど）が設計資料に明示されている。

チェックID：0941

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールにはその役割が分かるラベルが付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：フォーム・コントロールのラベル付け

Web

• label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

• aria-label属性でラベルを指定する

iOS

• accessibilityLabelを用いる。

Android

• labelForを用いる。

実装方法の例：適切な状態の確認

Web

• 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0951-axe-01を満たしている、かつ(0951-content-00を満たしている、または(0951-nvda-01または0951-macvo-01を満たしている))ことを確認する。

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

axe DevToolsで以下のいずれの問題も発生しない。

• フォーム要素にはラベルがなければなりません (Form elements must have labels)

• select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

• フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

• フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

0951-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールが存在しない。

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

NVDAのフォーカス・モードでTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

0951-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOver有効時にTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

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

必須項目やエラー表示に際して、色に加えて他の視覚的要素も用いる。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.3.3(レベルA)：

  • Sensory Characteristics

  • 感覚的な特徴

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

フォーム入力の制限時間

フォームの入力や操作に制限時間を設けない。制限時間を設ける場合は、次に挙げる事項のうち、少なくとも1つを満たす。

• 解除：制限時間があるフォームを利用する前に、ユーザーがその制限時間を解除することができる。又は、

• 調整：制限時間があるフォームを利用する前に、ユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

• 延長：時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

• リアルタイムの例外：リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

• 必要不可欠な例外：制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

• 20時間の例外：制限時間が20時間よりも長い。

対象プラットフォーム

Web、モバイル

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくフォームを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.1(レベルA)：

  • Timing Adjustable

  • タイミング調整可能

• 達成基準2.2.3(レベルAAA)：

  • No Timing

  • タイミング非依存

参考情報

• 制限時間とアクセシビリティー

チェック内容

チェックID：0961

フォーム入力に制限時間が設けられていない。または、以下のいずれかを満たしている：

• 事前にユーザーが制限時間を解除することができる。又は、

• 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

• 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

• リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

• 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

• 制限時間が20時間よりも長い。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

制限時間超過後の操作の継続

制限時間を超過した場合も、データを失うことなくユーザーが操作を継続できるようにする。

対象プラットフォーム

Web、モバイル

意図

コンテンツの読み取りや理解に時間がかかる場合や、入力操作などに時間がかかる場合にも問題なくフォームを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.5(レベルAAA)：

  • Re-authenticating

  • 再認証

参考情報

• 制限時間とアクセシビリティー

チェック内容

チェックID：1021

制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

キーボード操作を可能にする

すべてのフォーム・コントロールについて、キーボードによる操作を可能にする。

対象プラットフォーム

Web

意図

マウスを使わない/使えない視覚障害者、肢体不自由者が、フォームの操作をできるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.1.1(レベルA)：

  • Keyboard

  • キーボード

• 達成基準2.1.3(レベルAAA)：

  • Keyboard (No Exception)

  • キーボード (例外なし)

• 達成基準2.5.1(レベルA)：

  • Pointer Gestures

  • ポインタのジェスチャ

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0172-keyboard-01を満たしていることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェックID：0581

独自実装が必要なUIコンポーネントのアクセシビリティー確保に必要な情報が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェック手順：Web

以下の0581-content-00または0581-content-01を満たしていることを確認する。

0581-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、独自実装が必要なUIコンポーネントが存在しない。

0581-content-01：その他の手段によるチェック方法の例

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

実装方法の例：スクリーン・リーダーに役割を伝える

Web

role属性を適切に指定する。

iOS

• 適切なaccessibilityTraitsを指定する。

Android

• jetpack composeを使用している場合：role属性を適切に指定する

• jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

チェックID：0956

ラジオボタンは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0956-content-00または0956-keyboard-01を満たしていることを確認する。

0956-content-00：その他の手段によるチェック方法の例

チェック対象の画面にラジオボタンが存在しない。

0956-keyboard-01：キーボード操作によるチェック方法の例

キーボード操作時、以下のすべてを満たしている:

• 同じ質問に対する選択肢など、適切な単位でラジオボタンがグループ化されていて、Tab / Shift+Tabキーでフォーカスを移動した際、グループごとに1つのラジオボタンにしかフォーカスが移動しない。

• グループ内のラジオボタンにフォーカスがある状態で、矢印キーでラジオボタンのグループ内の選択状態を変更でき、選択状態になったラジオボタンにフォーカスが移動する。

• 矢印キーでラジオボタンの選択状態を変更した際、そのグループに属さないラジオボタンへのフォーカスの移動や状態の変更が発生しない。

チェックID：0957

チェックボックスは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0957-content-00または0957-keyboard-01を満たしていることを確認する。

0957-content-00：その他の手段によるチェック方法の例

チェック対象の画面にチェックボックスが存在しない。

0957-keyboard-01：キーボード操作によるチェック方法の例

キーボード操作時、以下のすべてを満たしている:

• Tab / Shift+Tabキーでフォーカスを移動した際、到達できないチェックボックスがない。

• スペースキーを押下することで、フォーカスされているチェックボックスのオン/オフ譜を切り替えられる。

適切なフォーカス順序

Tab / Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.4.3(レベルA)：

  • Focus Order

  • フォーカス順序

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0172-keyboard-01を満たしていることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

フォーカス時の挙動

フォーカスを受け取ったときに、コンテンツの意味を変える、またはページ全体に及ぶような動的な変化を引き起こすフォーム・コントロールやコンポーネントを用いない。

対象プラットフォーム

Web、モバイル

意図

視覚障害、認知障害があるユーザーが予期できない挙動を発生させない。

対応するWCAG 2.1の達成基準

• 達成基準3.2.1(レベルA)：

  • On Focus

  • フォーカス時

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0152

Tab / Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更、など

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0173

キーボード操作時に、ユーザーが予期しない、またはユーザーの混乱を招くような表示の変化が自動的に発生しない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0173-keyboard-01を満たしていることを確認する。

0173-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーによるフォーカス移動時に、自動的に次のような挙動が発生しない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更

フォームの値の変更時の挙動

値が変更されたときに、コンテンツの意味の変更、ページ全体に及ぶような変化、他のフォーム・フィールドの値の変更などを引き起こすようなフォーム・フィールドを作らない、またはそのようなフォーム・フィールドの挙動について、事前にユーザーに知らせる。

対象プラットフォーム

Web、モバイル

意図

視覚障害、認知障害があるユーザーが予期できない挙動を発生させない。

対応するWCAG 2.1の達成基準

• 達成基準3.2.2(レベルA)：

  • On Input

  • 入力時

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab / Shift+Tab キーを用いたチェック

チェック内容

チェックID：1051

フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ/画面全体に及ぶような大幅な表示内容の変更、ページ/画面遷移、別のフィールドの値の変更が起こるような機能が設計資料に存在しない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：1071

フォームの操作時に、ユーザーが予期できない挙動が発生しない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェック手順：Web

以下の1071-content-00を満たしている、または(1071-keyboard-01または1071-content-01を満たしている)ことを確認する。

1071-content-00：その他の手段によるチェック方法の例

チェック対象の画面にフォーム・コントロールが存在しない。

1071-keyboard-01：キーボード操作によるチェック方法の例

ページ/画面内の、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールを操作した際、以下のようなあまり一般的ではない挙動が発生しない：

• 表示内容が大幅に変わる

• 自動的に別のページ/画面に遷移する

• ユーザーが既に入力したフィールドの内容が自動的に変更される（特に操作したフィールドよりも前にあるフィールドが変更されるのは望ましくない）

1071-content-01：その他の手段によるチェック方法の例

フォーム操作時に1071-keyboard-01で示すような挙動が発生する場合、そのような挙動が発生することを明示的にユーザーに伝えている。

テキスト情報によるエラーの特定

入力エラーがある場合、エラー箇所とエラー内容をテキストで知らせる。

対象プラットフォーム

Web、モバイル

意図

視覚障害者、色弱者が、エラー箇所を特定できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準3.3.1(レベルA)：

  • Error Identification

  • エラーの特定

参考情報

• 入力エラーの扱い

チェック内容

チェックID：1081

設計資料には、フォーム入力でエラーが発生したときに表示される、エラー内容が分かる具体的な文言が明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1081-content-00または1081-content-01を満たしていることを確認する。

1081-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームが存在しない。

1081-content-01：その他の手段によるチェック方法の例

フォーム入力時に発生することが想定されるすべてのエラーについて、それぞれ具体的なエラーの内容が分かるメッセージが表示されるような設計になっている。

チェックID：1101

フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1101-content-00または1101-content-01を満たしていることを確認する。

1101-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームがない。

1101-content-01：その他の手段によるチェック方法の例

エラーが発生するフォーム入力を行うと、エラー内容が具体的に分かるテキスト情報が表示される。

エラーの修正方法の提示

入力エラーがある場合に、修正方法を示す。

対象プラットフォーム

Web、モバイル

意図

フォーム入力における認知障害者、学習障害者の困難を軽減する。

対応するWCAG 2.1の達成基準

• 達成基準3.3.3(レベルAA)：

  • Error Suggestion

  • エラー修正の提案

参考情報

• 入力エラーの扱い

チェック内容

チェックID：1111

フォーム入力に関するエラーについて、エラーの修正方法が分かるエラー・メッセージが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1111-content-00または1111-content-01を満たしていることを確認する。

1111-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームが存在しない。

1111-content-01：その他の手段によるチェック方法の例

フォーム入力時に発生することが想定されるすべてのエラーについて、それぞれエラーの修正方法が分かるエラー・メッセージが表示されるような設計になっている。

チェックID：1131

フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1131-content-00または1131-content-01を満たしていることを確認する。

1131-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームがない。

1131-content-01：その他の手段によるチェック方法の例

エラーが発生するフォーム入力を行うと、エラーの修正方法が分かるテキスト情報が表示される。

誤操作の防止

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

対象プラットフォーム

Web、モバイル

意図

誤操作による影響を少なくする。

データの変更や削除については、ユーザーが簡単な操作で完全に復元できない場合に確認などが必要となる。これは、操作にかかる時間は人によって異なるため、時間ではなく操作の簡易性と手数で判断する。

対応するWCAG 2.1の達成基準

• 達成基準3.3.4(レベルAA)：

  • Error Prevention (Legal, Financial, Data)

  • エラー回避 (法的、金融、データ)

参考情報

• 入力エラーの扱い

チェック内容

チェックID：1141

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1141-content-00または1141-content-01を満たしていることを確認する。

1141-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、法的行為、経済的取引、データの変更や削除を生じる機能が存在しない。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

1141-content-01：その他の手段によるチェック方法の例

法的行為、経済的取引、データの変更や削除を生じる機能について、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

十分な大きさのクリック/タッチのターゲット

フォーム・コントロールの見た目をブラウザーのデフォルトのものから変更する場合、クリック/タッチのターゲット・サイズは充分に大きいものにする。

• デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

対象プラットフォーム

Web

意図

ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準2.5.5(レベルAAA)：

  • Target Size

  • ターゲットのサイズ

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック内容

チェックID：0332

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールは、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0332-content-00または0332-content-01を満たしている、または(0332-content-02と0332-content-03を満たしている)ことを確認する。

0332-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0332-content-01：その他の手段によるチェック方法の例

フォーム・コントロールの見た目をブラウザーのデフォルト表示から変更するような指示が設計資料に存在しない。

0332-content-02：その他の手段によるチェック方法の例

フォーム・コントロールのクリックやタッチに反応する領域が、設計資料で明示されている。

0332-content-03：その他の手段によるチェック方法の例

フォーム・コントロールのクリックやタッチに反応する領域のサイズは、以下の条件を満たしている：

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

チェックID：0352

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールは、クリックやタッチに反応するサイズが、充分な大きさになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0352-content-00または0352-content-01または0352-content-02を満たしていることを確認する。

0352-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0352-content-01：その他の手段によるチェック方法の例

フォーム・コントロールの見た目は、ブラウザーのデフォルト表示から変更されていない。

0352-content-02：その他の手段によるチェック方法の例

フォーム・コントロールのクリックやタッチに反応するサイズは、以下の条件を満たしている：

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

十分な大きさのクリック/タッチのターゲット（モバイル）

操作を受け付けるもののタッチのターゲット・サイズは充分に大きいものにする。

• 44 x 44 CSS px以上、または

• OSのインターフェイス・ガイドラインを満たすサイズ

対象プラットフォーム

モバイル

意図

ロービジョン者、細かい手の動きが難しい肢体不自由者の、誤ったクリック/タッチ操作を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準2.5.5(レベルAAA)：

  • Target Size

  • ターゲットのサイズ

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック内容

チェックID：0334

チェックボックス、ラジオボタン、ボタンなどのフォーム・コントロールやその他の操作を受け付けるものは、クリックやタッチに反応する領域のサイズが充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44 x 44 px（OSのUIガイドラインで示されている条件）

Androidの場合

• タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

• 見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

動的コンテンツ

これらのガイドライン項目は、動的コンテンツに関するものです。

動的コンテンツとは、自動的、またはユーザーの操作を受けて変化するものです。そのような変化には、表示されているものの変更に加えて、ページ遷移なども含まれる場合があります。

支援技術への適切な情報提供の維持

ユーザーの操作によってコンテンツが増減するようなページでは、ページがどの状態にあってもスクリーン・リーダーが適切に情報を取得できる状態を維持する。

• スクリーン・リーダーで最初から読み進めた場合に、コンテンツの意味が正しく伝わるコンテンツの順序

• 視覚的に提供されている情報と過不足のない情報が支援技術に伝わる状態

対象プラットフォーム

Web、モバイル

意図

スクリーン・リーダーなどの支援技術のユーザーが、コンテンツを正しく理解できるようにする。

• Webの場合、動的に追加されるコンテンツが、DOMツリーの適切な位置に挿入されることで、スクリーン・リーダーのユーザーがそのコンテンツの存在を認知し、内容を理解することができる。

• モーダル・ダイアログ、開閉するメニュー、アコーディオンなどで注意が必要。

対応するWCAG 2.1の達成基準

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

• 達成基準1.3.2(レベルA)：

  • Meaningful Sequence

  • 意味のある順序

参考情報

• DOMツリーとスクリーン・リーダー

チェック内容

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0711-nvda-01または0711-macvo-01を満たしていることを確認する。

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

NVDAが起動している状態の操作で、以下を満たしている：

• ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

0711-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverが起動している状態の操作で、以下を満たしている：

• VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

チェックID：1313

モーダル・ダイアログが表示される場合：

• ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

• モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

OnFocus/OffFocus時の挙動

OnFocus, OffFocusが以下のような変化を発生させないようにする。

• ページ遷移

• フォーム送信

• モーダル・ダイアログの表示

対象プラットフォーム

Web、モバイル

意図

視覚障害、認知障害があるユーザーにとって予期できない挙動を発生させない。

対応するWCAG 2.1の達成基準

• 達成基準3.2.1(レベルA)：

  • On Focus

  • フォーカス時

参考情報

• Tab / Shift+Tab キーを用いたチェック

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0152

Tab / Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更、など

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0173

キーボード操作時に、ユーザーが予期しない、またはユーザーの混乱を招くような表示の変化が自動的に発生しない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0173-keyboard-01を満たしていることを確認する。

0173-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーによるフォーカス移動時に、自動的に次のような挙動が発生しない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更

マウスオーバー（ホバー）で表示されるコンテンツの拡大

マウスオーバー（ホバー）で表示されるコンテンツについて、マウスオーバーで表示されたコンテンツ上にポインターを移動しても、コンテンツが消えないようにすることで、そのコンテンツを拡大表示して利用することを可能にする。

対象プラットフォーム

Web

意図

拡大表示を利用しているロービジョン者が、マウスオーバーで表示される内容を利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.4.13(レベルAA)：

  • Content on Hover or Focus

  • ホバー又はフォーカスで表示されるコンテンツ

参考情報

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック内容

チェックID：0092

マウスオーバーで表示されるコンテンツは、拡大表示が可能な設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0092-content-00または0092-content-01を満たしていることを確認する。

0092-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0092-content-01：その他の手段によるチェック方法の例

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない設計になっている。

チェックID：0112

マウスオーバーで表示されるコンテンツは、拡大表示が可能。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェック手順：Web

以下の0112-content-00または0112-mouse-01を満たしていることを確認する。

0112-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0112-mouse-01：mouseによるチェック方法の例

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない。

マウスオーバー（ホバー）で表示されるコンテンツの非表示

マウスオーバー（ホバー）で表示されるコンテンツについて、以下のすべてを満たす。

• ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（Escキーで消える、など）

• マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、マウスオーバーで表示されたコンテンツを非表示にする。

対象プラットフォーム

Web

意図

拡大表示を利用しているロービジョン者が、マウスオーバーで表示される内容を利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.4.13(レベルAA)：

  • Content on Hover or Focus

  • ホバー又はフォーカスで表示されるコンテンツ

参考情報

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック内容

チェックID：0091

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0091-content-00を満たしている、または(0091-content-01と0091-content-02を満たしている)ことを確認する。

0091-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0091-content-01：その他の手段によるチェック方法の例

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる機能が定義されている。（例：ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

0091-content-02：その他の手段によるチェック方法の例

マウスオーバーで表示されたコンテンツが非表示になるのは、マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合のみであることが設計資料に明記されている。

チェックID：0111

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

チェック手順：Web

以下の0111-content-00を満たしている、または(0111-mouse-01と0111-mouse-02を満たしている)ことを確認する。

0111-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0111-mouse-01：mouseによるチェック方法の例

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

0111-mouse-02：mouseによるチェック方法の例

マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、マウスオーバーで表示されたコンテンツが非表示になる。

ステータス・メッセージの適切な実装

ステータス・メッセージについて、以下のすべてを満たす。

• スクリーン・リーダーに自動的に読み上げられるようにする。

• ステータス・メッセージであることやその内容が、roleやその他のプロパティーを通して分かるようにする。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が、ステータス・メッセージを遅滞なく確認できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準4.1.3(レベルAA)：

  • Status Messages

  • ステータスメッセージ

参考情報

• ステータス・メッセージとスクリーン・リーダー

チェック内容

チェックID：1171

ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1171-content-00または1171-content-01を満たしていることを確認する。

1171-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、ステータス・メッセージとして扱われるべきメッセージが存在しない。

1171-content-01：その他の手段によるチェック方法の例

ステータス・メッセージとして扱われるべきメッセージについて、表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があることが設計資料で明示されている。

チェックID：1181

操作の結果などを伝えるステータス・メッセージが自動的に読み上げられるようにする。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

実装方法の例：自動的に読み上げられるようにする

Web

aria-live属性を用いる。

iOS

UIAccessibility.post(notification:argument:)の引数に .announcementとメッセージを入れる。（参考：https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement）

Android

Toast、SnackBar等にメッセージを入れ、TalkBackで適切に読み上げられるようにする。

チェックID：1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1191-content-00または1191-nvda-01を満たしていることを確認する。

1191-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、ステータス・メッセージは表示されない。

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

NVDAを起動した状態で設計資料に従ってステータス・メッセージが表示される操作を行ったとき、表示されたステータス・メッセージが自動的に読み上げられる。

参考：aria-liveを用いた実装において期待される挙動については、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

参考動画：ステータスメッセージ【NVDAでアクセシビリティー チェック】

点滅、自動スクロールを伴うコンテンツ

同じページ上に、自動的に開始し5秒以上継続する、点滅や自動スクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。

対象プラットフォーム

Web、モバイル

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.2(レベルA)：

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1201

点滅、自動スクロールを伴うコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1221

点滅、自動スクロールを伴うコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

自動更新されるコンテンツ

予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。

対象プラットフォーム

Web、モバイル

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.2(レベルA)：

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1231

ユーザーの集中を阻害するような、自動更新されるコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1231-content-00または1231-content-01または1231-content-02を満たしていることを確認する。

1231-content-00：その他の手段によるチェック方法の例

チェック対象の画面に自動更新されるコンテンツがない。

1231-content-01：その他の手段によるチェック方法の例

ユーザーが、自動更新されるコンテンツの更新頻度を変更できるようになっている。

1231-content-02：その他の手段によるチェック方法の例

ユーザーが自動更新を停止できるようになっている。

チェックID：1251

ユーザーの集中を阻害するような、自動更新されるコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1251-content-00または1251-content-01または1251-content-02を満たしていることを確認する。

1251-content-00：その他の手段によるチェック方法の例

チェック対象の画面に自動更新されるコンテンツがない。

1251-content-01：その他の手段によるチェック方法の例

ユーザーが、自動更新されるコンテンツの更新頻度を変更できる。

1251-content-02：その他の手段によるチェック方法の例

ユーザーが自動更新を停止できる。

閃光を放つコンテンツ

どの1秒間においても3回を超える閃光を放つものがないようにする。

対象プラットフォーム

Web、モバイル

意図

光感受性の発作を防ぐ。

対応するWCAG 2.1の達成基準

• 達成基準2.3.1(レベルA)：

  • Three Flashes or Below Threshold

  • 3 回の閃光、又は閾値以下

• 達成基準2.3.2(レベルAAA)：

  • Three Flashes

  • 3回の閃光

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1261

1秒間に3回以上光るコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：1281

1秒間に3回以上光るコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

割り込み表示

緊急性が高い情報を提示する場合を除いて、プッシュ通知や自動更新などによる割り込みを発生させない。

対象プラットフォーム

Web、モバイル

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.4(レベルAAA)：

  • Interruptions

  • 割り込み

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1291

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知がない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1292

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、モーダル・ダイアログがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1311

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知がない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1312

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されるモーダル・ダイアログはない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：1313

モーダル・ダイアログが表示される場合：

• ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

• モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

音声・映像コンテンツ

これらのガイドライン項目は、音声のみのコンテンツ、音声を含む動画コンテンツ、映像のみの動画コンテンツに関するものです。

音声・映像コンテンツの存在を明示する

音声・映像コンテンツの存在を認知できるようにする。

対象プラットフォーム

Web、モバイル

意図

視覚障害者、聴覚障害者が音声や映像を含むコンテンツの存在を認知できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.1.1(レベルA)：

  • Non-text Content

  • 非テキストコンテンツ

参考情報

• 音声・映像コンテンツの存在を認知可能にする

チェック内容

チェックID：1411

ページ内に音声や動画プレイヤーが埋め込まれている場合、その事実が容易に認知できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1411-content-00または1411-content-01または1411-content-02を満たしていることを確認する。

1411-content-00：その他の手段によるチェック方法の例

チェック対象の画面に音声や動画プレイヤーは埋め込まれていない。

1411-content-01：その他の手段によるチェック方法の例

ページに埋め込まれている音声や動画のプレイヤーには、そこにプレイヤーがあることが分かるようなラベルが適切に付けられている。

1411-content-02：その他の手段によるチェック方法の例

ページに埋め込まれている音声や動画のプレイヤーは、前後のテキストから、そこにプレイヤーがあることが推測できるようになっている。

音声の自動再生

3秒以上の長さの音声を自動再生しない。

対象プラットフォーム

Web、モバイル

意図

スクリーン・リーダーの音声出力を阻害しない。

対応するWCAG 2.1の達成基準

• 達成基準1.4.2(レベルA)：

  • Audio Control

  • 音声の制御

参考情報

• 音声の自動再生とアクセシビリティー

チェック内容

チェックID：1421

3秒以上の長さの音声を含む、自動再生されるコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：1441

スクリーン・リーダーの音声出力を阻害するような、音声を含む自動再生されるコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェック手順：Web

以下の1441-content-00または1441-content-01を満たしていることを確認する。

1441-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含む自動再生されるコンテンツがない。

1441-content-01：その他の手段によるチェック方法の例

音声を含む自動再生されるコンテンツは、3秒以内に音声の再生が終了する。

動きを伴うコンテンツ

自動的に開始し5秒以上継続する、アニメーションや動画のなどの視覚的な動きを伴うコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。

対象プラットフォーム

Web、モバイル

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.2.2(レベルA)：

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

チェック内容

チェックID：1451

ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1451-content-00または1451-content-01または1451-content-02を満たしていることを確認する。

1451-content-00：その他の手段によるチェック方法の例

チェック対象の画面に自動再生される動画やアニメーションがない。

1451-content-01：その他の手段によるチェック方法の例

ユーザーが、自動再生される動画やアニメーションの再生頻度を変更できるようになっている。

1451-content-02：その他の手段によるチェック方法の例

ユーザーが自動再生を停止できるようになっている。

チェックID：1471

ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1471-content-00または1471-content-01または1471-content-02を満たしていることを確認する。

1471-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、自動再生される動画やアニメーションがない。

1471-content-01：その他の手段によるチェック方法の例

自動再生される動画やアニメーションは、5秒以内に再生が終了する。

1471-content-02：その他の手段によるチェック方法の例

ユーザーが、自動再生される動画やアニメーションを停止、一時停止、または非表示にできる。

キーボード・トラップの回避

音声/動画のプレイヤーをページに埋め込む場合、そのコンポーネントにフォーカスした状態から、Tabキー、矢印キー、Escキーなどで抜け出すことができるようにする。

対象プラットフォーム

Web

意図

キーボードのみを利用している場合に、ページ中の特定のコンポーネントがページの他の部分へのアクセスを阻害しないようにする。

対応するWCAG 2.1の達成基準

• 達成基準2.1.2(レベルA)：

  • No Keyboard Trap

  • キーボードトラップなし

参考情報

• キーボード・トラップが引き起こす問題

チェック内容

チェックID：0201

キーボードのみの操作で、フォーカスが特定の場所に閉じ込められるような状態が発生しない。

特に注意が必要なコンポーネントの例：

• 動画や音声コンテンツのプレイヤー

• ポップアップ・メニュー

• モーダル・ダイアログ

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェック手順：Web

以下の0201-keyboard-01または0201-keyboard-02または0201-keyboard-03を満たしていることを確認する。

0201-keyboard-01：キーボード操作によるチェック方法の例

ページの先頭から、Tabキーを順に押してフォーカスを移動した際、特定の箇所から抜け出せないような状況が発生しない。

0201-keyboard-02：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。

0201-keyboard-03：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、そのコンポーネントを非表示にするためのボタンやメニューが存在し、キーボードのみで操作できる。

テキスト情報と同等の内容にする

テキスト情報の代替情報として音声・映像コンテンツを用い、そのコンテンツがテキスト情報の代替であることを明示する。

対象プラットフォーム

Web、モバイル

意図

音声・映像コンテンツの利用ができないユーザーも支障なくコンテンツを利用できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.2.1(レベルA)：

  • Audio-only and Video-only (Prerecorded)

  • 音声のみ及び映像のみ (収録済)

• 達成基準1.2.2(レベルA)：

  • Captions (Prerecorded)

  • キャプション (収録済)

• 達成基準1.2.3(レベルA)：

  • Audio Description or Media Alternative (Prerecorded)

  • 音声解説、又はメディアに対する代替 (収録済)

• 達成基準1.2.4(レベルAA)：

  • Captions (Live)

  • キャプション (ライブ)

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1481

音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1481-content-00を満たしている、または(1481-content-01と1481-content-02を満たしている)ことを確認する。

1481-content-00：その他の手段によるチェック方法の例

チェック対象の画面に音声・映像コンテンツがない。

1481-content-01：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がないような内容である。

1481-content-02：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることがユーザーに対して明示されている。

チェックID：1501

音声・映像コンテンツは、そのコンテンツがなくても不足なくその画面で提供されている情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1501-content-00を満たしている、または(1501-content-01と1501-content-02を満たしている)ことを確認する。

1501-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツ、動画、アニメーションがない。

1501-content-01：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がない。

1501-content-02：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることが明示されている。

キャプションの提供

テキストの代替情報ではない音声・映像コンテンツにおいて、音声情報には、同期したキャプションを提供する。

対象プラットフォーム

Web、モバイル

意図

音声情報を理解できなくてもサービスの利用が困難にならないようにする。

聴覚障害者が、音声コンテンツおよび動画コンテンツ内の音声を理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.2.2(レベルA)：

  • Captions (Prerecorded)

  • キャプション (収録済)

• 達成基準1.2.4(レベルAA)：

  • Captions (Live)

  • キャプション (ライブ)

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1511

音声を含むコンテンツには、同期したキャプションが提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1511-content-00または1511-content-01を満たしていることを確認する。

1511-content-00：その他の手段によるチェック方法の例

チェック対象の画面に音声を含むコンテンツがない。

1511-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期したキャプションが提供されている。

チェックID：1531

音声を含むコンテンツには、同期したキャプションが提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1531-content-00または1531-content-01を満たしていることを確認する。

1531-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含むコンテンツが存在しない。

1531-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期したキャプションが提供されている。

書き起こしテキストの提供

テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。

対象プラットフォーム

Web、モバイル

意図

音声コンテンツを理解できなくてもサービスの利用が困難にならないようにする。

聴覚障害者が音声のみのコンテンツを理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.2.1(レベルA)：

  • Audio-only and Video-only (Prerecorded)

  • 音声のみ及び映像のみ (収録済)

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1571

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1571-content-00または1571-content-01または1571-content-02を満たしていることを確認する。

1571-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1571-content-01：その他の手段によるチェック方法の例

音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。

1571-content-02：その他の手段によるチェック方法の例

その音声コンテンツを書き起こしたテキストを提供している。

チェックID：1591

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1591-content-00または1591-content-01または1591-content-02を満たしていることを確認する。

1591-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1591-content-01：その他の手段によるチェック方法の例

音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。

1591-content-02：その他の手段によるチェック方法の例

その音声コンテンツを書き起こしたテキストが提供されている。

テキスト情報または音声解説の提供

テキストの代替情報ではない音声・映像コンテンツにおいて、映像がある収録済みコンテンツの場合、映像の内容が分かるような同期した音声情報、またはテキストによる説明を提供する。

対象プラットフォーム

Web、モバイル

意図

映像情報を理解できなくてもサービスの利用が困難にならないようにする。

視覚障害者が、映像コンテンツを理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.2.3(レベルA)：

  • Audio Description or Media Alternative (Prerecorded)

  • 音声解説、又はメディアに対する代替 (収録済)

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1541

動画コンテンツは、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1541-content-00または1541-content-01または1541-content-02または1541-content-03または1541-content-04を満たしていることを確認する。

1541-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1541-content-01：その他の手段によるチェック方法の例

動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。

1541-content-02：その他の手段によるチェック方法の例

音声トラックは、映像の内容を容易に推測できるような内容になっている。

1541-content-03：その他の手段によるチェック方法の例

音声解説を提供している。

1541-content-04：その他の手段によるチェック方法の例

映像に関するテキストによる説明を提供している。

チェックID：1561

動画について、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1561-content-00または1561-content-01または1561-content-02または1561-content-03または1561-content-04を満たしていることを確認する。

1561-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1561-content-01：その他の手段によるチェック方法の例

動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。

1561-content-02：その他の手段によるチェック方法の例

動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。

1561-content-03：その他の手段によるチェック方法の例

動画には音声解説が含まれている。

1561-content-04：その他の手段によるチェック方法の例

映像に関するテキストによる説明が提供されている。

音声解説の提供

すべての音声・映像コンテンツにおいて、映像がある収録済みコンテンツの場合、映像の内容が分かるような同期した音声情報を提供する。

対象プラットフォーム

Web、モバイル

意図

映像情報を理解できなくてもサービスの利用が困難にならないようにする。

視覚障害者が、映像コンテンツを理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.2.3(レベルA)：

  • Audio Description or Media Alternative (Prerecorded)

  • 音声解説、又はメディアに対する代替 (収録済)

• 達成基準1.2.5(レベルAA)：

  • Audio Description (Prerecorded)

  • 音声解説 (収録済)

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1542

すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1542-content-00または1542-content-01または1542-content-02を満たしていることを確認する。

1542-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1542-content-01：その他の手段によるチェック方法の例

音声トラックは、映像の内容を容易に推測できるような内容になっている。

1542-content-02：その他の手段によるチェック方法の例

音声解説を提供している。

チェックID：1562

すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1562-content-00または1562-content-01または1562-content-02を満たしていることを確認する。

1562-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1562-content-01：その他の手段によるチェック方法の例

動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。

1562-content-02：その他の手段によるチェック方法の例

動画には音声解説が含まれている。

手話の提供

収録済みコンテンツの音声情報には、同期した手話通訳を提供する。

対象プラットフォーム

Web、モバイル

意図

手話を主たる言語として使う聴覚障害者が、音声コンテンツまたは動画コンテンツ中の音声を理解できるようにする。

対応するWCAG 2.1の達成基準

• 達成基準1.2.6(レベルAAA)：

  • Sign Language (Prerecorded)

  • 手話 (収録済)

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1601

音声を含むコンテンツには同期した手話通訳が提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェック手順：Web

以下の1601-content-00または1601-content-01を満たしていることを確認する。

1601-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含むコンテンツが存在しない。

1601-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期した手話通訳を提供している。

チェックID：1621

音声を含む情報には同期した手話通訳が提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェック手順：Web

以下の1621-content-00または1621-content-01を満たしていることを確認する。

1621-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含むコンテンツが存在しない。

1621-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期した手話通訳が提供されている。

充分に小さい背景音

映像がなく音声のみの収録済みコンテンツの場合で主たる発話音声があるとき、背景音がない、もしくは主たる発話音声に対して背景音の音量が少なくとも20db小さい状態にする。

対象プラットフォーム

Web、モバイル

意図

音声コンテンツの内容を聞き取りやすいものにする。

対応するWCAG 2.1の達成基準

• 達成基準1.4.7(レベルAAA)：

  • Low or No Background Audio

  • 小さな背景音、又は背景音なし

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック内容

チェックID：1631

音声を含むコンテンツにおいて、背景音は適切な音量になっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1631-content-00または1631-content-01を満たしていることを確認する。

1631-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1631-content-01：その他の手段によるチェック方法の例

音声コンテンツは、充分に聴き取りやすい。

チェックID：1651

音声を含むコンテンツにおいて、背景音は適切な音量になっている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の1651-content-00または1651-content-01を満たしていることを確認する。

1651-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1651-content-01：その他の手段によるチェック方法の例

音声コンテンツは、充分に聴き取りやすい。

アクセシビリティー・チェック・リスト

アクセシビリティー・チェック全項目一覧

書くガイドライン項目の「チェック内容」に示したものを、チェックID順に掲載しています。

それぞれ、以下の項目を記しています。各項目については、チェック内容に詳述しています。

• チェックID

• チェック内容

• 対象：デザイン、コード、またはプロダクト

• 対象プラットフォーム：Web、モバイルのいずれかまたは両方

• 重篤度：[CRITICAL]/[MAJOR]/[NORMAL]/[MINOR]

• 関連ガイドライン項目：そのチェックによって対応状況を確認することができるガイドライン項目

• 参考情報：そのチェックの意図や実施方法に関する情報が記されているものもあります（各関連ガイドライン項目で掲載しているものと同じです。）

• 関連FAQ：よくある質問と回答（FAQ）に掲載しているFAQのうち、そのチェックに関連するものへのリンク

• 「対象」が「コード」のものの中には、実装方法例を記しているものもあります

• 「対象」が「プロダクト」のものの中には、チェック実施方法の例を記しているものもあります

チェックID：0001

アイコンや画像に関して、3:1以上のコントラスト比が確保されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 画像：隣接領域とのコントラスト比の確保

• アイコン：コントラスト比の確保

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

• 画像の表示とアクセシビリティー

チェック手順：Web

以下の0001-content-00を満たしている、または(0001-content-01と0001-content-02を満たしている)ことを確認する。

0001-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、アイコンや画像が存在しない。

0001-content-01：その他の手段によるチェック方法の例

画像内の重要な情報やアイコンと、その背景色とのコントラスト比が3:1以上である。

0001-content-02：その他の手段によるチェック方法の例

画像や画像化されたテキストと、その隣接領域とのコントラスト比が3:1以上である。

チェックID：0002

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

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：コントラスト比の確保

• 画像化されたテキスト：画像内のテキストのコントラスト比

• 画像：画像内のテキストのコントラスト比

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

• 画像の表示とアクセシビリティー

• 画像化されたテキストの問題点

チェックID：0003

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

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

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

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：モバイルOSでのコントラスト比の確保

• 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

• 画像：モバイルOSでの画像内のテキストのコントラスト比

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

• 画像の表示とアクセシビリティー

• 画像化されたテキストの問題点

チェックID：0021

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：コントラスト比の確保

• テキスト：モバイルOSでのコントラスト比の確保

参考情報

• コントラスト比確保の重要性

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

チェック手順：Web

以下の0021-axe-01または0021-webaim-01を満たしていることを確認する。

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

axe DevToolsで「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)」という問題が出ない。

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

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

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

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

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

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

0021-webaim-01：WebAIM Contrast Checkerによるチェック方法の例

WebAIM Contrast Checkerで、以下の基準を満たしていることを確認した：

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

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

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

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• テキスト：複数の視覚的要素を用いた表現

• 画像：複数の視覚的要素を用いた表現

• リンク：複数の視覚的要素を用いた表現

• フォーム：複数の視覚的要素を用いた表現

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

参考情報

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

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

• 画像の表示とアクセシビリティー

チェックID：0032

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

例：

避けるべき表現

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

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

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

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

問題のない表現

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• テキスト：特定の感覚に依存しない表現

参考情報

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

チェックID：0051

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• テキスト：複数の視覚的要素を用いた表現

• 画像：複数の視覚的要素を用いた表現

• リンク：複数の視覚的要素を用いた表現

• フォーム：複数の視覚的要素を用いた表現

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

参考情報

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

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

• 画像の表示とアクセシビリティー

チェックID：0071

マウス・ボタンのdownイベントをトリガーにしていない。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• 入力ディバイス：ダウン・イベントをトリガーにしない

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェックID：0081

リンクやボタンなど、マウス・クリックを受け付けるオブジェクトにおいて、マウス・ボタン押下後にもその操作を中止することができる。

注：ドラッグ&ドロップのためのオブジェクトはこのチェックの対象外

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• 入力ディバイス：ダウン・イベントをトリガーにしない

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェック手順：Web

以下の0081-mouse-01を満たしていることを確認する。

0081-mouse-01：mouseによるチェック方法の例

マウスで以下の操作をしたとき、何も実行されない：

1. マウス・ポインターをオブジェクト上に移動

2. マウス・ボタンを押下

3. マウス・ボタンを押下したままの状態でオブジェクト外にマウス・ポインターを移動

4. マウス・ボタンを放す

チェックID：0091

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの非表示

参考情報

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック手順：Web

以下の0091-content-00を満たしている、または(0091-content-01と0091-content-02を満たしている)ことを確認する。

0091-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0091-content-01：その他の手段によるチェック方法の例

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる機能が定義されている。（例：ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

0091-content-02：その他の手段によるチェック方法の例

マウスオーバーで表示されたコンテンツが非表示になるのは、マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合のみであることが設計資料に明記されている。

チェックID：0092

マウスオーバーで表示されるコンテンツは、拡大表示が可能な設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの拡大

参考情報

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック手順：Web

以下の0092-content-00または0092-content-01を満たしていることを確認する。

0092-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0092-content-01：その他の手段によるチェック方法の例

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない設計になっている。

チェックID：0111

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの非表示

参考情報

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック手順：Web

以下の0111-content-00を満たしている、または(0111-mouse-01と0111-mouse-02を満たしている)ことを確認する。

0111-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0111-mouse-01：mouseによるチェック方法の例

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

0111-mouse-02：mouseによるチェック方法の例

マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、マウスオーバーで表示されたコンテンツが非表示になる。

チェックID：0112

マウスオーバーで表示されるコンテンツは、拡大表示が可能。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの拡大

参考情報

• マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック手順：Web

以下の0112-content-00または0112-mouse-01を満たしていることを確認する。

0112-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0112-mouse-01：mouseによるチェック方法の例

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない。

チェックID：0141

ショートカット・キーが支援技術の動作を妨げないようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• 入力ディバイス：ショートカット・キーを提供する場合

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェック手順：Web

以下の0141-content-00または0141-content-01を満たしている、または(0141-content-02または0141-content-03を満たしている)ことを確認する。

0141-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、ショートカット・キーが提供されていない。

0141-content-01：その他の手段によるチェック方法の例

ショートカット・キーは、画面の特定の部分にフォーカスがある時だけ利用できるようになっている。

0141-content-02：その他の手段によるチェック方法の例

ユーザーがショートカット・キーを無効にできる。

0141-content-03：その他の手段によるチェック方法の例

ユーザーがショートカット・キーの割当を変更できる。

チェックID：0151

フォーカスされている場所が視認できるようになっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• 入力ディバイス：フォーカス箇所の可視化

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0151-content-01または0151-content-02を満たしていることを確認する。

0151-content-01：その他の手段によるチェック方法の例

フォーカス・インジケーターについて、ブラウザーのデフォルトのものから変更していない。

0151-content-02：その他の手段によるチェック方法の例

フォーカス・インジケーターが設計資料で明示されている。

チェックID：0152

Tab / Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更、など

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• フォーム：フォーカス時の挙動

• 動的コンテンツ：OnFocus/OffFocus時の挙動

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab / Shift+Tab キーを用いたチェック

チェックID：0153

スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• 入力ディバイス：モバイルの支援技術のサポート

参考情報

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

チェックID：0154

アプリケーション固有の独自ジェスチャーを用いなければ利用できないような機能が設計資料に存在しない。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• 入力ディバイス：モバイルOS標準のジェスチャーによる操作

参考情報

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

チェックID：0155

モーダル・ダイアログがキーボードのみで操作できる設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0155-content-00または0155-content-01を満たしていることを確認する。

0155-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

0155-content-01：その他の手段によるチェック方法の例

モーダル・ダイアログが閉じた際、フォーカスがモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻るような設計になっていて、フォーカスが戻るべき位置が設計資料で明示されている。

チェックID：0171

キーボードによる操作時、常にフォーカス箇所が視覚的に確認できる

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• 入力ディバイス：フォーカス箇所の可視化

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0171-keyboard-01を満たしていることを確認する。

0171-keyboard-01：キーボード操作によるチェック方法の例

ページ先頭からTabキーでフォーカスを移動し、常にフォーカス位置を視覚的に確認できることを確認する。

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：モバイルの支援技術のサポート

• 入力ディバイス：適切なフォーカス順序

• リンク：適切なフォーカス順序

• フォーム：キーボード操作を可能にする

• フォーム：適切なフォーカス順序

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

参考情報

• Tab / Shift+Tab キーを用いたチェック

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

チェック手順：Web

以下の0172-keyboard-01を満たしていることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェック手順：iOS

以下の0172-iosvo-01を満たしていることを確認する。

0172-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOver有効時に1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

• 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

• 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

• 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0172-androidtb-01を満たしていることを確認する。

0172-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBack有効時に1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

• 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

• 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

• 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

チェックID：0173

キーボード操作時に、ユーザーが予期しない、またはユーザーの混乱を招くような表示の変化が自動的に発生しない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• フォーム：フォーカス時の挙動

• 動的コンテンツ：OnFocus/OffFocus時の挙動

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0173-keyboard-01を満たしていることを確認する。

0173-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーによるフォーカス移動時に、自動的に次のような挙動が発生しない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更

チェックID：0174

モーダル・ダイアログはキーボードのみで操作できる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：適切なフォーカス順序

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0174-content-00を満たしている、または(0174-keyboard-01と0174-keyboard-02と0174-keyboard-03を満たしている)ことを確認する。

0174-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

0174-keyboard-01：キーボード操作によるチェック方法の例

モーダル・ダイアログが表示された直後にTabキーを押下すると、フォーカスがモーダル・ダイアログ内に移動する。

0174-keyboard-02：キーボード操作によるチェック方法の例

モーダル・ダイアログ内で、フォーカスがモーダル・ダイアログの最後の要素に移動するまでTabキーを押した後、再度Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。同様に、Shift+Tabキーを押してフォーカスがモーダル・ダイアログの最初の要素に移動した後、再度Shift+Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。

0174-keyboard-03：キーボード操作によるチェック方法の例

モーダル・ダイアログが閉じた際、フォーカスはモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻る。

チェックID：0201

キーボードのみの操作で、フォーカスが特定の場所に閉じ込められるような状態が発生しない。

特に注意が必要なコンポーネントの例：

• 動画や音声コンテンツのプレイヤー

• ポップアップ・メニュー

• モーダル・ダイアログ

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• 入力ディバイス：キーボード・トラップの回避

• 音声・映像コンテンツ：キーボード・トラップの回避

参考情報

• キーボード・トラップが引き起こす問題

チェック手順：Web

以下の0201-keyboard-01または0201-keyboard-02または0201-keyboard-03を満たしていることを確認する。

0201-keyboard-01：キーボード操作によるチェック方法の例

ページの先頭から、Tabキーを順に押してフォーカスを移動した際、特定の箇所から抜け出せないような状況が発生しない。

0201-keyboard-02：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。

0201-keyboard-03：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、そのコンポーネントを非表示にするためのボタンやメニューが存在し、キーボードのみで操作できる。

チェックID：0211

すべての操作がキーボードのみでできるように設計されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0211-content-00または0211-content-01を満たしていることを確認する。

0211-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、静的なテキストのみが存在し、クリックやマウスオーバーなどのマウス操作を受け付けるもの（リンク、ボタン、フォーム・コントロールその他）は存在しない。

0211-content-01：その他の手段によるチェック方法の例

クリックやマウスオーバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる設計になっている。

チェックID：0231

すべての操作はキーボードのみで可能である。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0231-content-00または0231-content-01を満たしていることを確認する。

0231-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、静的なテキストのみが存在し、クリックやマウスオーバーなどのマウス操作を受け付けるもの（リンク、ボタン、フォーム・コントロールその他）は存在しない。

0231-content-01：その他の手段によるチェック方法の例

クリックやマウスオーバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

チェックID：0241

リンクは、リンク先が容易に推測できるようなテキストで提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

• リンク：適切なリンク・テキスト

参考情報

• リンク先の内容を推測しやすくする

チェック手順：Web

以下の0241-content-00または0241-content-01または0241-content-02を満たしていることを確認する。

0241-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、リンクが存在しない。

0241-content-01：その他の手段によるチェック方法の例

「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）

0241-content-02：その他の手段によるチェック方法の例

リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）

チェックID：0242

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：アイコンの一貫性

• リンク：一貫したリンク・テキスト

チェック手順：Web

以下の0242-content-00または0242-content-03を満たしている、または(0242-content-01と0242-content-02を満たしている)ことを確認する。

0242-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、リンクやボタンが存在しない。

0242-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、リンク先が同じ複数のリンクが存在しない。

0242-content-02：その他の手段によるチェック方法の例

チェック対象の画面には、目的が同じ複数のボタンが存在しない。

0242-content-03：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

チェックID：0261

リンクは、リンク先が容易に推測できるようなテキストで提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

• リンク：適切なリンク・テキスト

参考情報

• リンク先の内容を推測しやすくする

チェック手順：Web

以下の0261-content-00を満たしている、または(0261-content-01または0261-content-02を満たしている)ことを確認する。

0261-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、リンクが存在しない。

0261-content-01：その他の手段によるチェック方法の例

「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）

0261-content-02：その他の手段によるチェック方法の例

リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）

チェックID：0262

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：アイコンの一貫性

• リンク：一貫したリンク・テキスト

チェック手順：Web

以下の0262-content-00または0262-content-01を満たしていることを確認する。

0262-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンが存在しない。

0262-content-01：その他の手段によるチェック方法の例

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

チェックID：0271

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：適切な文言の見出し

関連FAQ

• 見出しレベルの指定

参考情報

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

チェックID：0301

ブラウザーのズーム機能で400%に拡大表示しても、特定のレイアウトを保持する必要があるコンテンツを除き、適切にリフローされるように設計されている。

特定のレイアウトを保持する必要があるコンテンツの例：

• 巨大な表

• 印刷のプレビュー

• スキャンされた画像のプレビュー

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：ズーム機能を用いた400パーセントの拡大表示

参考情報

• 拡大表示時のアクセシビリティー

チェック手順：Web

以下の(0301-content-01を満たしている、かつ(0301-content-02または0301-content-03を満たしている))、または(0301-content-04を満たしている、かつ(0301-content-05または0301-content-06を満たしている))ことを確認する。

0301-content-01：その他の手段によるチェック方法の例

チェック対象のページは横書きのコンテンツである。

0301-content-02：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの幅に応じてレイアウトを切り替え、幅320pxでも横スクロールが表示されない設計になっている。

0301-content-03：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの幅が320pxのときに、横スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

0301-content-04：その他の手段によるチェック方法の例

チェック対象のページは縦書きのコンテンツである。

0301-content-05：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの高さに応じてレイアウトを切り替え、高さ256pxでも縦スクロールが表示されない設計になっている。

0301-content-06：その他の手段によるチェック方法の例

ブラウザー・ウィンドウの高さが256pxのときに、縦スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

チェックID：0311

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

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：文字サイズ設定の変更

参考情報

• 拡大表示時のアクセシビリティー

チェックID：0321

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• テキスト：ズーム機能を用いた200パーセントの拡大表示

参考情報

• 拡大表示時のアクセシビリティー

チェックID：0322

ブラウザーのズーム機能で400%に拡大表示しても、特定のレイアウトを保持する必要があるコンテンツを除き、適切にリフローされる。

特定のレイアウトを保持する必要があるコンテンツの例：

• 巨大な表

• 印刷のプレビュー

• スキャンされた画像のプレビュー

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：ズーム機能を用いた400パーセントの拡大表示

参考情報

• 拡大表示時のアクセシビリティー

チェック手順：Web

以下の(0322-content-01を満たしている、かつ(0322-content-02または0322-content-03を満たしている))、または(0322-content-04を満たしている、かつ(0322-content-05または0322-content-06を満たしている))ことを確認する。

0322-content-01：その他の手段によるチェック方法の例

チェック対象のページは横書きのコンテンツである。

0322-content-02：その他の手段によるチェック方法の例

幅が1280pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときも、横スクロールを必要としないレイアウトになっている。

0322-content-03：その他の手段によるチェック方法の例

幅が1280pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに横スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

0322-content-04：その他の手段によるチェック方法の例

チェック対象のページは縦書きのコンテンツである。

0322-content-05：その他の手段によるチェック方法の例

高さが1024pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときも、縦スクロールを必要としないレイアウトになっている。

0322-content-06：その他の手段によるチェック方法の例

高さが1024pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに縦スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

チェックID：0323

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：文字サイズ設定の変更

参考情報

• 拡大表示時のアクセシビリティー

チェックID：0324

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：文字サイズ設定の変更

参考情報

• 拡大表示時のアクセシビリティー

チェックID：0325

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

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：モバイルOSの文字サイズ設定の変更

チェックID：0326

OSの設定で最大の文字サイズを指定しても、コンテンツの理解や利用を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：モバイルOSの文字サイズ設定の変更

チェックID：0331

ボタンやリンクになっている画像は、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：十分な大きさのクリック/タッチのターゲット

関連FAQ

• ラジオボタンやチェックボックスのサイズ

• テキスト・リンクのクリック可能な領域が小さい

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック手順：Web

以下の0331-content-00を満たしている、または(0331-content-01と0331-content-02を満たしている)ことを確認する。

0331-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

0331-content-01：その他の手段によるチェック方法の例

リンクやボタンになっている画像について、クリックやタッチに反応する領域が設計資料で明示されている。

0331-content-02：その他の手段によるチェック方法の例

ボタンやリンクになっている画像のクリックやタッチに反応する領域のサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

チェックID：0332

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールは、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：十分な大きさのクリック/タッチのターゲット

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック手順：Web

以下の0332-content-00または0332-content-01を満たしている、または(0332-content-02と0332-content-03を満たしている)ことを確認する。

0332-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0332-content-01：その他の手段によるチェック方法の例

フォーム・コントロールの見た目をブラウザーのデフォルト表示から変更するような指示が設計資料に存在しない。

0332-content-02：その他の手段によるチェック方法の例

フォーム・コントロールのクリックやタッチに反応する領域が、設計資料で明示されている。

0332-content-03：その他の手段によるチェック方法の例

フォーム・コントロールのクリックやタッチに反応する領域のサイズは、以下の条件を満たしている：

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

チェックID：0333

画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44 x 44 px（OSのUIガイドラインで示されている条件）

Androidの場合

• タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

• 見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：十分な大きさのクリック/タッチのターゲット（モバイル）

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェックID：0334

チェックボックス、ラジオボタン、ボタンなどのフォーム・コントロールやその他の操作を受け付けるものは、クリックやタッチに反応する領域のサイズが充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44 x 44 px（OSのUIガイドラインで示されている条件）

Androidの場合

• タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

• 見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：十分な大きさのクリック/タッチのターゲット（モバイル）

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェックID：0351

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：十分な大きさのクリック/タッチのターゲット

関連FAQ

• ラジオボタンやチェックボックスのサイズ

• テキスト・リンクのクリック可能な領域が小さい

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック手順：Web

以下の0351-content-00または0351-content-01を満たしていることを確認する。

0351-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

0351-content-01：その他の手段によるチェック方法の例

ボタンやリンクになっている画像のクリックやタッチに反応するサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

チェックID：0352

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールは、クリックやタッチに反応するサイズが、充分な大きさになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：十分な大きさのクリック/タッチのターゲット

参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

チェック手順：Web

以下の0352-content-00または0352-content-01または0352-content-02を満たしていることを確認する。

0352-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0352-content-01：その他の手段によるチェック方法の例

フォーム・コントロールの見た目は、ブラウザーのデフォルト表示から変更されていない。

0352-content-02：その他の手段によるチェック方法の例

フォーム・コントロールのクリックやタッチに反応するサイズは、以下の条件を満たしている：

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

チェックID：0361

マウスオーバー時に表示される情報や実行できる機能は、キーボードだけで操作している場合やタッチUIで操作している場合にも表示・実行できるような設計になっている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0361-content-00または0361-content-01を満たしていることを確認する。

0361-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、マウスオーバー時にのみ表示される情報や実行できる機能が存在しない。

0361-content-01：その他の手段によるチェック方法の例

マウスオーバー時に表示される情報や実行できる機能について、キーボードのみで操作する方法やタッチUIで操作する方法が設計資料に明示されている。

チェックID：0362

本体を振る操作など、標準的なタッチ操作以外の方法を用いないと利用できない機能や情報がない。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 入力ディバイス：特定の入力ディバイスを前提としない

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェックID：0371

エディット・ボックスや独自に実装した暗証番号入力のためのコンポーネントなど、ユーザーが文字列を入力する場面において、外付けキーボードが接続されたタイミングに関係なく、外付けキーボードによる入力が可能になっている。

対象

コード

対象プラットフォーム

モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 入力ディバイス：特定の入力ディバイスを前提としない

参考情報

• 様々なユーザーの入力手段の特徴とそのサポート

チェックID：0391

アイコンは、その役割や示している状態が伝わるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• アイコン：テキスト情報の付与

• アイコン：複数の視覚的要素を用いた表現

チェック手順：Web

以下の0391-content-00または0391-content-01を満たしている、または(0391-content-02と0391-content-03を満たしている)ことを確認する。

0391-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、アイコンが存在しない。

0391-content-01：その他の手段によるチェック方法の例

アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。

0391-content-02：その他の手段によるチェック方法の例

アイコンは、色の違いだけで異なる役割や示している状態を表さず、形状（モチーフ）やサイズでも違いが示されている。

0391-content-03：その他の手段によるチェック方法の例

役割や意味がわかるような代替テキスト（alt属性のまたはaria-label属性の値）が設計資料で明示されている。

チェックID：0401

• アイコンの役割や示している状態を表すテキストが表示されていて、そのアイコンと明示的に関連付けられている。または

• そのようなテキストがアイコンに付加されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• アイコン：テキスト情報の付与

実装方法の例：表示されているテキストとアイコンを関連付ける

Web

• aria-labelledby属性を用いる

実装方法の例：アイコンにラベルを付加する

Web

• alt属性またはaria-label属性を用いる

iOS

• accessibilityLabelで指定する。

Android

• contentDescription属性で指定する。

実装方法の例：適切な状態の確認

Web

• 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

チェックID：0402

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられないようにする。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：テキスト情報の付与

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

実装方法の例：スクリーン・リーダーに読み上げられないようにする

Web

• img要素の場合、空のalt属性（alt=""）を指定

• img要素以外の要素の場合、aria-label属性やaria-labelledby属性を指定しない

iOS

isAccessibilityElementをfalseにする。

Android

importantForAccessibilityをnoにする。

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• アイコン：テキスト情報の付与

チェック手順：Web

以下の0411-axe-01を満たしている、かつ(0411-content-00を満たしている、または(0411-nvda-01または0411-macvo-01を満たしている))ことを確認する。

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

axe DevToolsで「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ない。

0411-content-00：その他の手段によるチェック方法の例

チェック対象の画面にアイコンが存在しない。

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

NVDAで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

• ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき

• そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

参考動画：アイコンの役割や示している状態【NVDAでアクセシビリティー チェック】

0411-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

• VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき

• そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

チェック手順：iOS

以下の0411-iosvo-01を満たしていることを確認する。

0411-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0411-androidtb-01を満たしていることを確認する。

0411-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0412

テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• アイコン：複数の視覚的要素を用いた表現

チェック手順：Web

以下の0412-content-00または0412-content-01を満たしていることを確認する。

0412-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、テキストのラベルが併せて表示されていないアイコンが存在しない。

0412-content-01：その他の手段によるチェック方法の例

テキストのラベルが合わせて表示されていないアイコンで異なる状態や機能を表しているものは、色以外の視覚的な違いもある。

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• アイコン：テキスト情報の付与

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

チェック手順：Web

以下の0413-content-00を満たしている、または(0413-nvda-01または0413-macvo-01を満たしている)ことを確認する。

0413-content-00：その他の手段によるチェック方法の例

チェック対象の画面にアイコンが存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

参考動画：アイコンの説明が重複しない【NVDAでアクセシビリティー チェック】

0413-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

チェック手順：iOS

以下の0413-iosvo-01を満たしていることを確認する。

0413-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0413-androidtb-01を満たしていることを確認する。

0413-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0421

画像の内容が過不足なく伝わるテキストによる説明が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 画像：画像の説明の提供

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

参考情報

• テキストによる画像の説明

チェック手順：Web

以下の0421-content-00を満たしている、または(0421-content-01を満たしている、かつ(0421-content-02または0421-content-03を満たしている))ことを確認する。

0421-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、画像が存在しない。

0421-content-01：その他の手段によるチェック方法の例

画像が示す内容を簡潔に示す代替テキストが、設計資料に明示されている。

0421-content-02：その他の手段によるチェック方法の例

代替テキストによる説明は、画像の内容を過不足なく伝えるもので、その情報の理解やページの利用に当たって必要な情報が含まれている。

0421-content-03：その他の手段によるチェック方法の例

代替テキストによる簡潔な説明では不十分な場合、詳細な説明のテキストと、その実装方法（例：aria-describedby属性やfigcaption要素の利用、画像の直前または直後への掲載など）が設計資料に明示されている。

チェックID：0431

• 画像に関する簡潔で過不足ない説明が付加されている。かつ

• 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または関連付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 画像：画像の説明の提供

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

参考情報

• テキストによる画像の説明

実装方法の例：簡潔な説明の付加

Web

• alt属性またはaria-label属性で指定する

• 表示されているテキストを簡潔な説明として利用する場合は、aria-labelledby属性でそのテキストと画像を関連付ける

iOS

• accessibilityLabelで指定する

Android

• contentDescriptionで指定する

実装方法の例：詳細な説明を付加する

Web

• 詳細な説明と画像がDOMツリー上で離れている場合などには、aria-describedby属性で関連付ける

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 画像：画像の説明の提供

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

参考情報

• テキストによる画像の説明

チェック手順：Web

以下の0441-axe-01を満たしている、かつ(0441-content-00を満たしている、または((0441-nvda-01または0441-macvo-01を満たしている)))ことを確認する。

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

axe DevToolsで「画像には代替テキストがなければなりません (Images must have alternative text)」という問題が出ない。

ただし、画像に何かしらの代替テキストが指定されていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。

0441-content-00：その他の手段によるチェック方法の例

チェック対象の画面に画像が存在しない、または装飾目的のもののみである。

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

• NVDAで以下の操作をしたとき、画像の内容を適切に表す簡潔な読み上げがされる。

  • ブラウズ・モードで矢印キーを操作して当該箇所を読み上げさせたとき

  • その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

• 詳細な説明が必要な画像の場合、以下のいずれかを満たしている。

• 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでの矢印キーの操作で読み上げさせることができる

• ブラウズ・モードで矢印キーを操作して当該画像を読み上げさせたとき、詳細な説明が読み上げられる

参考動画：画像の説明【NVDAでアクセシビリティー チェック】

0441-macvo-01：macOS VoiceOverによるチェック方法の例

• macOS VoiceOverで以下の操作をしたとき、画像の内容を適切に表す簡潔な読み上げがされる。

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該箇所を読み上げさせたとき

  • その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

• 詳細な説明が必要な画像の場合、以下のいずれかを満たしている。

  • 当該画像の直前または直後に詳細な説明があり、VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせることができる

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該画像を読み上げさせたとき、詳細な説明が読み上げられる

チェック手順：iOS

以下の0441-iosvo-01を満たしていることを確認する。

0441-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認するる。

• 読み上げられる説明が画像の内容を適切に表していることを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0441-androidtb-01を満たしていることを確認する。

0441-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認する。

• 読み上げられる説明が画像の内容を適切に表していることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0451

情報や機能性を一切持たない画像は、スクリーン・リーダーに無視されるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 画像：装飾目的の画像の無視

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

参考情報

• テキストによる画像の説明

チェック手順：Web

以下の0451-content-00または0451-content-01を満たしていることを確認する。

0451-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、情報や機能性を持たない画像が存在しない。

0451-content-01：その他の手段によるチェック方法の例

情報や機能性を持たない画像について、代替テキスト（alt属性またはaria-label属性の値）を空にすべきこと、またはrole="presentation"を指定すべきことが設計資料で明示されている。

チェックID：0461

情報や機能性を一切持たない画像は、スクリーン・リーダーで無視されるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 画像：装飾目的の画像の無視

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

参考情報

• テキストによる画像の説明

実装方法の例：スクリーン・リーダーに無視させる

Web

• 空のalt属性（alt=""）を指定、または

• role="presentation"を指定、または

• CSSで背景画像として指定

iOS

• isAccessibilityElementをfalseにする。

Android

• importantForAccessibilityをnoにする。

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 画像：装飾目的の画像の無視

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

参考情報

• テキストによる画像の説明

チェック手順：Web

以下の0471-content-00を満たしている、または((0471-nvda-01と0471-nvda-02を満たしている)、または(0471-macvo-01と0471-macvo-02を満たしている))ことを確認する。

0471-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、情報や機能性を持たない画像が存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない。

参考動画：情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】

0471-nvda-02：NVDAによるチェック方法の例

NVDAのブラウズ・モードで以下の操作を行った際、情報や機能性を持たない画像が無視される：

1. Ctrl+Homeを押下してページの先頭に移動

2. Gを押下して次の画像まで移動

3. 「次の画像がありません」という読み上げがあるまで繰り返す

0471-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない。

0471-macvo-02：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作を行った際、情報や機能性を持たない画像が無視される：

1. VO+Homeを押下してページの先頭に移動

2. VO+Command+Gを押下して次の画像まで移動

3. それ以上VoiceOverカーソルが移動しなくなるまで、または「イメージが見つかりません」という読み上げがあるまで繰り返す

チェック手順：iOS

以下の0471-iosvo-01を満たしていることを確認する。

0471-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0471-androidtb-01を満たしていることを確認する。

0471-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0511

画像化されたテキストを用いていない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

参考情報

• 画像化されたテキストの問題点

• 画像化されたテキストを使用する場合の代替情報の提供

チェック手順：Web

以下の0511-content-00を満たしている、または(0511-content-01と0511-content-02を満たしている)ことを確認する。

0511-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、テキスト情報を含む画像はまったく存在しない。

0511-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、テキスト情報を含む画像が存在しない。

0511-content-02：その他の手段によるチェック方法の例

テキスト情報を含む画像について、その内容が適切に伝わる代替テキストが設計資料で明示されている。

チェックID：0521

画像化されたテキストと同じ内容が、スクリーン・リーダーで確認できる形のテキスト・データとしても提供されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

参考情報

• 画像化されたテキストの問題点

• 画像化されたテキストを使用する場合の代替情報の提供

実装方法の例：テキスト・データの提供

Web

• alt属性、またはaria-label属性を用いる

iOS

• accessibilityLabelを用いる

Android

• contentDescriptionを用いる

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 画像化されたテキスト：画像化されたテキストを使用しない

• 画像化されたテキスト：テキスト情報の提供

参考情報

• 画像化されたテキストの問題点

• 画像化されたテキストを使用する場合の代替情報の提供

チェック手順：Web

以下の0531-content-00を満たしている、または(0531-content-01を満たしている、かつ(0531-nvda-01または0531-macvo-01を満たしている))ことを確認する。

0531-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、画像化されたテキストはまったく存在しない。

0531-content-01：その他の手段によるチェック方法の例

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストが存在しない。

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

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

参考動画：画像化されたテキスト【NVDAでアクセシビリティー チェック】

0531-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

チェック手順：iOS

以下の0531-iosvo-01を満たしていることを確認する。

0531-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0531-androidtb-01を満たしていることを確認する。

0531-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0541

見出しとして表現されるべきものが、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• ページ全体：適切なセクション分けと見出しの付与

参考情報

• セマンティクスを適切にマークアップする重要性

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェックID：0542

箇条書き、表などとして表現されるべきものが、使用するべきHTMLの要素やデザイン・システムのコンポーネントと共に、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

参考情報

• セマンティクスを適切にマークアップする重要性

チェックID：0543

見出しには適切な見出しレベルが指定されている：

• 文書の階層構造を反映した見出しレベルが指定されている

• ページ全体では、見出しレベルは1から始まっている

• 見出しレベルは、1の下位は2、2の下位は3のように1ずつ増加していて、抜けがない状態になっている

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• ページ全体：適切なセクション分けと見出しの付与

参考情報

• セマンティクスを適切にマークアップする重要性

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェックID：0551

見出しが、設計資料に従って適切に実装されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• ページ全体：適切なセクション分けと見出しの付与

参考情報

• セマンティクスを適切にマークアップする重要性

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

実装方法の例：見出しの実装

Web

h1～h6でマークアップする。

iOS

UIAccessibilityTraits.headerをセットする。

Android

当該テキストに対してandroid:accessiblityHeadingをtrueに設定する（Android 9以降）

チェックID：0552

箇条書き、表などのセマンティクスが、設計資料に従って適切に実装されている。

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

参考情報

• セマンティクスを適切にマークアップする重要性

実装方法の例：セマンティクスに応じた実装

Web

• 箇条書き（ul、ol、dl）、表（table）などを使用する

• デザイン・システムの適切なコンポーネントを使用する

チェックID：0553

ボタンはbutton要素で、リンクはhref属性があるa要素で、エディット・ボックス、チェックボックス、ラジオボタンなど、各種フォーム・コントロールはHTMLの適切な要素で実装されている

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• マークアップと実装：対話的なUIコンポーネントの実装

参考情報

• UIコンポーネントのアクセシビリティー

チェックID：0554

UIコンポーネントは、OSや開発フレームワークの標準コンポーネントを用いて実装されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• マークアップと実装：対話的なUIコンポーネントの実装

参考情報

• UIコンポーネントのアクセシビリティー

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• ページ全体：適切なセクション分けと見出しの付与

参考情報

• セマンティクスを適切にマークアップする重要性

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック手順：Web

以下の0561-axe-01を満たしている、かつ(0561-content-00または0561-nvda-01または0561-macvo-01を満たしている)ことを確認する。

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

axe DevToolsで以下のいずれの問題も出ない。

• 見出しは空にしてはなりません (Headings should not be empty)

• 見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

• ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

0561-content-00：その他の手段によるチェック方法の例

チェック対象は、モーダル・ダイアログで、設計資料で見出しが示されていない。

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

NVDAで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. ブラウズ・モードで要素リストを表示（NVDA+F7）

2. 「種別」を「見出し」に設定（Alt+H）

参考動画：見出し【NVDAでアクセシビリティー チェック】

0561-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. VO+Uを押下してローターのメニューを表示

2. 「見出し」を選択

チェック手順：iOS

以下の0561-iosvo-01を満たしていることを確認する。

0561-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOverのローター・ジェスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

チェック手順：Android

以下の0561-androidtb-01を満たしていることを確認する。

0561-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBackの読み上げコントロールの設定で「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

チェックID：0562

スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

参考情報

• セマンティクスを適切にマークアップする重要性

チェック手順：Web

以下の0562-content-00または0562-nvda-01を満たしていることを確認する。

0562-content-00：その他の手段によるチェック方法の例

チェック対象の画面に表が存在しない。

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

以下の手順で、ページ上のすべての表をNVDAで発見することができ、かつ、表中のセル間を移動して、セルの内容を適切に読み上げることができる。

• 表の発見：

  1. ブラウズ・モードでページの先頭に移動（Ctrl+Home）

  2. 前後の表への移動（TまたはShift+Tキー）で、表に移動

• 表中のセル間を移動して、セルの内容を読み上げる：

  1. ブラウズ・モードで表の先頭部分を探す

  2. 以下のキー操作でセル間を移動：

     • Ctrl+Alt+←：左のセル

     • Ctrl+Alt+→：右のセル

     • Ctrl+Alt+↓：下のセル

     • Ctrl+Alt+↑：上のセル

セル移動時に読み上げられる内容：

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

• 左右の移動：移動先のセルの列見出し、列の番号、セルの内容

• 上下の移動：移動先のセルの行見出し、行の番号、セルの内容

ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。

• 上下矢印：前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。

• 左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

参考動画：表【NVDAでアクセシビリティー チェック】

チェックID：0571

validatorやlinterでチェックが通る。

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• マークアップと実装：文法的に正しいマークアップ

参考情報

• The Nu Html Checkerを用いたHTMLのバリデーション

チェックID：0581

独自実装が必要なUIコンポーネントのアクセシビリティー確保に必要な情報が、設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：モバイルの支援技術のサポート

• フォーム：キーボード操作を可能にする

参考情報

• UIコンポーネントのアクセシビリティー

• Tab / Shift+Tab キーを用いたチェック

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

チェック手順：Web

以下の0581-content-00または0581-content-01を満たしていることを確認する。

0581-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、独自実装が必要なUIコンポーネントが存在しない。

0581-content-01：その他の手段によるチェック方法の例

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：モバイルの支援技術のサポート

• フォーム：キーボード操作を可能にする

参考情報

• UIコンポーネントのアクセシビリティー

• Tab / Shift+Tab キーを用いたチェック

• モバイル・アプリケーションのアクセシビリティーに関する基本事項

実装方法の例：スクリーン・リーダーに役割を伝える

Web

role属性を適切に指定する。

iOS

• 適切なaccessibilityTraitsを指定する。

Android

• jetpack composeを使用している場合：role属性を適切に指定する

• jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

チェックID：0587

複数の状態を持つコンポーネントは、その状態が視覚的にもスクリーン・リーダーでも分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

参考情報

• UIコンポーネントのアクセシビリティー

チェックID：0591

静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

参考情報

• UIコンポーネントのアクセシビリティー

チェック手順：Web

以下の0591-content-00または0591-nvda-01を満たしていることを確認する。

0591-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、静的なテキストしか存在しない。

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

以下のすべてを満たしていることをNVDAで確認：

• ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる

• その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる

• 操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる

• 操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる

参考動画：開閉するボタン【NVDAでアクセシビリティー チェック】

チェックID：0592

複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

参考情報

• UIコンポーネントのアクセシビリティー

チェックID：0611

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

対象

コード

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• テキスト：ページの主たる言語の指定

参考情報

• lang 属性と音声読み上げ

チェックID：0621

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン項目

• テキスト：ページの主たる言語の指定

参考情報

• lang 属性と音声読み上げ

チェック手順：Web

以下の0621-axe-01と0621-nvda-01を満たしていることを確認する。

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でアクセシビリティー チェック】

チェックID：0631

そのページ/画面の適切なタイトルが設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：タイトルの指定

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック手順：Web

以下の0631-content-00または0631-content-01を満たしていることを確認する。

0631-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0631-content-01：その他の手段によるチェック方法の例

そのページ/画面のタイトルは、ページ/画面の目的を示し、かつ他のページ/画面とは異なるものになっている。

チェックID：0651

ページ/画面には、適切なタイトルが付けられている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：タイトルの指定

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック手順：Web

以下の0651-content-00を満たしている、または(0651-axe-01と0651-content-01を満たしている)ことを確認する。

0651-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

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

axe DevToolsで「ドキュメントにはナビゲーションを補助するために<title>要素がなければなりません (Documents must have <title> element to aid in navigation)」という問題が出ない。

0651-content-01：その他の手段によるチェック方法の例

ブラウザーのタイトルバーまたはタブバーに表示されているそのページ/画面のタイトルは、ページ/画面の目的を示し、かつ他のページ/画面とは異なるものになっている。

チェックID：0661

ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：ページを構成する領域の明示

• ページ全体：コンポーネントの一貫した出現順序

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェックID：0671

• header, main, nav, footerの各要素が適切に用いられている。または

• これらがrole属性で明示されている。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：ページを構成する領域の明示

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェックID：0672

• main要素が本文の開始位置を反映している。または

• 本文の先頭部分にh1要素やh2要素でマークアップされた見出しがある。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：本文の開始位置の明示

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェックID：0681

スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：本文の開始位置の明示

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック手順：Web

以下の0681-axe-01を満たしている、かつ(0681-nvda-01または0681-nvda-02または0681-macosvo-01または0681-macosvo-02を満たしている)ことを確認する。

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

axe DevToolsで以下のいずれの問題も出ない。

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

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

NVDAのブラウズ・モードで、次/前の見出しへの移動（H / Shift+Hキー）を用いて、本文直前の見出しに移動できる。

参考動画：本文の開始位置【NVDAでアクセシビリティー チェック】

0681-nvda-02：NVDAによるチェック方法の例

NVDAのブラウズ・モードで、次のランドマークへの移動（Dキー）でmain要素の先頭部分に移動でき、その直後から本文が始まっている。

0681-macosvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverの次/前の見出しへの移動（VO+Command+H / VO+Command+Shift+Hキー）を用いて、本文直前の見出しに移動できる。

0681-macosvo-02：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の以下の操作を行ってmain要素の先頭部分に移動でき、その直後から本文が始まっている。

1. VO+Uキーを押下してローターのメニューを表示

2. 「ランドマーク」を選択

3. 「本文」を選んでEnterキーを押下

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：ページを構成する領域の明示

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック手順：Web

以下の0682-axe-01を満たしている、かつ(0682-content-00または0682-misc-01を満たしている)ことを確認する。

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

画面上に表示されているコンテンツに対して、axe DevToolsで以下のいずれの問題も発生しない。（非表示箇所に対して以下の問題が発生しても、通常は問題ない。）

• bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)

• asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)

• contentinfoランドマークは他のランドマークに含まれるべきではありません (Contentinfo landmark should not be contained in another landmark)

• mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)

• ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)

• ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

• ランドマークには一意のロール又はロール／ラベル／タイトル (すなわちアクセシブルな名前) の組み合わせがなければなりません (Landmarks should have a unique role or role/label/title (i.e. accessible name) combination)

• ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)

0682-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0682-misc-01：Landmark Navigation via Keyboard or Pop-upによるチェック方法の例

Landmark Navigation via Keyboard or Pop-upをインストールしたブラウザーで表示した際、コンテンツのすべてのパーツが適切なARIAランドマークの領域に属している。

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• ページ全体：適切な記述順序

• 動的コンテンツ：支援技術への適切な情報提供の維持

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

• DOMツリーとスクリーン・リーダー

チェック手順：Web

以下の0711-nvda-01または0711-macvo-01を満たしていることを確認する。

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

NVDAが起動している状態の操作で、以下を満たしている：

• ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

0711-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverが起動している状態の操作で、以下を満たしている：

• VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

チェック手順：iOS

以下の0711-iosvo-01を満たしていることを確認する。

0711-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0711-androidtb-01を満たしていることを確認する。

0711-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0721

ページ内の機能や内容の区切り、本文の先頭部分などに適切に見出しが配置されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：適切なセクション分けと見出しの付与

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェックID：0722

複数の種類の情報を含む画面においては、情報の区切りに見出しが配置されている。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：適切なセクション分けと見出しの付与

参考情報

• 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェックID：0751

特定の画面方向に固定した使用を前提としたデザインになっていない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• ページ全体：画面方向を固定しない

参考情報

• 画面の表示方向と肢体不自由者の利用

チェックID：0771

画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：画面方向を固定しない

参考情報

• 画面の表示方向と肢体不自由者の利用

チェックID：0781

グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている要素は、すべてのページで一貫性のある形で用いられている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：コンポーネントの一貫した出現順序

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック手順：Web

以下の0781-content-00を満たしている、または(0781-content-01と0781-content-02を満たしている)ことを確認する。

0781-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、複数のページ/画面で共通に用いられている要素が存在しない。

0781-content-01：その他の手段によるチェック方法の例

複数のページ/画面で共通に用いられている要素について、すべてのページで一貫した出現順序になっている。

0781-content-02：その他の手段によるチェック方法の例

これらの要素の中でのリンクやボタンの出現順序は、すべてのページで同じになっている。

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：コンポーネントの一貫した出現順序

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック手順：Web

以下の0801-content-00を満たしている、または(0801-keyboard-01を満たしている、かつ(0801-nvda-01または0801-macvo-01を満たしている))ことを確認する。

0801-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0801-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーでフォーカスを移動した際、複数のページで移動順序が一貫している。

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

NVDAのブラウズ・モードで上下矢印キーで読み上げさせたとき、複数のページで読み上げ順序が一貫している。

参考動画：同じ出現順序【NVDAでアクセシビリティー チェック】

0801-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせたとき、複数のページで読み上げ順序が一貫している。

チェック手順：iOS

以下の0801-iosvo-01を満たしていることを確認する。

0801-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。

参考：1本指による右および左方向へのフリック

チェック手順：Android

以下の0801-androidtb-01を満たしていることを確認する。

0801-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0811

そのページへは、複数の異なるページから到達できる。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン項目

• ページ全体：複数の到達手段

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック手順：Web

以下の0811-content-00または0811-content-01または0811-content-02を満たしていることを確認する。

0811-content-00：その他の手段によるチェック方法の例

チェック対象のページは、特定の文脈で表示されなければ意味がないページである。

例：

• ウィザードの途中で表示されるページ

• 操作結果の表示など、特定の操作をしたときのみ表示されるページ

0811-content-01：その他の手段によるチェック方法の例

チェック対象のページには、グローバル・ナビゲーション中のリンクから到達できる。

0811-content-02：その他の手段によるチェック方法の例

チェック対象のページへは、特定のページ中のリンクから遷移できることに加えて、何らかの別の方法でも到達できる。

例：

• ヘルプページからのリンク

• サイトマップからのリンク

• サイト内検索の結果からのリンク

• 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示されるページからのリンク

チェックID：0841

そのページ/画面のサイトやアプリケーション内での位置がグローバル・ナビゲーションやパンくずリスト内で示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：現在地の明示

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック手順：Web

以下の0841-content-00を満たしている、または(0841-content-01と0841-content-02を満たしている)ことを確認する。

0841-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、グローバル・ナビゲーションやパンくずリストが存在しない。

0841-content-01：その他の手段によるチェック方法の例

グローバル・ナビゲーションやパンくずリスト内で、そのページ/画面のサイトやアプリケーション内での位置が視覚的に分かるように示されている。

0841-content-02：その他の手段によるチェック方法の例

グローバル・ナビゲーションやパンくずリスト内で、そのページ/画面のサイトやアプリケーション内での位置を示す要素に、適切なaria-current属性の値が指定されている。

チェックID：0851

グローバル・ナビゲーションやパンくずリスト内でそのページ/画面の位置が明示されている。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：現在地の明示

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

実装方法の例：位置の明示

Web

• aria-current属性の付与

チェックID：0861

スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：現在地の明示

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック手順：Web

以下の0861-content-00または0861-nvda-01または0861-macvo-01を満たしていることを確認する。

0861-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

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

NVDAのブラウズ・モードでの矢印キーの操作による読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある。

参考動画：現在のページ【NVDAでアクセシビリティー チェック】

0861-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverのVOキーと左右矢印キーによる読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある。

チェックID：0862

グローバル・ナビゲーションやパンくずリスト内で、そのページが対応する要素が分かるような表示がされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ページ全体：現在地の明示

参考情報

• 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック手順：Web

以下の0862-content-00または0862-content-01を満たしていることを確認する。

0862-content-00：その他の手段によるチェック方法の例

チェック対象はモーダル・ダイアログである。

0862-content-01：その他の手段によるチェック方法の例

グローバル・ナビゲーションやパンくずリスト内で、そのページが対応する要素が分かるような表示がされている。

チェックID：0891

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン項目

• テキスト：テキスト表示のカスタマイズ

参考情報

• ユーザーCSSを適用したチェックの実施方法

チェックID：0911

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

対象

コード

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：部分的に使用される言語の明示

参考情報

• lang 属性と音声読み上げ

チェックID：0912

ロケールの指定が可能なUIコンポーネントにおいては、適切なロケールを指定している。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：テキストを表示するUIコンポーネントの言語の明示

チェックID：0921

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：部分的に使用される言語の明示

参考情報

• lang 属性と音声読み上げ

チェック手順：Web

以下の0921-content-00または0921-nvda-01を満たしていることを確認する。

0921-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、単一の言語のテキストしか存在しない。

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

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

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

チェックID：0922

日付、時刻、数値などは、ページやアプリケーションで利用されている自然言語において自然な形で読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

• テキスト：テキストを表示するUIコンポーネントの言語の明示

チェック手順：Web

以下の0922-nvda-01を満たしていることを確認する。

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

NVDAのブラウズ・モードで上下矢印キーを用いて日付、時刻、数値などを読み上げさせたとき、以下のすべてを満たしている。

• 当該箇所の読み上げに用いられる音声は、他の箇所を読み上げさせたときの音声と同じ種類の音声である

• 当該箇所の読み上げが、そのページやアプリケーションで用いられている言語において自然なものになっている（例：日本語が用いられている場合に、「1月1日」を「ジャニュアリーファースト」などと読み上げない）

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

参考情報

• フォーム・コントロールのラベル付けの必要性

チェック手順：Web

以下の0931-content-00または0931-content-01または0931-content-02を満たしていることを確認する。

0931-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、フォーム・コントロールが存在しない。

0931-content-01：その他の手段によるチェック方法の例

フォーム・コントロールのラベルとして適切なテキストまたは代替テキストが付加された画像が画面上にある場合、設計資料にその対応関係が明示されている。

0931-content-02：その他の手段によるチェック方法の例

画面上にラベルとして適切なテキストが表示されていない場合、フォーム・コントロールのラベルとして指定すべきテキストとその実装方法（例：aria-label属性を利用するなど）が設計資料に明示されている。

チェックID：0941

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールにはその役割が分かるラベルが付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

参考情報

• フォーム・コントロールのラベル付けの必要性

実装方法の例：フォーム・コントロールのラベル付け

Web

• label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

• aria-label属性でラベルを指定する

iOS

• accessibilityLabelを用いる。

Android

• labelForを用いる。

実装方法の例：適切な状態の確認

Web

• 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

参考情報

• フォーム・コントロールのラベル付けの必要性

チェック手順：Web

以下の0951-axe-01を満たしている、かつ(0951-content-00を満たしている、または(0951-nvda-01または0951-macvo-01を満たしている))ことを確認する。

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

axe DevToolsで以下のいずれの問題も発生しない。

• フォーム要素にはラベルがなければなりません (Form elements must have labels)

• select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

• フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

• フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

0951-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールが存在しない。

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

NVDAのフォーカス・モードでTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

0951-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOver有効時にTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

チェックID：0956

ラジオボタンは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：キーボード操作を可能にする

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0956-content-00または0956-keyboard-01を満たしていることを確認する。

0956-content-00：その他の手段によるチェック方法の例

チェック対象の画面にラジオボタンが存在しない。

0956-keyboard-01：キーボード操作によるチェック方法の例

キーボード操作時、以下のすべてを満たしている:

• 同じ質問に対する選択肢など、適切な単位でラジオボタンがグループ化されていて、Tab / Shift+Tabキーでフォーカスを移動した際、グループごとに1つのラジオボタンにしかフォーカスが移動しない。

• グループ内のラジオボタンにフォーカスがある状態で、矢印キーでラジオボタンのグループ内の選択状態を変更でき、選択状態になったラジオボタンにフォーカスが移動する。

• 矢印キーでラジオボタンの選択状態を変更した際、そのグループに属さないラジオボタンへのフォーカスの移動や状態の変更が発生しない。

チェックID：0957

チェックボックスは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：キーボード操作を可能にする

参考情報

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の0957-content-00または0957-keyboard-01を満たしていることを確認する。

0957-content-00：その他の手段によるチェック方法の例

チェック対象の画面にチェックボックスが存在しない。

0957-keyboard-01：キーボード操作によるチェック方法の例

キーボード操作時、以下のすべてを満たしている:

• Tab / Shift+Tabキーでフォーカスを移動した際、到達できないチェックボックスがない。

• スペースキーを押下することで、フォーカスされているチェックボックスのオン/オフ譜を切り替えられる。

チェックID：0961

フォーム入力に制限時間が設けられていない。または、以下のいずれかを満たしている：

• 事前にユーザーが制限時間を解除することができる。又は、

• 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

• 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

• リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

• 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

• 制限時間が20時間よりも長い。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：フォーム入力の制限時間

参考情報

• 制限時間とアクセシビリティー

チェックID：1021

制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：制限時間超過後の操作の継続

参考情報

• 制限時間とアクセシビリティー

チェックID：1051

フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ/画面全体に及ぶような大幅な表示内容の変更、ページ/画面遷移、別のフィールドの値の変更が起こるような機能が設計資料に存在しない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• フォーム：フォームの値の変更時の挙動

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab / Shift+Tab キーを用いたチェック

チェックID：1071

フォームの操作時に、ユーザーが予期できない挙動が発生しない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• フォーム：フォームの値の変更時の挙動

参考情報

• フォーム操作で発生する動的な変化が及ぼす影響

• Tab / Shift+Tab キーを用いたチェック

チェック手順：Web

以下の1071-content-00を満たしている、または(1071-keyboard-01または1071-content-01を満たしている)ことを確認する。

1071-content-00：その他の手段によるチェック方法の例

チェック対象の画面にフォーム・コントロールが存在しない。

1071-keyboard-01：キーボード操作によるチェック方法の例

ページ/画面内の、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールを操作した際、以下のようなあまり一般的ではない挙動が発生しない：

• 表示内容が大幅に変わる

• 自動的に別のページ/画面に遷移する

• ユーザーが既に入力したフィールドの内容が自動的に変更される（特に操作したフィールドよりも前にあるフィールドが変更されるのは望ましくない）

1071-content-01：その他の手段によるチェック方法の例

フォーム操作時に1071-keyboard-01で示すような挙動が発生する場合、そのような挙動が発生することを明示的にユーザーに伝えている。

チェックID：1081

設計資料には、フォーム入力でエラーが発生したときに表示される、エラー内容が分かる具体的な文言が明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：テキスト情報によるエラーの特定

参考情報

• 入力エラーの扱い

チェック手順：Web

以下の1081-content-00または1081-content-01を満たしていることを確認する。

1081-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームが存在しない。

1081-content-01：その他の手段によるチェック方法の例

フォーム入力時に発生することが想定されるすべてのエラーについて、それぞれ具体的なエラーの内容が分かるメッセージが表示されるような設計になっている。

チェックID：1101

フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：テキスト情報によるエラーの特定

参考情報

• 入力エラーの扱い

チェック手順：Web

以下の1101-content-00または1101-content-01を満たしていることを確認する。

1101-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームがない。

1101-content-01：その他の手段によるチェック方法の例

エラーが発生するフォーム入力を行うと、エラー内容が具体的に分かるテキスト情報が表示される。

チェックID：1111

フォーム入力に関するエラーについて、エラーの修正方法が分かるエラー・メッセージが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：エラーの修正方法の提示

参考情報

• 入力エラーの扱い

チェック手順：Web

以下の1111-content-00または1111-content-01を満たしていることを確認する。

1111-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームが存在しない。

1111-content-01：その他の手段によるチェック方法の例

フォーム入力時に発生することが想定されるすべてのエラーについて、それぞれエラーの修正方法が分かるエラー・メッセージが表示されるような設計になっている。

チェックID：1131

フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• フォーム：エラーの修正方法の提示

参考情報

• 入力エラーの扱い

チェック手順：Web

以下の1131-content-00または1131-content-01を満たしていることを確認する。

1131-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、入力フォームがない。

1131-content-01：その他の手段によるチェック方法の例

エラーが発生するフォーム入力を行うと、エラーの修正方法が分かるテキスト情報が表示される。

チェックID：1141

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• フォーム：誤操作の防止

参考情報

• 入力エラーの扱い

チェック手順：Web

以下の1141-content-00または1141-content-01を満たしていることを確認する。

1141-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、法的行為、経済的取引、データの変更や削除を生じる機能が存在しない。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

1141-content-01：その他の手段によるチェック方法の例

法的行為、経済的取引、データの変更や削除を生じる機能について、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

チェックID：1171

ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：ステータス・メッセージの適切な実装

参考情報

• ステータス・メッセージとスクリーン・リーダー

チェック手順：Web

以下の1171-content-00または1171-content-01を満たしていることを確認する。

1171-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、ステータス・メッセージとして扱われるべきメッセージが存在しない。

1171-content-01：その他の手段によるチェック方法の例

ステータス・メッセージとして扱われるべきメッセージについて、表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があることが設計資料で明示されている。

チェックID：1181

操作の結果などを伝えるステータス・メッセージが自動的に読み上げられるようにする。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：ステータス・メッセージの適切な実装

参考情報

• ステータス・メッセージとスクリーン・リーダー

実装方法の例：自動的に読み上げられるようにする

Web

aria-live属性を用いる。

iOS

UIAccessibility.post(notification:argument:)の引数に .announcementとメッセージを入れる。（参考：https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement）

Android

Toast、SnackBar等にメッセージを入れ、TalkBackで適切に読み上げられるようにする。

チェックID：1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：ステータス・メッセージの適切な実装

参考情報

• ステータス・メッセージとスクリーン・リーダー

チェック手順：Web

以下の1191-content-00または1191-nvda-01を満たしていることを確認する。

1191-content-00：その他の手段によるチェック方法の例

チェック対象の画面では、ステータス・メッセージは表示されない。

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

NVDAを起動した状態で設計資料に従ってステータス・メッセージが表示される操作を行ったとき、表示されたステータス・メッセージが自動的に読み上げられる。

参考：aria-liveを用いた実装において期待される挙動については、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

参考動画：ステータスメッセージ【NVDAでアクセシビリティー チェック】

チェック手順：iOS

以下の1191-iosvo-01を満たしていることを確認する。

1191-iosvo-01：iOS VoiceOverによるチェック方法の例

iOS VoiceOverが起動している状態で設計資料に従ってステータス・メッセージが表示される操作を行い、表示されたステータス・メッセージが自動的に読み上げられることを確認する。

チェック手順：Android

以下の1191-androidtb-01を満たしていることを確認する。

1191-androidtb-01：Android TalkBackによるチェック方法の例

Android TalkBackが起動している状態で設計資料に従ってステータス・メッセージが表示される操作を行い、表示されたステータス・メッセージが自動的に読み上げられることを確認する。

チェックID：1201

点滅、自動スクロールを伴うコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：点滅、自動スクロールを伴うコンテンツ

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1221

点滅、自動スクロールを伴うコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：点滅、自動スクロールを伴うコンテンツ

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1231

ユーザーの集中を阻害するような、自動更新されるコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：自動更新されるコンテンツ

参考情報

• 自動的に変化するコンテンツの問題点

チェック手順：Web

以下の1231-content-00または1231-content-01または1231-content-02を満たしていることを確認する。

1231-content-00：その他の手段によるチェック方法の例

チェック対象の画面に自動更新されるコンテンツがない。

1231-content-01：その他の手段によるチェック方法の例

ユーザーが、自動更新されるコンテンツの更新頻度を変更できるようになっている。

1231-content-02：その他の手段によるチェック方法の例

ユーザーが自動更新を停止できるようになっている。

チェックID：1251

ユーザーの集中を阻害するような、自動更新されるコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：自動更新されるコンテンツ

参考情報

• 自動的に変化するコンテンツの問題点

チェック手順：Web

以下の1251-content-00または1251-content-01または1251-content-02を満たしていることを確認する。

1251-content-00：その他の手段によるチェック方法の例

チェック対象の画面に自動更新されるコンテンツがない。

1251-content-01：その他の手段によるチェック方法の例

ユーザーが、自動更新されるコンテンツの更新頻度を変更できる。

1251-content-02：その他の手段によるチェック方法の例

ユーザーが自動更新を停止できる。

チェックID：1261

1秒間に3回以上光るコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• 動的コンテンツ：閃光を放つコンテンツ

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1281

1秒間に3回以上光るコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• 動的コンテンツ：閃光を放つコンテンツ

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1291

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知がない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：割り込み表示

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1292

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、モーダル・ダイアログがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：割り込み表示

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1311

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知がない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：割り込み表示

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1312

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されるモーダル・ダイアログはない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：割り込み表示

参考情報

• 自動的に変化するコンテンツの問題点

チェックID：1313

モーダル・ダイアログが表示される場合：

• ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

• モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 動的コンテンツ：支援技術への適切な情報提供の維持

• 動的コンテンツ：割り込み表示

参考情報

• 自動的に変化するコンテンツの問題点

• DOMツリーとスクリーン・リーダー

チェックID：1321

ログイン・セッションに有効期限が設定されていない。または、以下のいずれかを満たしている：

• ログイン時などに、ユーザーが有効期限の設定を解除することができる。又は、

• ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、有効期限の大幅な調整をすることができる。又は、

• 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが有効期限を10回以上延長することができる。又は、

• 有効期限が必要不可欠なもので、有効期限を延長することがコンテンツの動作を無効にすることになる。又は、

• 有効期限が20時間よりも長い。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• ログイン・セッション：ログイン・セッションの有効期限

参考情報

• 制限時間とアクセシビリティー

チェックID：1381

ログイン・セッションがタイムアウトした場合、再認証後にデータを失うことなくユーザーが操作を継続できるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• ログイン・セッション：制限時間超過後の操作の継続

参考情報

• 制限時間とアクセシビリティー

チェックID：1411

ページ内に音声や動画プレイヤーが埋め込まれている場合、その事実が容易に認知できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

参考情報

• 音声・映像コンテンツの存在を認知可能にする

チェック手順：Web

以下の1411-content-00または1411-content-01または1411-content-02を満たしていることを確認する。

1411-content-00：その他の手段によるチェック方法の例

チェック対象の画面に音声や動画プレイヤーは埋め込まれていない。

1411-content-01：その他の手段によるチェック方法の例

ページに埋め込まれている音声や動画のプレイヤーには、そこにプレイヤーがあることが分かるようなラベルが適切に付けられている。

1411-content-02：その他の手段によるチェック方法の例

ページに埋め込まれている音声や動画のプレイヤーは、前後のテキストから、そこにプレイヤーがあることが推測できるようになっている。

チェックID：1421

3秒以上の長さの音声を含む、自動再生されるコンテンツがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• 音声・映像コンテンツ：音声の自動再生

参考情報

• 音声の自動再生とアクセシビリティー

チェックID：1441

スクリーン・リーダーの音声出力を阻害するような、音声を含む自動再生されるコンテンツがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

• 音声・映像コンテンツ：音声の自動再生

参考情報

• 音声の自動再生とアクセシビリティー

チェック手順：Web

以下の1441-content-00または1441-content-01を満たしていることを確認する。

1441-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含む自動再生されるコンテンツがない。

1441-content-01：その他の手段によるチェック方法の例

音声を含む自動再生されるコンテンツは、3秒以内に音声の再生が終了する。

チェックID：1451

ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 音声・映像コンテンツ：動きを伴うコンテンツ

チェック手順：Web

以下の1451-content-00または1451-content-01または1451-content-02を満たしていることを確認する。

1451-content-00：その他の手段によるチェック方法の例

チェック対象の画面に自動再生される動画やアニメーションがない。

1451-content-01：その他の手段によるチェック方法の例

ユーザーが、自動再生される動画やアニメーションの再生頻度を変更できるようになっている。

1451-content-02：その他の手段によるチェック方法の例

ユーザーが自動再生を停止できるようになっている。

チェックID：1471

ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 音声・映像コンテンツ：動きを伴うコンテンツ

チェック手順：Web

以下の1471-content-00または1471-content-01または1471-content-02を満たしていることを確認する。

1471-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、自動再生される動画やアニメーションがない。

1471-content-01：その他の手段によるチェック方法の例

自動再生される動画やアニメーションは、5秒以内に再生が終了する。

1471-content-02：その他の手段によるチェック方法の例

ユーザーが、自動再生される動画やアニメーションを停止、一時停止、または非表示にできる。

チェックID：1481

音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報と同等の内容にする

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1481-content-00を満たしている、または(1481-content-01と1481-content-02を満たしている)ことを確認する。

1481-content-00：その他の手段によるチェック方法の例

チェック対象の画面に音声・映像コンテンツがない。

1481-content-01：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がないような内容である。

1481-content-02：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることがユーザーに対して明示されている。

チェックID：1501

音声・映像コンテンツは、そのコンテンツがなくても不足なくその画面で提供されている情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報と同等の内容にする

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1501-content-00を満たしている、または(1501-content-01と1501-content-02を満たしている)ことを確認する。

1501-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツ、動画、アニメーションがない。

1501-content-01：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がない。

1501-content-02：その他の手段によるチェック方法の例

音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることが明示されている。

チェックID：1511

音声を含むコンテンツには、同期したキャプションが提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：キャプションの提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1511-content-00または1511-content-01を満たしていることを確認する。

1511-content-00：その他の手段によるチェック方法の例

チェック対象の画面に音声を含むコンテンツがない。

1511-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期したキャプションが提供されている。

チェックID：1531

音声を含むコンテンツには、同期したキャプションが提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：キャプションの提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1531-content-00または1531-content-01を満たしていることを確認する。

1531-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含むコンテンツが存在しない。

1531-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期したキャプションが提供されている。

チェックID：1541

動画コンテンツは、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報または音声解説の提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1541-content-00または1541-content-01または1541-content-02または1541-content-03または1541-content-04を満たしていることを確認する。

1541-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1541-content-01：その他の手段によるチェック方法の例

動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。

1541-content-02：その他の手段によるチェック方法の例

音声トラックは、映像の内容を容易に推測できるような内容になっている。

1541-content-03：その他の手段によるチェック方法の例

音声解説を提供している。

1541-content-04：その他の手段によるチェック方法の例

映像に関するテキストによる説明を提供している。

チェックID：1542

すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：音声解説の提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1542-content-00または1542-content-01または1542-content-02を満たしていることを確認する。

1542-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1542-content-01：その他の手段によるチェック方法の例

音声トラックは、映像の内容を容易に推測できるような内容になっている。

1542-content-02：その他の手段によるチェック方法の例

音声解説を提供している。

チェックID：1561

動画について、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報または音声解説の提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1561-content-00または1561-content-01または1561-content-02または1561-content-03または1561-content-04を満たしていることを確認する。

1561-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1561-content-01：その他の手段によるチェック方法の例

動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。

1561-content-02：その他の手段によるチェック方法の例

動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。

1561-content-03：その他の手段によるチェック方法の例

動画には音声解説が含まれている。

1561-content-04：その他の手段によるチェック方法の例

映像に関するテキストによる説明が提供されている。

チェックID：1562

すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：音声解説の提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1562-content-00または1562-content-01または1562-content-02を満たしていることを確認する。

1562-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、動画コンテンツが存在しない。

1562-content-01：その他の手段によるチェック方法の例

動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。

1562-content-02：その他の手段によるチェック方法の例

動画には音声解説が含まれている。

チェックID：1571

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：書き起こしテキストの提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1571-content-00または1571-content-01または1571-content-02を満たしていることを確認する。

1571-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1571-content-01：その他の手段によるチェック方法の例

音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。

1571-content-02：その他の手段によるチェック方法の例

その音声コンテンツを書き起こしたテキストを提供している。

チェックID：1591

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：書き起こしテキストの提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1591-content-00または1591-content-01または1591-content-02を満たしていることを確認する。

1591-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1591-content-01：その他の手段によるチェック方法の例

音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。

1591-content-02：その他の手段によるチェック方法の例

その音声コンテンツを書き起こしたテキストが提供されている。

チェックID：1601

音声を含むコンテンツには同期した手話通訳が提供されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

• 音声・映像コンテンツ：手話の提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1601-content-00または1601-content-01を満たしていることを確認する。

1601-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含むコンテンツが存在しない。

1601-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期した手話通訳を提供している。

チェックID：1621

音声を含む情報には同期した手話通訳が提供されている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

• 音声・映像コンテンツ：手話の提供

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1621-content-00または1621-content-01を満たしていることを確認する。

1621-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声を含むコンテンツが存在しない。

1621-content-01：その他の手段によるチェック方法の例

音声を含むコンテンツには、同期した手話通訳が提供されている。

チェックID：1631

音声を含むコンテンツにおいて、背景音は適切な音量になっている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：充分に小さい背景音

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1631-content-00または1631-content-01を満たしていることを確認する。

1631-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1631-content-01：その他の手段によるチェック方法の例

音声コンテンツは、充分に聴き取りやすい。

チェックID：1651

音声を含むコンテンツにおいて、背景音は適切な音量になっている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

• 音声・映像コンテンツ：充分に小さい背景音

参考情報

• 音声・映像コンテンツのアクセシビリティーを確保する

チェック手順：Web

以下の1651-content-00または1651-content-01を満たしていることを確認する。

1651-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、音声コンテンツが存在しない。

1651-content-01：その他の手段によるチェック方法の例

音声コンテンツは、充分に聴き取りやすい。

チェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、チェックに使用するツールごとにまとめて記しています。

キーボード操作によるチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、キーボード操作によって確認するものをまとめて記しています。

参考：Tab / Shift+Tab キーを用いたチェック

チェックID：0171

キーボードによる操作時、常にフォーカス箇所が視覚的に確認できる

ID 0171-keyboard-01

ページ先頭からTabキーでフォーカスを移動し、常にフォーカス位置を視覚的に確認できることを確認する。

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

ID 0172-keyboard-01

Tab / Shift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェックID：0173

キーボード操作時に、ユーザーが予期しない、またはユーザーの混乱を招くような表示の変化が自動的に発生しない。

ID 0173-keyboard-01

Tab / Shift+Tabキーによるフォーカス移動時に、自動的に次のような挙動が発生しない：

• フォームの送信

• レイアウトの変更

• ページの遷移

• モーダル・ダイアログの表示

• 表示内容の大幅な変更

チェックID：0174

モーダル・ダイアログはキーボードのみで操作できる。

ID 0174-keyboard-01

モーダル・ダイアログが表示された直後にTabキーを押下すると、フォーカスがモーダル・ダイアログ内に移動する。

ID 0174-keyboard-02

モーダル・ダイアログ内で、フォーカスがモーダル・ダイアログの最後の要素に移動するまでTabキーを押した後、再度Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。同様に、Shift+Tabキーを押してフォーカスがモーダル・ダイアログの最初の要素に移動した後、再度Shift+Tabキーを押してもフォーカスはモーダル・ダイアログの外に出ない。

ID 0174-keyboard-03

モーダル・ダイアログが閉じた際、フォーカスはモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻る。

チェックID：0201

キーボードのみの操作で、フォーカスが特定の場所に閉じ込められるような状態が発生しない。

特に注意が必要なコンポーネントの例：

• 動画や音声コンテンツのプレイヤー

• ポップアップ・メニュー

• モーダル・ダイアログ

ID 0201-keyboard-01

ページの先頭から、Tabキーを順に押してフォーカスを移動した際、特定の箇所から抜け出せないような状況が発生しない。

ID 0201-keyboard-02

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。

ID 0201-keyboard-03

Tab / Shift+Tabキーの押下でフォーカスが抜け出せない場合に、そのコンポーネントを非表示にするためのボタンやメニューが存在し、キーボードのみで操作できる。

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

ID 0801-keyboard-01

Tab / Shift+Tabキーでフォーカスを移動した際、複数のページで移動順序が一貫している。

チェックID：0956

ラジオボタンは、キーボードで操作できるようになっている。

ID 0956-keyboard-01

キーボード操作時、以下のすべてを満たしている:

• 同じ質問に対する選択肢など、適切な単位でラジオボタンがグループ化されていて、Tab / Shift+Tabキーでフォーカスを移動した際、グループごとに1つのラジオボタンにしかフォーカスが移動しない。

• グループ内のラジオボタンにフォーカスがある状態で、矢印キーでラジオボタンのグループ内の選択状態を変更でき、選択状態になったラジオボタンにフォーカスが移動する。

• 矢印キーでラジオボタンの選択状態を変更した際、そのグループに属さないラジオボタンへのフォーカスの移動や状態の変更が発生しない。

チェックID：0957

チェックボックスは、キーボードで操作できるようになっている。

ID 0957-keyboard-01

キーボード操作時、以下のすべてを満たしている:

• Tab / Shift+Tabキーでフォーカスを移動した際、到達できないチェックボックスがない。

• スペースキーを押下することで、フォーカスされているチェックボックスのオン/オフ譜を切り替えられる。

チェックID：1071

フォームの操作時に、ユーザーが予期できない挙動が発生しない。

ID 1071-keyboard-01

ページ/画面内の、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールを操作した際、以下のようなあまり一般的ではない挙動が発生しない：

• 表示内容が大幅に変わる

• 自動的に別のページ/画面に遷移する

• ユーザーが既に入力したフィールドの内容が自動的に変更される（特に操作したフィールドよりも前にあるフィールドが変更されるのは望ましくない）

axe DevToolsを用いたチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、axe DevToolsを用いて実施するものをまとめて記しています。

axe DevToolsのインストールや基本的な使用方法については、axe DevToolsを使用したアクセシビリティー・チェックを参照してください。また、axe DevToolsのルールと当ガイドラインの対応も合わせて参照してください。

チェックID：0021

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

ID 0021-axe-01

axe DevToolsで「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)」という問題が出ない。

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

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

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

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

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

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

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

ID 0411-axe-01

axe DevToolsで「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ない。

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

ID 0441-axe-01

axe DevToolsで「画像には代替テキストがなければなりません (Images must have alternative text)」という問題が出ない。

ただし、画像に何かしらの代替テキストが指定されていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

ID 0561-axe-01

axe DevToolsで以下のいずれの問題も出ない。

• 見出しは空にしてはなりません (Headings should not be empty)

• 見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

• ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

チェックID：0621

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

ID 0621-axe-01

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

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

チェックID：0651

ページ/画面には、適切なタイトルが付けられている。

ID 0651-axe-01

axe DevToolsで「ドキュメントにはナビゲーションを補助するために<title>要素がなければなりません (Documents must have <title> element to aid in navigation)」という問題が出ない。

チェックID：0681

スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

ID 0681-axe-01

axe DevToolsで以下のいずれの問題も出ない。

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

ID 0682-axe-01

画面上に表示されているコンテンツに対して、axe DevToolsで以下のいずれの問題も発生しない。（非表示箇所に対して以下の問題が発生しても、通常は問題ない。）

• bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)

• asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)

• contentinfoランドマークは他のランドマークに含まれるべきではありません (Contentinfo landmark should not be contained in another landmark)

• mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)

• ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)

• ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

• ランドマークには一意のロール又はロール／ラベル／タイトル (すなわちアクセシブルな名前) の組み合わせがなければなりません (Landmarks should have a unique role or role/label/title (i.e. accessible name) combination)

• ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

ID 0951-axe-01

axe DevToolsで以下のいずれの問題も発生しない。

• フォーム要素にはラベルがなければなりません (Form elements must have labels)

• select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

• フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

• フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

NVDAを用いたチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、NVDAを用いて実施するものをまとめて記しています。

NVDAのインストール方法や基本的な使い方などについては、NVDAを用いたチェックの実施方法を参照してください。

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

ID 0411-nvda-01

NVDAで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

• ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき

• そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

参考動画：アイコンの役割や示している状態【NVDAでアクセシビリティー チェック】

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

ID 0413-nvda-01

NVDAのブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

参考動画：アイコンの説明が重複しない【NVDAでアクセシビリティー チェック】

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

ID 0441-nvda-01

• NVDAで以下の操作をしたとき、画像の内容を適切に表す簡潔な読み上げがされる。

  • ブラウズ・モードで矢印キーを操作して当該箇所を読み上げさせたとき

  • その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

• 詳細な説明が必要な画像の場合、以下のいずれかを満たしている。

• 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでの矢印キーの操作で読み上げさせることができる

• ブラウズ・モードで矢印キーを操作して当該画像を読み上げさせたとき、詳細な説明が読み上げられる

参考動画：画像の説明【NVDAでアクセシビリティー チェック】

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

ID 0471-nvda-01

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない。

参考動画：情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】

ID 0471-nvda-02

NVDAのブラウズ・モードで以下の操作を行った際、情報や機能性を持たない画像が無視される：

1. Ctrl+Homeを押下してページの先頭に移動

2. Gを押下して次の画像まで移動

3. 「次の画像がありません」という読み上げがあるまで繰り返す

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

ID 0531-nvda-01

NVDAのブラウズ・モードでの矢印キーの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

参考動画：画像化されたテキスト【NVDAでアクセシビリティー チェック】

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

ID 0561-nvda-01

NVDAで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. ブラウズ・モードで要素リストを表示（NVDA+F7）

2. 「種別」を「見出し」に設定（Alt+H）

参考動画：見出し【NVDAでアクセシビリティー チェック】

チェックID：0562

スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。

ID 0562-nvda-01

以下の手順で、ページ上のすべての表をNVDAで発見することができ、かつ、表中のセル間を移動して、セルの内容を適切に読み上げることができる。

• 表の発見：

  1. ブラウズ・モードでページの先頭に移動（Ctrl+Home）

  2. 前後の表への移動（TまたはShift+Tキー）で、表に移動

• 表中のセル間を移動して、セルの内容を読み上げる：

  1. ブラウズ・モードで表の先頭部分を探す

  2. 以下のキー操作でセル間を移動：

     • Ctrl+Alt+←：左のセル

     • Ctrl+Alt+→：右のセル

     • Ctrl+Alt+↓：下のセル

     • Ctrl+Alt+↑：上のセル

セル移動時に読み上げられる内容：

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

• 左右の移動：移動先のセルの列見出し、列の番号、セルの内容

• 上下の移動：移動先のセルの行見出し、行の番号、セルの内容

ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。

• 上下矢印：前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。

• 左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

参考動画：表【NVDAでアクセシビリティー チェック】

チェックID：0591

静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ID 0591-nvda-01

以下のすべてを満たしていることをNVDAで確認：

• ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる

• その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる

• 操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる

• 操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる

参考動画：開閉するボタン【NVDAでアクセシビリティー チェック】

チェックID：0621

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

ID 0621-nvda-01

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

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

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

チェックID：0681

スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

ID 0681-nvda-01

NVDAのブラウズ・モードで、次/前の見出しへの移動（H / Shift+Hキー）を用いて、本文直前の見出しに移動できる。

参考動画：本文の開始位置【NVDAでアクセシビリティー チェック】

ID 0681-nvda-02

NVDAのブラウズ・モードで、次のランドマークへの移動（Dキー）でmain要素の先頭部分に移動でき、その直後から本文が始まっている。

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

ID 0711-nvda-01

NVDAが起動している状態の操作で、以下を満たしている：

• ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

ID 0801-nvda-01

NVDAのブラウズ・モードで上下矢印キーで読み上げさせたとき、複数のページで読み上げ順序が一貫している。

参考動画：同じ出現順序【NVDAでアクセシビリティー チェック】

チェックID：0861

スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。

ID 0861-nvda-01

NVDAのブラウズ・モードでの矢印キーの操作による読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある。

参考動画：現在のページ【NVDAでアクセシビリティー チェック】

チェックID：0921

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

ID 0921-nvda-01

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

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

チェックID：0922

日付、時刻、数値などは、ページやアプリケーションで利用されている自然言語において自然な形で読み上げられる。

ID 0922-nvda-01

NVDAのブラウズ・モードで上下矢印キーを用いて日付、時刻、数値などを読み上げさせたとき、以下のすべてを満たしている。

• 当該箇所の読み上げに用いられる音声は、他の箇所を読み上げさせたときの音声と同じ種類の音声である

• 当該箇所の読み上げが、そのページやアプリケーションで用いられている言語において自然なものになっている（例：日本語が用いられている場合に、「1月1日」を「ジャニュアリーファースト」などと読み上げない）

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

ID 0951-nvda-01

NVDAのフォーカス・モードでTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

チェックID：1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

ID 1191-nvda-01

NVDAを起動した状態で設計資料に従ってステータス・メッセージが表示される操作を行ったとき、表示されたステータス・メッセージが自動的に読み上げられる。

参考：aria-liveを用いた実装において期待される挙動については、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

参考動画：ステータスメッセージ【NVDAでアクセシビリティー チェック】

macOS VoiceOverを用いたチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、macOS VoiceOverを用いて実施するものをまとめて記しています。

macOS VoiceOverの初期設定や基本的な使い方などについては、macOSのVoiceOverを用いたチェックの実施方法を参照してください。

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

ID 0411-macvo-01

macOS VoiceOverで以下の操作をしたとき、アイコンの役割や状態を適切に表す読み上げがされる。

• VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき

• そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

ID 0413-macvo-01

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていない。

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

ID 0441-macvo-01

• macOS VoiceOverで以下の操作をしたとき、画像の内容を適切に表す簡潔な読み上げがされる。

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該箇所を読み上げさせたとき

  • その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift+Tabキーの操作でフォーカスされたとき

• 詳細な説明が必要な画像の場合、以下のいずれかを満たしている。

  • 当該画像の直前または直後に詳細な説明があり、VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせることができる

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該画像を読み上げさせたとき、詳細な説明が読み上げられる

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

ID 0471-macvo-01

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない。

ID 0471-macvo-02

macOS VoiceOverで以下の操作を行った際、情報や機能性を持たない画像が無視される：

1. VO+Homeを押下してページの先頭に移動

2. VO+Command+Gを押下して次の画像まで移動

3. それ以上VoiceOverカーソルが移動しなくなるまで、または「イメージが見つかりません」という読み上げがあるまで繰り返す

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

ID 0531-macvo-01

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる。

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

ID 0561-macvo-01

macOS VoiceOverで以下の操作をして見出しリストを表示したとき、ページ中の見出しが過不足なく表示される。

1. VO+Uを押下してローターのメニューを表示

2. 「見出し」を選択

チェックID：0681

スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

ID 0681-macosvo-01

macOS VoiceOverの次/前の見出しへの移動（VO+Command+H / VO+Command+Shift+Hキー）を用いて、本文直前の見出しに移動できる。

ID 0681-macosvo-02

macOS VoiceOverで以下の以下の操作を行ってmain要素の先頭部分に移動でき、その直後から本文が始まっている。

1. VO+Uキーを押下してローターのメニューを表示

2. 「ランドマーク」を選択

3. 「本文」を選んでEnterキーを押下

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

ID 0711-macvo-01

macOS VoiceOverが起動している状態の操作で、以下を満たしている：

• VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

ID 0801-macvo-01

macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせたとき、複数のページで読み上げ順序が一貫している。

チェックID：0861

スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。

ID 0861-macvo-01

macOS VoiceOverのVOキーと左右矢印キーによる読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある。

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

ID 0951-macvo-01

macOS VoiceOver有効時にTab / Shift+Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられる。

iOS VoiceOverを用いたチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、iOS VoiceOverを用いて実施するものをまとめて記しています。

iOS VoiceOverの基本的な使い方や推奨設定などについては、iOS VoiceOverを用いたチェックの実施方法を参照してください。

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

ID 0172-iosvo-01

iOS VoiceOver有効時に1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

• 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

• 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

• 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

ID 0411-iosvo-01

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

ID 0413-iosvo-01

iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

ID 0441-iosvo-01

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認するる。

• 読み上げられる説明が画像の内容を適切に表していることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

ID 0471-iosvo-01

iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

ID 0531-iosvo-01

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

ID 0561-iosvo-01

iOS VoiceOverのローター・ジェスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

ID 0711-iosvo-01

iOS VoiceOverが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

ID 0801-iosvo-01

iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

ID 1191-iosvo-01

iOS VoiceOverが起動している状態で設計資料に従ってステータス・メッセージが表示される操作を行い、表示されたステータス・メッセージが自動的に読み上げられることを確認する。

Android TalkBackを用いたチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、Android TalkBackを用いて実施するものをまとめて記しています。

Android TalkBackの基本的な使い方や推奨設定などについては、Android TalkBackを用いたチェックの実施方法を参照してください。

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

ID 0172-androidtb-01

Android TalkBack有効時に1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

• 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

• 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

• 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

ID 0411-androidtb-01

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

ID 0413-androidtb-01

Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

ID 0441-androidtb-01

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認する。

• 読み上げられる説明が画像の内容を適切に表していることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

ID 0471-androidtb-01

Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

ID 0531-androidtb-01

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

• （フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

ID 0561-androidtb-01

Android TalkBackの読み上げコントロールの設定で「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

ID 0711-androidtb-01

Android TalkBackが有効な状態で、以下を確認する：

• 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

ID 0801-androidtb-01

Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。

参考：1本指による右および左方向へのフリック

チェックID：1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

ID 1191-androidtb-01

Android TalkBackが起動している状態で設計資料に従ってステータス・メッセージが表示される操作を行い、表示されたステータス・メッセージが自動的に読み上げられることを確認する。

その他の手段によるチェック実施方法の例

ここでは、各チェック内容で示したチェック方法の例について、その他の手段で確認するものをまとめて記しています。

チェックID：0001

アイコンや画像に関して、3:1以上のコントラスト比が確保されている。

ID 0001-content-00

チェック対象の画面に、アイコンや画像が存在しない。

ID 0001-content-01

画像内の重要な情報やアイコンと、その背景色とのコントラスト比が3:1以上である。

ID 0001-content-02

画像や画像化されたテキストと、その隣接領域とのコントラスト比が3:1以上である。

チェックID：0021

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

ID 0021-webaim-01

WebAIM Contrast Checkerで、以下の基準を満たしていることを確認した：

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

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

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

チェックID：0081

リンクやボタンなど、マウス・クリックを受け付けるオブジェクトにおいて、マウス・ボタン押下後にもその操作を中止することができる。

注：ドラッグ&ドロップのためのオブジェクトはこのチェックの対象外

ID 0081-mouse-01

マウスで以下の操作をしたとき、何も実行されない：

1. マウス・ポインターをオブジェクト上に移動

2. マウス・ボタンを押下

3. マウス・ボタンを押下したままの状態でオブジェクト外にマウス・ポインターを移動

4. マウス・ボタンを放す

チェックID：0091

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない設計になっている。

ID 0091-content-00

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

ID 0091-content-01

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる機能が定義されている。（例：ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

ID 0091-content-02

マウスオーバーで表示されたコンテンツが非表示になるのは、マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合のみであることが設計資料に明記されている。

チェックID：0092

マウスオーバーで表示されるコンテンツは、拡大表示が可能な設計になっている。

ID 0092-content-00

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

ID 0092-content-01

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない設計になっている。

チェックID：0111

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない。

ID 0111-content-00

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

ID 0111-mouse-01

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

ID 0111-mouse-02

マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、マウスオーバーで表示されたコンテンツが非表示になる。

チェックID：0112

マウスオーバーで表示されるコンテンツは、拡大表示が可能。

ID 0112-content-00

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

ID 0112-mouse-01

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない。

チェックID：0141

ショートカット・キーが支援技術の動作を妨げないようになっている。

ID 0141-content-00

チェック対象の画面では、ショートカット・キーが提供されていない。

ID 0141-content-01

ショートカット・キーは、画面の特定の部分にフォーカスがある時だけ利用できるようになっている。

ID 0141-content-02

ユーザーがショートカット・キーを無効にできる。

ID 0141-content-03

ユーザーがショートカット・キーの割当を変更できる。

チェックID：0151

フォーカスされている場所が視認できるようになっている。

ID 0151-content-01

フォーカス・インジケーターについて、ブラウザーのデフォルトのものから変更していない。

ID 0151-content-02

フォーカス・インジケーターが設計資料で明示されている。

チェックID：0155

モーダル・ダイアログがキーボードのみで操作できる設計になっている。

ID 0155-content-00

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

ID 0155-content-01

モーダル・ダイアログが閉じた際、フォーカスがモーダル・ダイアログが開く直前の位置、またはそれに隣接した位置に戻るような設計になっていて、フォーカスが戻るべき位置が設計資料で明示されている。

チェックID：0174

モーダル・ダイアログはキーボードのみで操作できる。

ID 0174-content-00

チェック対象の画面では、モーダル・ダイアログが表示されることはない。

チェックID：0211

すべての操作がキーボードのみでできるように設計されている。

ID 0211-content-00

チェック対象の画面には、静的なテキストのみが存在し、クリックやマウスオーバーなどのマウス操作を受け付けるもの（リンク、ボタン、フォーム・コントロールその他）は存在しない。

ID 0211-content-01

クリックやマウスオーバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる設計になっている。

チェックID：0231

すべての操作はキーボードのみで可能である。

ID 0231-content-00

チェック対象の画面には、静的なテキストのみが存在し、クリックやマウスオーバーなどのマウス操作を受け付けるもの（リンク、ボタン、フォーム・コントロールその他）は存在しない。

ID 0231-content-01

クリックやマウスオーバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

チェックID：0241

リンクは、リンク先が容易に推測できるようなテキストで提供されている。

ID 0241-content-00

チェック対象の画面に、リンクが存在しない。

ID 0241-content-01

「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）

ID 0241-content-02

リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）

チェックID：0242

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

ID 0242-content-00

チェック対象の画面には、リンクやボタンが存在しない。

ID 0242-content-01

チェック対象の画面には、リンク先が同じ複数のリンクが存在しない。

ID 0242-content-02

チェック対象の画面には、目的が同じ複数のボタンが存在しない。

ID 0242-content-03

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

チェックID：0261

リンクは、リンク先が容易に推測できるようなテキストで提供されている。

ID 0261-content-00

チェック対象の画面に、リンクが存在しない。

ID 0261-content-01

「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）

ID 0261-content-02

リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）

チェックID：0262

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

ID 0262-content-00

チェック対象の画面には、同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンが存在しない。

ID 0262-content-01

同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。

チェックID：0301

ブラウザーのズーム機能で400%に拡大表示しても、特定のレイアウトを保持する必要があるコンテンツを除き、適切にリフローされるように設計されている。

特定のレイアウトを保持する必要があるコンテンツの例：

• 巨大な表

• 印刷のプレビュー

• スキャンされた画像のプレビュー

ID 0301-content-01

チェック対象のページは横書きのコンテンツである。

ID 0301-content-02

ブラウザー・ウィンドウの幅に応じてレイアウトを切り替え、幅320pxでも横スクロールが表示されない設計になっている。

ID 0301-content-03

ブラウザー・ウィンドウの幅が320pxのときに、横スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

ID 0301-content-04

チェック対象のページは縦書きのコンテンツである。

ID 0301-content-05

ブラウザー・ウィンドウの高さに応じてレイアウトを切り替え、高さ256pxでも縦スクロールが表示されない設計になっている。

ID 0301-content-06

ブラウザー・ウィンドウの高さが256pxのときに、縦スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

チェックID：0322

ブラウザーのズーム機能で400%に拡大表示しても、特定のレイアウトを保持する必要があるコンテンツを除き、適切にリフローされる。

特定のレイアウトを保持する必要があるコンテンツの例：

• 巨大な表

• 印刷のプレビュー

• スキャンされた画像のプレビュー

ID 0322-content-01

チェック対象のページは横書きのコンテンツである。

ID 0322-content-02

幅が1280pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときも、横スクロールを必要としないレイアウトになっている。

ID 0322-content-03

幅が1280pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに横スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

ID 0322-content-04

チェック対象のページは縦書きのコンテンツである。

ID 0322-content-05

高さが1024pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときも、縦スクロールを必要としないレイアウトになっている。

ID 0322-content-06

高さが1024pxのウィンドウにおいて、ブラウザーのズーム機能を用いて400パーセントの拡大表示をしたときに縦スクロールを必要とする部分は、特定のレイアウトを保持する必要があるコンテンツである。

チェックID：0331

ボタンやリンクになっている画像は、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

ID 0331-content-00

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

ID 0331-content-01

リンクやボタンになっている画像について、クリックやタッチに反応する領域が設計資料で明示されている。

ID 0331-content-02

ボタンやリンクになっている画像のクリックやタッチに反応する領域のサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

チェックID：0332

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールは、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

ID 0332-content-00

チェック対象の画面には、フォーム・コントロールが存在しない。

ID 0332-content-01

フォーム・コントロールの見た目をブラウザーのデフォルト表示から変更するような指示が設計資料に存在しない。

ID 0332-content-02

フォーム・コントロールのクリックやタッチに反応する領域が、設計資料で明示されている。

ID 0332-content-03

フォーム・コントロールのクリックやタッチに反応する領域のサイズは、以下の条件を満たしている：

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

チェックID：0351

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

ID 0351-content-00

チェック対象の画面に、ボタンやリンクになっている画像が存在しない。

ID 0351-content-01

ボタンやリンクになっている画像のクリックやタッチに反応するサイズが、デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上に、モバイル向けWebでは44 x 44 CSS px以上になっている。

チェックID：0352

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールは、クリックやタッチに反応するサイズが、充分な大きさになっている。

ID 0352-content-00

チェック対象の画面には、フォーム・コントロールが存在しない。

ID 0352-content-01

フォーム・コントロールの見た目は、ブラウザーのデフォルト表示から変更されていない。

ID 0352-content-02

フォーム・コントロールのクリックやタッチに反応するサイズは、以下の条件を満たしている：

• デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

• モバイル向けWebでは44 x 44 CSS px以上

チェックID：0361

マウスオーバー時に表示される情報や実行できる機能は、キーボードだけで操作している場合やタッチUIで操作している場合にも表示・実行できるような設計になっている。

ID 0361-content-00

チェック対象の画面には、マウスオーバー時にのみ表示される情報や実行できる機能が存在しない。

ID 0361-content-01

マウスオーバー時に表示される情報や実行できる機能について、キーボードのみで操作する方法やタッチUIで操作する方法が設計資料に明示されている。

チェックID：0391

アイコンは、その役割や示している状態が伝わるようになっている。

ID 0391-content-00

チェック対象の画面には、アイコンが存在しない。

ID 0391-content-01

アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。

ID 0391-content-02

アイコンは、色の違いだけで異なる役割や示している状態を表さず、形状（モチーフ）やサイズでも違いが示されている。

ID 0391-content-03

役割や意味がわかるような代替テキスト（alt属性のまたはaria-label属性の値）が設計資料で明示されている。

チェックID：0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

ID 0411-content-00

チェック対象の画面にアイコンが存在しない。

チェックID：0412

テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）

ID 0412-content-00

チェック対象の画面に、テキストのラベルが併せて表示されていないアイコンが存在しない。

ID 0412-content-01

テキストのラベルが合わせて表示されていないアイコンで異なる状態や機能を表しているものは、色以外の視覚的な違いもある。

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

ID 0413-content-00

チェック対象の画面にアイコンが存在しない。

チェックID：0421

画像の内容が過不足なく伝わるテキストによる説明が、設計資料に明示されている。

ID 0421-content-00

チェック対象の画面には、画像が存在しない。

ID 0421-content-01

画像が示す内容を簡潔に示す代替テキストが、設計資料に明示されている。

ID 0421-content-02

代替テキストによる説明は、画像の内容を過不足なく伝えるもので、その情報の理解やページの利用に当たって必要な情報が含まれている。

ID 0421-content-03

代替テキストによる簡潔な説明では不十分な場合、詳細な説明のテキストと、その実装方法（例：aria-describedby属性やfigcaption要素の利用、画像の直前または直後への掲載など）が設計資料に明示されている。

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

ID 0441-content-00

チェック対象の画面に画像が存在しない、または装飾目的のもののみである。

チェックID：0451

情報や機能性を一切持たない画像は、スクリーン・リーダーに無視されるようになっている。

ID 0451-content-00

チェック対象の画面には、情報や機能性を持たない画像が存在しない。

ID 0451-content-01

情報や機能性を持たない画像について、代替テキスト（alt属性またはaria-label属性の値）を空にすべきこと、またはrole="presentation"を指定すべきことが設計資料で明示されている。

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

ID 0471-content-00

チェック対象の画面には、情報や機能性を持たない画像が存在しない。

チェックID：0511

画像化されたテキストを用いていない。

ID 0511-content-00

チェック対象の画面には、テキスト情報を含む画像はまったく存在しない。

ID 0511-content-01

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、テキスト情報を含む画像が存在しない。

ID 0511-content-02

テキスト情報を含む画像について、その内容が適切に伝わる代替テキストが設計資料で明示されている。

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

ID 0531-content-00

チェック対象の画面には、画像化されたテキストはまったく存在しない。

ID 0531-content-01

チェック対象の画面には、自社および他社のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストが存在しない。

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

ID 0561-content-00

チェック対象は、モーダル・ダイアログで、設計資料で見出しが示されていない。

チェックID：0562

スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。

ID 0562-content-00

チェック対象の画面に表が存在しない。

チェックID：0581

独自実装が必要なUIコンポーネントのアクセシビリティー確保に必要な情報が、設計資料に明示されている。

ID 0581-content-00

チェック対象の画面には、独自実装が必要なUIコンポーネントが存在しない。

ID 0581-content-01

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

チェックID：0591

静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ID 0591-content-00

チェック対象の画面には、静的なテキストしか存在しない。

チェックID：0631

そのページ/画面の適切なタイトルが設計資料に明示されている。

ID 0631-content-00

チェック対象はモーダル・ダイアログである。

ID 0631-content-01

そのページ/画面のタイトルは、ページ/画面の目的を示し、かつ他のページ/画面とは異なるものになっている。

チェックID：0651

ページ/画面には、適切なタイトルが付けられている。

ID 0651-content-00

チェック対象はモーダル・ダイアログである。

ID 0651-content-01

ブラウザーのタイトルバーまたはタブバーに表示されているそのページ/画面のタイトルは、ページ/画面の目的を示し、かつ他のページ/画面とは異なるものになっている。

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

ID 0682-content-00

チェック対象はモーダル・ダイアログである。

ID 0682-misc-01

Landmark Navigation via Keyboard or Pop-upをインストールしたブラウザーで表示した際、コンテンツのすべてのパーツが適切なARIAランドマークの領域に属している。

チェックID：0781

グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている要素は、すべてのページで一貫性のある形で用いられている。

ID 0781-content-00

チェック対象の画面には、複数のページ/画面で共通に用いられている要素が存在しない。

ID 0781-content-01

複数のページ/画面で共通に用いられている要素について、すべてのページで一貫した出現順序になっている。

ID 0781-content-02

これらの要素の中でのリンクやボタンの出現順序は、すべてのページで同じになっている。

チェックID：0801

• グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ

• これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

ID 0801-content-00

チェック対象はモーダル・ダイアログである。

チェックID：0811

そのページへは、複数の異なるページから到達できる。

ID 0811-content-00

チェック対象のページは、特定の文脈で表示されなければ意味がないページである。

例：

• ウィザードの途中で表示されるページ

• 操作結果の表示など、特定の操作をしたときのみ表示されるページ

ID 0811-content-01

チェック対象のページには、グローバル・ナビゲーション中のリンクから到達できる。

ID 0811-content-02

チェック対象のページへは、特定のページ中のリンクから遷移できることに加えて、何らかの別の方法でも到達できる。

例：

• ヘルプページからのリンク

• サイトマップからのリンク

• サイト内検索の結果からのリンク

• 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示されるページからのリンク

チェックID：0841

そのページ/画面のサイトやアプリケーション内での位置がグローバル・ナビゲーションやパンくずリスト内で示されている。

ID 0841-content-00

チェック対象の画面には、グローバル・ナビゲーションやパンくずリストが存在しない。

ID 0841-content-01

グローバル・ナビゲーションやパンくずリスト内で、そのページ/画面のサイトやアプリケーション内での位置が視覚的に分かるように示されている。

ID 0841-content-02

グローバル・ナビゲーションやパンくずリスト内で、そのページ/画面のサイトやアプリケーション内での位置を示す要素に、適切なaria-current属性の値が指定されている。

チェックID：0861

スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。

ID 0861-content-00

チェック対象はモーダル・ダイアログである。

チェックID：0862

グローバル・ナビゲーションやパンくずリスト内で、そのページが対応する要素が分かるような表示がされている。

ID 0862-content-00

チェック対象はモーダル・ダイアログである。

ID 0862-content-01

グローバル・ナビゲーションやパンくずリスト内で、そのページが対応する要素が分かるような表示がされている。

チェックID：0921

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

ID 0921-content-00

チェック対象の画面には、単一の言語のテキストしか存在しない。

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

ID 0931-content-00

チェック対象の画面には、フォーム・コントロールが存在しない。

ID 0931-content-01

フォーム・コントロールのラベルとして適切なテキストまたは代替テキストが付加された画像が画面上にある場合、設計資料にその対応関係が明示されている。

ID 0931-content-02

画面上にラベルとして適切なテキストが表示されていない場合、フォーム・コントロールのラベルとして指定すべきテキストとその実装方法（例：aria-label属性を利用するなど）が設計資料に明示されている。

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

ID 0951-content-00

チェック対象の画面に、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールが存在しない。

チェックID：0956

ラジオボタンは、キーボードで操作できるようになっている。

ID 0956-content-00

チェック対象の画面にラジオボタンが存在しない。

チェックID：0957

チェックボックスは、キーボードで操作できるようになっている。

ID 0957-content-00

チェック対象の画面にチェックボックスが存在しない。

チェックID：1071

フォームの操作時に、ユーザーが予期できない挙動が発生しない。

ID 1071-content-00

チェック対象の画面にフォーム・コントロールが存在しない。

ID 1071-content-01

フォーム操作時に1071-keyboard-01で示すような挙動が発生する場合、そのような挙動が発生することを明示的にユーザーに伝えている。

チェックID：1081

設計資料には、フォーム入力でエラーが発生したときに表示される、エラー内容が分かる具体的な文言が明示されている。

ID 1081-content-00

チェック対象の画面には、入力フォームが存在しない。

ID 1081-content-01

フォーム入力時に発生することが想定されるすべてのエラーについて、それぞれ具体的なエラーの内容が分かるメッセージが表示されるような設計になっている。

チェックID：1101

フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。

ID 1101-content-00

チェック対象の画面には、入力フォームがない。

ID 1101-content-01

エラーが発生するフォーム入力を行うと、エラー内容が具体的に分かるテキスト情報が表示される。

チェックID：1111

フォーム入力に関するエラーについて、エラーの修正方法が分かるエラー・メッセージが設計資料で明示されている。

ID 1111-content-00

チェック対象の画面には、入力フォームが存在しない。

ID 1111-content-01

フォーム入力時に発生することが想定されるすべてのエラーについて、それぞれエラーの修正方法が分かるエラー・メッセージが表示されるような設計になっている。

チェックID：1131

フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。

ID 1131-content-00

チェック対象の画面には、入力フォームがない。

ID 1131-content-01

エラーが発生するフォーム入力を行うと、エラーの修正方法が分かるテキスト情報が表示される。

チェックID：1141

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

ID 1141-content-00

チェック対象の画面には、法的行為、経済的取引、データの変更や削除を生じる機能が存在しない。

ここで「データの変更や削除」とは、ユーザーが簡単な操作により元の状態を完全に復元できないものを指す。簡単な操作とは、ボタン操作や、少しの文字入力などである。

ID 1141-content-01

法的行為、経済的取引、データの変更や削除を生じる機能について、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。

チェックID：1171

ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。

ID 1171-content-00

チェック対象の画面には、ステータス・メッセージとして扱われるべきメッセージが存在しない。

ID 1171-content-01

ステータス・メッセージとして扱われるべきメッセージについて、表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があることが設計資料で明示されている。

チェックID：1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

ID 1191-content-00

チェック対象の画面では、ステータス・メッセージは表示されない。

チェックID：1231

ユーザーの集中を阻害するような、自動更新されるコンテンツがない。

ID 1231-content-00

チェック対象の画面に自動更新されるコンテンツがない。

ID 1231-content-01

ユーザーが、自動更新されるコンテンツの更新頻度を変更できるようになっている。

ID 1231-content-02

ユーザーが自動更新を停止できるようになっている。

チェックID：1251

ユーザーの集中を阻害するような、自動更新されるコンテンツがない。

ID 1251-content-00

チェック対象の画面に自動更新されるコンテンツがない。

ID 1251-content-01

ユーザーが、自動更新されるコンテンツの更新頻度を変更できる。

ID 1251-content-02

ユーザーが自動更新を停止できる。

チェックID：1411

ページ内に音声や動画プレイヤーが埋め込まれている場合、その事実が容易に認知できる。

ID 1411-content-00

チェック対象の画面に音声や動画プレイヤーは埋め込まれていない。

ID 1411-content-01

ページに埋め込まれている音声や動画のプレイヤーには、そこにプレイヤーがあることが分かるようなラベルが適切に付けられている。

ID 1411-content-02

ページに埋め込まれている音声や動画のプレイヤーは、前後のテキストから、そこにプレイヤーがあることが推測できるようになっている。

チェックID：1441

スクリーン・リーダーの音声出力を阻害するような、音声を含む自動再生されるコンテンツがない。

ID 1441-content-00

チェック対象の画面に、音声を含む自動再生されるコンテンツがない。

ID 1441-content-01

音声を含む自動再生されるコンテンツは、3秒以内に音声の再生が終了する。

チェックID：1451

ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。

ID 1451-content-00

チェック対象の画面に自動再生される動画やアニメーションがない。

ID 1451-content-01

ユーザーが、自動再生される動画やアニメーションの再生頻度を変更できるようになっている。

ID 1451-content-02

ユーザーが自動再生を停止できるようになっている。

チェックID：1471

ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。

ID 1471-content-00

チェック対象の画面に、自動再生される動画やアニメーションがない。

ID 1471-content-01

自動再生される動画やアニメーションは、5秒以内に再生が終了する。

ID 1471-content-02

ユーザーが、自動再生される動画やアニメーションを停止、一時停止、または非表示にできる。

チェックID：1481

音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

ID 1481-content-00

チェック対象の画面に音声・映像コンテンツがない。

ID 1481-content-01

音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がないような内容である。

ID 1481-content-02

音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることがユーザーに対して明示されている。

チェックID：1501

音声・映像コンテンツは、そのコンテンツがなくても不足なくその画面で提供されている情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

ID 1501-content-00

チェック対象の画面に、音声コンテンツ、動画、アニメーションがない。

ID 1501-content-01

音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がない。

ID 1501-content-02

音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることが明示されている。

チェックID：1511

音声を含むコンテンツには、同期したキャプションが提供されている。

ID 1511-content-00

チェック対象の画面に音声を含むコンテンツがない。

ID 1511-content-01

音声を含むコンテンツには、同期したキャプションが提供されている。

チェックID：1531

音声を含むコンテンツには、同期したキャプションが提供されている。

ID 1531-content-00

チェック対象の画面に、音声を含むコンテンツが存在しない。

ID 1531-content-01

音声を含むコンテンツには、同期したキャプションが提供されている。

チェックID：1541

動画コンテンツは、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできるようになっている。

ID 1541-content-00

チェック対象の画面に、動画コンテンツが存在しない。

ID 1541-content-01

動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。

ID 1541-content-02

音声トラックは、映像の内容を容易に推測できるような内容になっている。

ID 1541-content-03

音声解説を提供している。

ID 1541-content-04

映像に関するテキストによる説明を提供している。

チェックID：1542

すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。

ID 1542-content-00

チェック対象の画面に、動画コンテンツが存在しない。

ID 1542-content-01

音声トラックは、映像の内容を容易に推測できるような内容になっている。

ID 1542-content-02

音声解説を提供している。

チェックID：1561

動画について、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできる。

ID 1561-content-00

チェック対象の画面に、動画コンテンツが存在しない。

ID 1561-content-01

動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。

ID 1561-content-02

動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。

ID 1561-content-03

動画には音声解説が含まれている。

ID 1561-content-04

映像に関するテキストによる説明が提供されている。

チェックID：1562

すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。

ID 1562-content-00

チェック対象の画面に、動画コンテンツが存在しない。

ID 1562-content-01

動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。

ID 1562-content-02

動画には音声解説が含まれている。

チェックID：1571

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

ID 1571-content-00

チェック対象の画面に、音声コンテンツが存在しない。

ID 1571-content-01

音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。

ID 1571-content-02

その音声コンテンツを書き起こしたテキストを提供している。

チェックID：1591

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

ID 1591-content-00

チェック対象の画面に、音声コンテンツが存在しない。

ID 1591-content-01

音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。

ID 1591-content-02

その音声コンテンツを書き起こしたテキストが提供されている。

チェックID：1601

音声を含むコンテンツには同期した手話通訳が提供されている。

ID 1601-content-00

チェック対象の画面に、音声を含むコンテンツが存在しない。

ID 1601-content-01

音声を含むコンテンツには、同期した手話通訳を提供している。

チェックID：1621

音声を含む情報には同期した手話通訳が提供されている。

ID 1621-content-00

チェック対象の画面に、音声を含むコンテンツが存在しない。

ID 1621-content-01

音声を含むコンテンツには、同期した手話通訳が提供されている。

チェックID：1631

音声を含むコンテンツにおいて、背景音は適切な音量になっている。

ID 1631-content-00

チェック対象の画面に、音声コンテンツが存在しない。

ID 1631-content-01

音声コンテンツは、充分に聴き取りやすい。

チェックID：1651

音声を含むコンテンツにおいて、背景音は適切な音量になっている。

ID 1651-content-00

チェック対象の画面に、音声コンテンツが存在しない。

ID 1651-content-01

音声コンテンツは、充分に聴き取りやすい。

チェック実施用Googleスプレッドシート

各チェック内容ごとの情報をまとめたGoogleスプレッドシートを公開しています。

• アクセシビリティー・チェック・リスト一般公開用

Google Drive上でこのスプレッドシートのコピーを作成してご利用ください。

アクセシビリティー・チェック・リストのバージョン番号について

アクセシビリティー・チェック・リストには便宜上バージョン番号を記載しています。本稿執筆時点の最新版では、一枚目のシートのセルA24に記載しています。

V3.0.0以降、バージョン番号は、メジャー・バージョン番号、マイナー・バージョン番号、リビジョン番号の3つの数字をピリオド（.）で区切って記しています。例えば、バージョン番号が3.0.1の場合、メジャー・バージョン番号が3、マイナー・バージョン番号が0、リビジョン番号が1です。

それぞれの番号は、以下に示す方針で更新しています。

メジャー・バージョン

チェック・リストの構成の変更など、大幅な変更を伴う場合

マイナー・バージョン

チェック内容の追加、削除や、意図の変更を伴う既存のチェック内容の変更がある場合

リビジョン

誤字修正や意図の変更を伴わない文言の変更など、チェックの結果に影響を及ぼさない変更のみの場合

アクセシビリティー・チェック・リスト更新履歴

V7.0.0 (2025年8月7日)

• 対象がデザイン、対象プラットフォームがWebのチェックシートについて、対象がプロダクト、プラットフォームがWebと同様の記入方法に変更し、チェック内容を見直し

• 画像化されたテキストに関するチェック内容を一部見直し、チェックID：0481をチェックID：0511に統合

• 対象が「プロダクト」のリフローに関するチェック内容の文言とチェック方法の例を見直し：チェックID：0322

• 対象が「デザイン」のチェックに、リフローに関するチェック内容を追加：チェックID：0301

• チェック内容のうち、チェック対象がモーダル・ダイアログの場合にチェックの実施が不要なものを明示：チェックID：0561、チェックID：0631、チェックID：0651、チェックID：0682、チェックID：0801、チェックID：0861、チェックID：0862

• チェックID：0171を見直し、内容の一部を分離してチェックID：0173を新設

• チェックID：1312を見直し、内容の一部を分離してチェックID：0174を新設

• チェックID：0174に対応する、対象が「デザイン」のチェック内容を追加：チェックID：0155

• チェックID：0811について、具体的な判断例を追加

• 一部文言の見直し

• 誤字修正

V6.1.0 (2025年4月18日)

• 対象がプロダクト、対象プラットフォームがWebのチェック内容について、チェック対象に該当するコンテンツが存在しないことを明示的に確認するように手順を追加

V6.0.0 (2024年12月16日)

• チェックシートへのチェック結果の記入方法に関する見直しを実施し、対象がプロダクトの項目について文言を見直し

• チェックID：0471にチェック方法の例を追加

• チェックID：0461の実装方法の例に項目追加

V5.1.0 (2024年9月26日)

• 新ガイドライン項目、入力ディバイス：モバイルOS標準のジェスチャーによる操作に対応するデザイン対象のチェック内容を追加：チェックID：0154

V5.0.2 (2024年8月19日)

• チェックID：0411のチェック方法の例に、読み上げられる内容の適切さの確認を明示

V5.0.1 (2024年8月16日)

• チェックID：0681に、axe DevToolsによるチェック方法の例を追加

• 誤字修正

V5.0.0 (2024年8月9日)

• 対象が「プロダクト」のチェック内容について見直し

  • チェック手順を示しているものの一部について、チェック方法の例を複数に分割して記述

  • 複数のチェック方法の例が示されている場合に、各チェック方法によるチェック結果の状態を反映してチェック結果を判定する仕組みを、アクセシビリティー・チェック・リストに追加

  • freee社内でのチェック実施状況に合わせて、各チェック内容のアクセシビリティー・チェック・リストへの掲出順序を変更

V4.3.7 (2024年2月15日)

• プロダクト：Web以外のチェックシートの英語版を追加

• 一部、意図が明確になるように文言を修正

• 誤字修正

V4.3.6 (2024年2月13日)

• チェックID：0361の文言を変更し、タッチUIにも言及

V4.3.5 (2024年2月6日)

• チェックID：0361の文言変更

• 誤字修正

V4.3.4 (2024年1月15日)

• 全体的に「ホバー」を「マウスオーバー」に変更

• ガイドライン項目のタイトルを英訳し、英語版チェックシートに反映

V4.3.3 (2023年12月11日)

• 誤字修正

V4.3.2 (2023年11月27日)

• macOS VoiceOverによるチェック方法の例を追加：チェックID：0411、チェックID：0413、チェックID：0441、チェックID：0471、チェックID：0531、チェックID：0561、チェックID：0681、チェックID：0711、チェックID：0801、チェックID：0861、チェックID：0951

V4.3.1 (2023年10月13日)

• 動的コンテンツにおける「スクロール」を「自動スクロール」に文言変更：チェックID：1201、チェックID：1221

V4.3.0 (2023年9月26日)

• チェックID：0991をチェックID：0961に統合

• チェックID：1151をチェックID：1321に統合

V4.2.0 (2023年8月8日)

• フォームのラベルに関するチェックについて、重篤度を[MAJOR]に変更: チェックID：0931、チェックID：0941、チェックID：0951

• フォーム: キーボード操作を可能にするの追加に伴って、対応するチェック内容を追加: チェックID：0956、チェックID：0957

• チェックID：0441で、画像を説明するテキストの内容の適切さについても確認する必要があることを明記

• axe DevToolsによるチェック方法の例を追加: チェックID：0411

• axe DevToolsによるチェック方法の例を更新: チェックID：0951

V4.1.0 (2023年7月20日)

• コントラスト比関連のガイドラインでの基準変更に伴う変更：チェックID：0001、チェックID：0002、チェックID：0021

  • コントラスト比要件が3:1以上の場合の文字サイズについて、ピクセル単位での記述を修正

  • [SHOULD]の要件を削除

• コントラスト比関連のガイドラインについて、モバイル対象のものを新設したことに伴い、チェックID：0002の対象プラットフォームをWebのみとし、チェックID：0003を追加

V4.0.0 (2023年6月16日)

• 対象が「プロダクト」のシートについて、チェック手順の例も合わせて掲載するように構成を変更

• 対象が「プロダクト」のチェック内容について、全体的に文言の見直しを実施（チェック結果に影響しない変更のみ）

V3.5.6 (2023年3月20日)

• チェックID：0562の誤字修正とマークアップの修正

V3.5.5 (2023年3月6日)

• チェックID：0032の意図が明確になるように文言変更。

• チェックID：0922

  • 文言を一部変更

  • 英訳を追加

V3.5.4 (2023年2月20日)

• 誤字修正

• 一部マークアップの修正

V3.5.3 (2023年1月27日)

• チェックID：0561の意図が明確になるように文言変更。

• チェックID：0771の重篤度を[NORMAL]に変更

• チェックID：0922について、NVDAを用いたチェック実施方法の例を追加

• プロダクト：Webのチェックシートの英語版を追加

V3.5.2 (2022年10月11日)

• Ver. 202209.0でのテキスト表示のカスタマイズの修正に合わせて、チェックID：0891を修正

• テキストの拡大に関連するガイドラインの文言修正に伴う修正：チェックID：0321、チェックID：0322、チェックID：0323、チェックID：0324

• チェックID：0201の意図を明確にするための文言修正と、チェック方法の例の改善

• その他、意図を明確にするための文言の修正：チェックID：0171、チェックID：0531、チェックID：1251

V3.5.1 (2022年9月22日)

• チェックID：0621の意図が明確になるように文言修正

V3.5.0 (2022年9月6日)

• 見出し関連のチェックの見直し

  • チェックID：0543を追加

  • チェックID：0551にAndroidにおける見出しの実装方法例を追加

• 手話に関連するチェックの重篤度を[MINOR]に変更：チェックID：1601、チェックID：1621

• チェックID：0951のaxe DevToolsによるチェック方法に加筆

• モバイル・アプリケーションの観点からのガイドライン見直しに伴う変更

  • チェックID：0153を追加

  • チェックID：0326を追加

  • チェックID：0331の文言を見直し、対象プラットフォームからモバイルを削除

  • チェックID：0332の文言を見直し、対象プラットフォームからモバイルを削除

  • チェックID：0333を追加

  • チェックID：0334を追加

  • チェックID：0351の文言を見直し、対象プラットフォームからモバイルを削除

  • チェックID：0352の文言を見直し、対象プラットフォームからモバイルを削除

  • チェックID：0361の文言を見直し、対象プラットフォームからモバイルを削除

  • チェックID：0362を追加

  • チェックID：0371の文言を見直し、対象プラットフォームからWebを削除

  • チェックID：0542の対象プラットフォームからモバイルを削除

  • チェックID：0554を追加

  • チェックID：0586の文言の見直し

  • チェックID：0621の対象プラットフォームからモバイルを削除

  • チェックID：0631の対象プラットフォームからモバイルを削除

  • チェックID：0851の対象プラットフォームからモバイルを削除

  • チェックID：0912を追加

  • チェックID：0921の対象プラットフォームからモバイルを削除

  • チェックID：0922を追加

V3.4.0 (2022年3月29日)

• モーダル・ダイアログに関連するチェックの見直し

  • チェックID：1291、チェックID：1311からモーダル・ダイアログに関する記述を削除

  • 新たにチェックID：1292、チェックID：1312、チェックID：1313を追加

• チェックID：0081の意図が明確になるように文言修正

• チェックID：0811に例外があることを明示。

• チェックID：0413のiOS VoiceOverとAndroid TalkBackによる確認方法の文言修正と、NVDAによる確認方法の追加

• チェックID：0621に、axe-DevToolsによる確認方法を追加

V3.3.0 (2022年2月18日)

• チェックID：0553を追加

V3.2.1 (2022年1月20日)

• チェックID：0682について、axe DevToolsを用いたチェック方法を追加

V3.2.0 (2022年1月11日)

• チェックID：0682を追加

• 対象がデザインのチェック内容について、全般的に文言見直し

V3.1.0 (2022年1月4日)

• クリック/タッチのターゲット・サイズに関するチェックの変更

  • アイコンに関するものとフォーム・コントロールに関するものを分離：チェックID：0331、チェックID：0351を修正し、チェックID：0332、チェックID：0352を追加

  • デザイン時のチェックで、クリック/タッチを受け付ける領域が設計資料に明示されていることを確認する必要があることを明記：チェックID：0331、チェックID：0332

V3.0.2 (2021年11月19日)

• ガイドラインVer. 202111.0の変更を反映する調整

V3.0.1 (2021年10月11日)

• 一時削除していた社内デザイン・システムVibesのコントラスト表のリンクを再掲

• 誤字修正

• チェックリストから更新履歴を削除して、このページへのリンクを掲載

V3.0.0 (2021年10月7日)

• モバイル・アプリケーションを対象にしたチェックを追加し、全体的に見直しを実施

V2.2 (2021年7月8日)

• Vibesのコントラスト表へのリンクを新ブランディング対応後のものに更新

V2.1 (2021年7月6日)

• 文言修正：チェックID：0201

V2.0 (2021年5月24日)

• QA時の判断基準として、「重篤度」を追加。各重篤度の定義は以下の通り：

  • [CRITICAL]: 操作不能になる人がいる

  • [MAJOR]: 操作/情報取得が著しく難しくなる人がいる

  • [NORMAL]: 不便を感じる人が少なからずいる

  • [MINOR]: 問題はあるが影響は小さい

V1.11 (2021年3月23日)

• コントラストに関するチェックについて、テキスト情報とそれ以外に分離し、対象がプロダクトの場合はテキストのみを対象とするように変更

  • チェックID：0001をチェックID：0001とチェックID：0002に分離

  • チェックID：0021を変更

V1.10 (2021年2月25日)

• 見出しとテーブルに関するチェックを追加：

  • チェックID：0561

  • チェックID：0562

• チェックID：0561 と内容が重なるチェックID：0741を削除

V1.9.1 (2021年2月10日)

• 文言変更：チェックID：0441

V1.9 (2021年1月28日)

• ホバーに関するガイドラインの分割に伴う変更

  • チェックID：0091とチェックID：0111を変更

  • チェックID：0092とチェックID：0112を新設

V1.8.2 (2021年1月26日)

• 文言変更：

  • チェックID：0322

  • チェックID：1171

  • チェックID：1291

  • チェックID：1311

V1.8.1 (2020年11月27日)

• 具体的な数値を名気する形に文言変更：チェックID：0331、チェックID：0351

V1.8 (2020年11月26日)

• ガイドラインの優先度変更を反映：チェックID：0141（[SHOULD]→[MUST]）

V1.7 (2020年11月25日)

• 音声解説に関するガイドライン（[SHOULD]）の追加に伴い、チェックを追加：チェックID：1562

• 文言変更：チェックID：0681

V1.6 (2020年11月9日)

• 画像化されたテキストに関するガイドラインの見直しに伴い、優先度と対応するWCAG SCを変更：チェックID：0481、チェックID：0501

V1.5 (2020年11月6日)

• 対象が「デザイン」の一部項目の文言変更（意図に変更無し）：

  • チェックID：0091

  • チェックID：0151

  • チェックID：0152

  • チェックID：0211

  • チェックID：0361

  • チェックID：0481

  • チェックID：1051

V1.4.1 (2020年10月28日)

• ツール列のリンクを修正

V1.4 (2020年10月23日)

• ツール列に、ガイドラインのチェック実施方法の例へのリンクを掲載

• 文言修正：チェックID：0921

• ページ全体の言語指定に関する、プロダクト対象のチェックを追加：チェックID：0621

V1.3 (2020年9月28日)

• 拡大表示関連のガイドライン見直しに伴う変更

  • 追加：チェックID：0311、チェックID：0323、チェックID：0324

  • 文言変更：チェックID：0321、チェックID：0322

V1.2 (2020年8月28日)

• 対象コンテンツの列を追加し、フィルター設定ダイアログを追加

V1.1

• IDの整理

V1.0

初版

ガイドラインに関する補足情報

WCAG 2.1の各達成基準と当ガイドラインの項目との対応

ここでは、Web Content Accessibility Guidelines (WCAG) 2.1の各達成基準について、当ガイドラインで対応する項目を示しています。

なお、freeeではWCAG 2.1の適合レベルAA相当を目標としていますので、WCAG 2.1のレベルAAAの達成基準の多くは「該当無し」となっています。参考までに、下表の「レベル」の欄に、WCAG 2.1で指定されているレベルを示します。

WCAG 2.1の達成基準との対応一覧

達成基準	原文	日本語訳	レベル	対応するガイドライン
1.1.1	Non-text Content	非テキストコンテンツ	A	画像化されたテキスト：テキスト情報の提供 画像：画像の説明の提供 画像：装飾目的の画像の無視 アイコン：テキスト情報の付与 フォーム：表示されているテキストをラベルとして用いる フォーム：表示されているテキストをラベルにできない場合 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する
1.2.1	Audio-only and Video-only (Prerecorded)	音声のみ及び映像のみ (収録済)	A	音声・映像コンテンツ：テキスト情報と同等の内容にする 音声・映像コンテンツ：書き起こしテキストの提供
1.2.2	Captions (Prerecorded)	キャプション (収録済)	A	音声・映像コンテンツ：テキスト情報と同等の内容にする 音声・映像コンテンツ：キャプションの提供
1.2.3	Audio Description or Media Alternative (Prerecorded)	音声解説、又はメディアに対する代替 (収録済)	A	音声・映像コンテンツ：テキスト情報と同等の内容にする 音声・映像コンテンツ：テキスト情報または音声解説の提供 音声・映像コンテンツ：音声解説の提供
1.2.4	Captions (Live)	キャプション (ライブ)	AA	音声・映像コンテンツ：テキスト情報と同等の内容にする 音声・映像コンテンツ：キャプションの提供
1.2.5	Audio Description (Prerecorded)	音声解説 (収録済)	AA	音声・映像コンテンツ：音声解説の提供
1.2.6	Sign Language (Prerecorded)	手話 (収録済)	AAA	音声・映像コンテンツ：手話の提供
1.2.7	Extended Audio Description (Prerecorded)	拡張音声解説 (収録済)	AAA	該当無し
1.2.8	Media Alternative (Prerecorded)	メディアに対する代替 (収録済)	AAA	該当無し
1.2.9	Audio-only (Live)	音声のみ (ライブ)	AAA	該当無し
1.3.1	Info and Relationships	情報及び関係性	A	マークアップと実装：文書構造を適切に示すマークアップ、実装を行う マークアップと実装：対話的なUIコンポーネントの実装 ページ全体：ページを構成する領域の明示 フォーム：表示されているテキストをラベルとして用いる フォーム：表示されているテキストをラベルにできない場合 動的コンテンツ：支援技術への適切な情報提供の維持
1.3.2	Meaningful Sequence	意味のある順序	A	ページ全体：適切な記述順序 入力ディバイス：適切なフォーカス順序 動的コンテンツ：支援技術への適切な情報提供の維持
1.3.3	Sensory Characteristics	感覚的な特徴	A	テキスト：特定の感覚に依存しない表現 フォーム：複数の視覚的要素を用いた表現
1.3.4	Orientation	表示の向き	AA	ページ全体：画面方向を固定しない
1.3.5	Identify Input Purpose	入力目的の特定	AA	該当無し
1.3.6	Identify Purpose	目的の特定	AAA	該当無し
1.4.1	Use of Color	色の使用	A	テキスト：複数の視覚的要素を用いた表現 画像：複数の視覚的要素を用いた表現 アイコン：複数の視覚的要素を用いた表現 リンク：複数の視覚的要素を用いた表現 フォーム：複数の視覚的要素を用いた表現
1.4.2	Audio Control	音声の制御	A	音声・映像コンテンツ：音声の自動再生
1.4.3	Contrast (Minimum)	コントラスト (最低限)	AA	テキスト：コントラスト比の確保 テキスト：モバイルOSでのコントラスト比の確保 画像化されたテキスト：画像内のテキストのコントラスト比 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比 画像：画像内のテキストのコントラスト比 画像：モバイルOSでの画像内のテキストのコントラスト比
1.4.4	Resize text	テキストのサイズ変更	AA	テキスト：ズーム機能を用いた200パーセントの拡大表示 テキスト：文字サイズ設定の変更 テキスト：モバイルOSの文字サイズ設定の変更
1.4.5	Images of Text	文字画像	AA	画像化されたテキスト：画像化されたテキストを使用しない
1.4.6	Contrast (Enhanced)	コントラスト (高度)	AAA	テキスト：コントラスト比の確保 テキスト：モバイルOSでのコントラスト比の確保 画像化されたテキスト：画像内のテキストのコントラスト比 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比 画像：画像内のテキストのコントラスト比 画像：モバイルOSでの画像内のテキストのコントラスト比
1.4.7	Low or No Background Audio	小さな背景音、又は背景音なし	AAA	音声・映像コンテンツ：充分に小さい背景音
1.4.8	Visual Presentation	視覚的提示	AAA	該当無し
1.4.9	Images of Text (No Exception)	文字画像 (例外なし)	AAA	画像化されたテキスト：画像化されたテキストを使用しない
1.4.10	Reflow	リフロー	AA	テキスト：ズーム機能を用いた400パーセントの拡大表示
1.4.11	Non-text Contrast	非テキストのコントラスト	AA	入力ディバイス：モバイルの支援技術のサポート 画像：隣接領域とのコントラスト比の確保 アイコン：コントラスト比の確保
1.4.12	Text Spacing	テキストの間隔	AA	テキスト：テキスト表示のカスタマイズ
1.4.13	Content on Hover or Focus	ホバー又はフォーカスで表示されるコンテンツ	AA	動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの拡大 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの非表示
2.1.1	Keyboard	キーボード	A	入力ディバイス：キーボード操作を可能にする フォーム：キーボード操作を可能にする
2.1.2	No Keyboard Trap	キーボードトラップなし	A	入力ディバイス：キーボード・トラップの回避 音声・映像コンテンツ：キーボード・トラップの回避
2.1.3	Keyboard (No Exception)	キーボード (例外なし)	AAA	入力ディバイス：キーボード操作を可能にする フォーム：キーボード操作を可能にする
2.1.4	Character Key Shortcuts	文字キーのショートカット	A	入力ディバイス：ショートカット・キーを提供する場合
2.2.1	Timing Adjustable	タイミング調整可能	A	ログイン・セッション：ログイン・セッションの有効期限 フォーム：フォーム入力の制限時間
2.2.2	Pause, Stop, Hide	一時停止、停止、非表示	A	動的コンテンツ：点滅、自動スクロールを伴うコンテンツ 動的コンテンツ：自動更新されるコンテンツ 音声・映像コンテンツ：動きを伴うコンテンツ
2.2.3	No Timing	タイミング非依存	AAA	ログイン・セッション：ログイン・セッションの有効期限 フォーム：フォーム入力の制限時間
2.2.4	Interruptions	割り込み	AAA	動的コンテンツ：割り込み表示
2.2.5	Re-authenticating	再認証	AAA	ログイン・セッション：制限時間超過後の操作の継続 フォーム：制限時間超過後の操作の継続
2.2.6	Timeouts	タイムアウト	AAA	該当無し
2.3.1	Three Flashes or Below Threshold	3 回の閃光、又は閾値以下	A	動的コンテンツ：閃光を放つコンテンツ
2.3.2	Three Flashes	3回の閃光	AAA	動的コンテンツ：閃光を放つコンテンツ
2.3.3	Animation from Interactions	インタラクションによるアニメーション	AAA	該当無し
2.4.1	Bypass Blocks	ブロックスキップ	A	ページ全体：本文の開始位置の明示
2.4.2	Page Titled	ページタイトル	A	ページ全体：タイトルの指定
2.4.3	Focus Order	フォーカス順序	A	入力ディバイス：適切なフォーカス順序 リンク：適切なフォーカス順序 フォーム：適切なフォーカス順序
2.4.4	Link Purpose (In Context)	リンクの目的 (コンテキスト内)	A	リンク：適切なリンク・テキスト
2.4.5	Multiple Ways	複数の手段	AA	ページ全体：複数の到達手段
2.4.6	Headings and Labels	見出し及びラベル	AA	テキスト：適切な文言の見出し フォーム：表示されているテキストをラベルとして用いる フォーム：表示されているテキストをラベルにできない場合
2.4.7	Focus Visible	フォーカスの可視化	AA	入力ディバイス：フォーカス箇所の可視化
2.4.8	Location	現在位置	AAA	ページ全体：現在地の明示
2.4.9	Link Purpose (Link Only)	リンクの目的 (リンクのみ)	AAA	該当無し
2.4.10	Section Headings	セクション見出し	AAA	ページ全体：適切なセクション分けと見出しの付与
2.5.1	Pointer Gestures	ポインタのジェスチャ	A	入力ディバイス：キーボード操作を可能にする 入力ディバイス：モバイルOS標準のジェスチャーによる操作 フォーム：キーボード操作を可能にする
2.5.2	Pointer Cancellation	ポインタのキャンセル	A	入力ディバイス：ダウン・イベントをトリガーにしない
2.5.3	Label in Name	名前 (name) のラベル	A	フォーム：表示されているテキストをラベルとして用いる
2.5.4	Motion Actuation	動きによる起動	A	入力ディバイス：特定の入力ディバイスを前提としない
2.5.5	Target Size	ターゲットのサイズ	AAA	アイコン：十分な大きさのクリック/タッチのターゲット アイコン：十分な大きさのクリック/タッチのターゲット（モバイル） フォーム：十分な大きさのクリック/タッチのターゲット フォーム：十分な大きさのクリック/タッチのターゲット（モバイル）
2.5.6	Concurrent Input Mechanisms	入力メカニズム非依存	AAA	入力ディバイス：特定の入力ディバイスを前提としない
3.1.1	Language of Page	ページの言語	A	テキスト：ページの主たる言語の指定
3.1.2	Language of Parts	一部分の言語	AA	テキスト：部分的に使用される言語の明示 テキスト：テキストを表示するUIコンポーネントの言語の明示
3.1.3	Unusual Words	一般的ではない用語	AAA	該当無し
3.1.4	Abbreviations	略語	AAA	該当無し
3.1.5	Reading Level	読解レベル	AAA	該当無し
3.1.6	Pronunciation	発音	AAA	該当無し
3.2.1	On Focus	フォーカス時	A	フォーム：フォーカス時の挙動 動的コンテンツ：OnFocus/OffFocus時の挙動
3.2.2	On Input	入力時	A	フォーム：フォームの値の変更時の挙動
3.2.3	Consistent Navigation	一貫したナビゲーション	AA	ページ全体：コンポーネントの一貫した出現順序
3.2.4	Consistent Identification	一貫した識別性	AA	アイコン：アイコンの一貫性 リンク：一貫したリンク・テキスト
3.2.5	Change on Request	要求による変化	AAA	該当無し
3.3.1	Error Identification	エラーの特定	A	フォーム：テキスト情報によるエラーの特定
3.3.2	Labels or Instructions	ラベル又は説明	A	フォーム：表示されているテキストをラベルとして用いる フォーム：表示されているテキストをラベルにできない場合
3.3.3	Error Suggestion	エラー修正の提案	AA	フォーム：エラーの修正方法の提示
3.3.4	Error Prevention (Legal, Financial, Data)	エラー回避 (法的、金融、データ)	AA	フォーム：誤操作の防止
3.3.5	Help	ヘルプ	AAA	該当無し
3.3.6	Error Prevention (All)	エラー回避 (すべて)	AAA	該当無し
4.1.1	Parsing	構文解析	A	マークアップと実装：文法的に正しいマークアップ
4.1.2	Name, Role, Value	名前 (name) ・役割 (role) 及び値 (value)	A	マークアップと実装：コンポーネントをアクセシブルにする 入力ディバイス：モバイルの支援技術のサポート
4.1.3	Status Messages	ステータスメッセージ	AA	動的コンテンツ：ステータス・メッセージの適切な実装

当ガイドラインとWCAG 2.1の各達成基準のレベル

当ガイドラインは、WCAG 2.1の適合レベルAAを達成できる内容とすることを方針として策定しています。そのため、各ガイドライン項目は基本的にWCAG 2.1のレベルAとレベルAAの達成基準に基づいていますが、一部例外もあります。ガイドライン項目の検討に際して、レベルAAAのものも含めて、WCAG 2.1のすべての達成基準を検討しました。各達成基準に割り当てられているレベルについて、freeeのプロダクトの性質などを考慮して見直し、一部の達成基準についてはWCAG 2.1が示すものとは異なるレベルを前提とすることにしたためです。

ここでは、見直しの結果WCAG 2.1が示しているものとは異なるレベルを前提とすることになった達成基準の一覧と、レベルを見直した理由を示します。

レベルを見直した達成基準

レベルを見直した達成基準一覧

達成基準	原文	日本語訳	見直し前	見直し後
1.2.6	Sign Language (Prerecorded)	手話 (収録済)	AAA	AA
1.3.4	Orientation	表示の向き	AA	A
1.3.5	Identify Input Purpose	入力目的の特定	AA	AAA
1.4.3	Contrast (Minimum)	コントラスト (最低限)	AA	A
1.4.4	Resize text	テキストのサイズ変更	AA	A
1.4.6	Contrast (Enhanced)	コントラスト (高度)	AAA	AA
1.4.7	Low or No Background Audio	小さな背景音、又は背景音なし	AAA	AA
1.4.9	Images of Text (No Exception)	文字画像 (例外なし)	AAA	AA
1.4.11	Non-text Contrast	非テキストのコントラスト	AA	A
1.4.12	Text Spacing	テキストの間隔	AA	A
1.4.13	Content on Hover or Focus	ホバー又はフォーカスで表示されるコンテンツ	AA	一部A
2.1.3	Keyboard (No Exception)	キーボード (例外なし)	AAA	A
2.2.3	No Timing	タイミング非依存	AAA	AA
2.2.4	Interruptions	割り込み	AAA	AA
2.2.5	Re-authenticating	再認証	AAA	AA
2.3.2	Three Flashes	3回の閃光	AAA	A
2.4.6	Headings and Labels	見出し及びラベル	AA	A
2.4.7	Focus Visible	フォーカスの可視化	AA	A
2.4.8	Location	現在位置	AAA	AA
2.4.10	Section Headings	セクション見出し	AAA	AA
2.5.5	Target Size	ターゲットのサイズ	AAA	AA
3.2.3	Consistent Navigation	一貫したナビゲーション	AA	A
3.2.4	Consistent Identification	一貫した識別性	AA	A
4.1.3	Status Messages	ステータスメッセージ	AA	A

レベルを見直した理由

レベルを見直した多くの達成基準は、freeeのプロダクトにおいてより重要性が高いものであるという判断の下に、WCAG 2.1に示されているより高いレベルを前提とすることにしたものです。これとは異なる理由でレベルを見直した達成基準について、その理由を以下に示します。

達成基準1.2.6

音声情報を聴覚障害者にも利用できるようにするための手段として、字幕を付ける方法と手話通訳を付ける方法があります。聴覚障害者の中には、文字を用いたコミュニケーションがより得意な人と手話を用いたコミュニケーションがより得意な人がいます。（もちろん両方を同等に行える人もいます。）

文字情報と手話のどちらが有効化はユーザーによって異なるため、情報保障の観点からはどちらも同等に重要です。当ガイドラインではWCAG 2.1でレベルがAAAの達成基準は対象としない方針なので、WCAG 2.1が示すレベルのままでは、仮に可能でも手話通訳の提供が考慮されないという事態が発生することが考えられます。

本来は字幕同様、Aとして扱うことが望ましいものですが、実現するための難易度も考慮して、AAとすることにしました。

達成基準1.3.5

この達成基準では、ユーザーの入力を求めるフォーム・コントロールにおいて、入力が期待される情報の種類を明示することを求めています。この達成基準に関する解説Understanding Identify Input Purpose（日本語訳）では、autocomplete属性の活用を具体的な方法として示しています。

autocomplete属性が用いられているフォーム・コントロールは、常に決まった値を入力する場合、入力すべき項目が少ない場合などには、入力を容易にする効果が期待できます。しかし、そうではない場合には、誤入力を誘発することにつながります。

freeeのプロダクトにおいては、その性質上フォーム・コントロールが多数存在するページも少なくなく、また常に一定の値を入力するわけではない項目も多数存在します。したがって、ガイドラインが示す条件を満たすために安易にautocomplete属性が用いられるようなことがあると、かえってユーザビリティーを損なう結果につながることが考えられます。

このようなことを考慮して、当ガイドラインではこの達成基準に対応する項目を設けないという判断に至りました。

達成基準1.4.13

この達成基準は、拡大表示を利用しているユーザーがマウスオーバー（ホバー）によって表示されるコンテンツを利用しやすくすることを意図しています。具体的には、ユーザーの意図に反してそのコンテンツが非表示にならないようにすることや、必要なタイミングでそのコンテンツを非表示にできるようにすることを目的としたものです。

このうち、ユーザーの意図に反してコンテンツが非表示になってしまうという現象は、場合によってはユーザーのコンテンツ利用を不可能にする可能性があるものだと考え、当ガイドラインではこの部分を取り出し、レベルA相当の項目として扱うことにしました。

axe DevToolsのルールと当ガイドラインの対応

ここでは、チェックの際に利用するaxe DevToolsが出力する情報と、当ガイドラインの対応について記します。

なお、axe DevToolsについては、以下も合わせて参照してください：

• axe DevToolsを使用したアクセシビリティー・チェック

• axe DevToolsを用いたチェック実施方法の例

ここで掲載している情報は、axe-coreのGitHubリポジトリーの以下に示す時点におけるdevelopブランチの内容に基づいて自動的に生成したものです。axe DevToolsの内容とは一致していない場合もあることにご注意ください。

バージョン

4.10.3

更新日時

2025-04-04 01:26:19+0900

アクティブな<area>要素には代替テキストが存在しなければなりません (Active <area> elements must have alternative text)

イメージマップの<area>要素に代替テキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.4.4

  • Link Purpose (In Context)

  • リンクの目的 (コンテキスト内)

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

• リンク：適切なリンク・テキスト

要素にはサポートされているARIA属性のみを使用しなければなりません (Elements must only use supported ARIA attributes)

要素のロールがARIA属性をサポートしていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

aria-braille属性には、点字以外の同等のものがなければなりません (aria-braille attributes must have a non-braille equivalent)

aria-braillelabelとaria-brailleroledescriptionには、点字以外の同等のものが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIAコマンドにはアクセシブルな名前がなければなりません (ARIA commands must have an accessible name)

すべてのARIA button、link、menuitemにアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIA属性は要素のロールの仕様に従って使用しなければなりません (ARIA attributes must be used as specified for the element's role)

ARIA属性が要素のロールの仕様に従って使用されていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

非推奨のARIAロールを使用してはなりません (Deprecated ARIA roles must not be used)

要素に非推奨のロールが使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ドキュメント本体にaria-hidden="true"が存在してはなりません (aria-hidden="true" must not be present on the document body)

ドキュメント本体にaria-hidden="true"が存在しないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• マークアップと実装：コンポーネントをアクセシブルにする

• ページ全体：ページを構成する領域の明示

• 入力ディバイス：モバイルの支援技術のサポート

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

aria-hiddenが指定されている要素は、フォーカス可能であったり、フォーカス可能な要素を含んでいたりしてはなりません (ARIA hidden element must not be focusable or contain focusable elements)

aria-hiddenが指定されている要素にフォーカスできないこと、その要素にフォーカス可能な要素が含まれていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIA入力欄にはアクセシブルな名前がなければなりません (ARIA input fields must have an accessible name)

すべてのARIA入力欄にアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIA meterノードにはアクセシブルな名前がなければなりません (ARIA meter nodes must have an accessible name)

すべてのARIA meterノードにアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

ARIA progressbarノードにはアクセシブルな名前がなければなりません (ARIA progressbar nodes must have an accessible name)

すべてのARIA progressbarノードにアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

要素には禁止されているARIA属性を使用してはなりません (Elements must only use permitted ARIA attributes)

要素のロールでARIA属性が禁止されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

必須のARIA属性が提供されていなければなりません (Required ARIA attributes must be provided)

ARIAロールのある要素にすべての必須ARIA属性が存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

特定のARIAロールには特定の子が含まれていなければなりません (Certain ARIA roles must contain particular children)

子ロールを必須とするARIAロールが指定された要素に、それらが含まれていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

特定のARIAロールは特定の親に含まれていなければなりません (Certain ARIA roles must be contained by particular parents)

親ロールを必須とするARIAロールが指定された要素に、それらが含まれていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

aria-roledescriptionはセマンティックなロールを持った要素に使用しなければなりません (aria-roledescription must be on elements with a semantic role)

aria-roledescriptionが暗黙的もしくは明示的なロールを持った要素に使用されていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

使用されているARIAロールは有効な値に一致しなければなりません (ARIA roles used must conform to valid values)

すべてのrole属性が指定された要素で、有効な値が使用されていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIAトグル欄にはアクセシブルな名前がなければなりません (ARIA toggle fields must have an accessible name)

すべてのARIAトグル欄にアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIA tooltipノードにはアクセシブルな名前がなければなりません (ARIA tooltip nodes must have an accessible name)

すべてのARIA tooltipノードにアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIA属性は有効な名前に一致しなければなりません (ARIA attributes must conform to valid names)

aria-で始まる属性が有効なARIA属性であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ARIA属性は有効な値に一致しなければなりません (ARIA attributes must conform to valid values)

すべてのARIA属性に有効な値が存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

<audio>要素にはキャプショントラックが存在しなければなりません (<audio> elements must have a captions track)

<audio>要素にキャプションが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.2.1

  • Audio-only and Video-only (Prerecorded)

  • 音声のみ及び映像のみ (収録済)

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報と同等の内容にする

• 音声・映像コンテンツ：書き起こしテキストの提供

インラインのテキスト間隔設定はカスタムスタイルシートによって調整可能でなければなりません (Inline text spacing must be adjustable with custom stylesheets)

style属性で指定されたテキストの間隔は、カスタムスタイルシートにより調整可能であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.4.12

  • Text Spacing

  • テキストの間隔

関連ガイドライン項目

• テキスト：テキスト表示のカスタマイズ

<blink>要素の使用は非推奨で、使用するべきではありません (<blink> elements are deprecated and must not be used)

<blink>要素が使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.2.2

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

関連ガイドライン項目

• 動的コンテンツ：点滅、自動スクロールを伴うコンテンツ

• 動的コンテンツ：自動更新されるコンテンツ

• 音声・映像コンテンツ：動きを伴うコンテンツ

ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)

ボタンに認識可能なテキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

ページには繰り返されるブロックをスキップする手段が存在しなければなりません (Page must have means to bypass repeated blocks)

各ページに少なくとも1つ、ユーザーがナビゲーション部分をスキップして直接本文へ移動できるメカニズムが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.4.1

  • Bypass Blocks

  • ブロックスキップ

関連ガイドライン項目

• ページ全体：本文の開始位置の明示

要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)

前景色と背景色のコントラストがWCAG 2のAAコントラスト比（最低限）のしきい値を満たすことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.4.3

  • Contrast (Minimum)

  • コントラスト (最低限)

関連ガイドライン項目

• テキスト：コントラスト比の確保

• テキスト：モバイルOSでのコントラスト比の確保

• 画像化されたテキスト：画像内のテキストのコントラスト比

• 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

• 画像：画像内のテキストのコントラスト比

• 画像：モバイルOSでの画像内のテキストのコントラスト比

要素は色のコントラスト比（高度）の閾値を満たしていなければなりません (Elements must meet enhanced color contrast ratio thresholds)

前景色と背景色のコントラストがWCAG 2のAAAコントラスト比（高度）のしきい値を満たすことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.4.6

  • Contrast (Enhanced)

  • コントラスト (高度)

関連ガイドライン項目

• テキスト：コントラスト比の確保

• テキスト：モバイルOSでのコントラスト比の確保

• 画像化されたテキスト：画像内のテキストのコントラスト比

• 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

• 画像：画像内のテキストのコントラスト比

• 画像：モバイルOSでの画像内のテキストのコントラスト比

CSSメディアクエリーはディスプレイの向きを固定するために使用してはなりません (CSS Media queries must not lock display orientation)

コンテンツが特定のディスプレイの向きに固定されていないこと、およびコンテンツがすべてのディスプレイの向きで操作可能なことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.4

  • Orientation

  • 表示の向き

関連ガイドライン項目

• ページ全体：画面方向を固定しない

<dl>要素は、適切な順序で並べられた<dt>および<dd>のグループ、<script>要素、<template>要素またはdiv要素のみを直接含んでいなければなりません (<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements)

<dl>要素の構造が正しいことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

<dt>および<dd>要素は<dl>に含まれていなければなりません (<dt> and <dd> elements must be contained by a <dl>)

<dt>および<dd>要素が<dl>に含まれていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

ドキュメントにはナビゲーションを補助するために<title>要素がなければなりません (Documents must have <title> element to aid in navigation)

各HTMLドキュメントに空ではない<title>要素が含まれていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.4.2

  • Page Titled

  • ページタイトル

関連ガイドライン項目

• ページ全体：タイトルの指定

id属性の値は一意でなければなりません (id attribute value must be unique)

すべてのid属性の値が一意であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.1

  • Parsing

  • 構文解析

関連ガイドライン項目

• マークアップと実装：文法的に正しいマークアップ

アクティブな要素のIDは一意でなければなりません (IDs of active elements must be unique)

アクティブな要素のid属性の値が一意であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.1

  • Parsing

  • 構文解析

関連ガイドライン項目

• マークアップと実装：文法的に正しいマークアップ

ARIAおよびラベルに使用されているIDは一意でなければなりません (IDs used in ARIA and labels must be unique)

ARIAおよびラベルに使用されているすべてのid属性の値が一意であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

フォームフィールドに複数のlabel要素を付与してはなりりません (Form field must not have multiple label elements)

フォームフィールドに複数のlabel要素が存在しないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準3.3.2

  • Labels or Instructions

  • ラベル又は説明

関連ガイドライン項目

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

フォーカス可能なコンテンツを含むフレームには、tabindex=-1が指定されていてはなりません (Frames with focusable content must not have tabindex=-1)

フォーカス可能な<frame>と<iframe>要素に、tabindex=-1が指定されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.1.1

  • Keyboard

  • キーボード

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• フォーム：キーボード操作を可能にする

フレームにはアクセシブルな名前がなければなりません (Frames must have an accessible name)

<iframe>および<frame>要素にアクセシブルな名前が存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

フレームには一意のtitle属性がなければなりません (Frames must have a unique title attribute)

<iframe>および<frame>要素に一意のtitle属性が含まれていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)

すべてのHTMLドキュメントにlang属性が存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準3.1.1

  • Language of Page

  • ページの言語

関連ガイドライン項目

• テキスト：ページの主たる言語の指定

<html>要素のlang属性には有効な値がなければなりません (<html> element must have a valid value for the lang attribute)

<html>要素のlang属性に有効な値があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準3.1.1

  • Language of Page

  • ページの言語

関連ガイドライン項目

• テキスト：ページの主たる言語の指定

HTML要素に指定されたlangおよびxml:lang属性は同じ基本言語を持たなければなりません (HTML elements with lang and xml:lang must have the same base language)

HTML要素に指定された有効なlangおよびxml:lang属性の両方がページの基本言語と一致することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準3.1.1

  • Language of Page

  • ページの言語

関連ガイドライン項目

• テキスト：ページの主たる言語の指定

画像には代替テキストがなければなりません (Images must have alternative text)

<img>要素に代替テキストが存在する、またはnoneまたはpresentationのロールが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

入力ボタンには認識可能なテキストが存在しなければなりません (Input buttons must have discernible text)

入力ボタンに認識可能なテキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

画像ボタンには代替テキストがなければなりません (Image buttons must have alternative text)

<input type="image">要素に代替テキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

フォーム要素にはラベルがなければなりません (Form elements must have labels)

すべてのフォーム要素にラベルが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

要素の視認できるテキストはそれらのアクセシブルな名前の一部でなければなりません (Elements must have their visible text as part of their accessible name)

コンテンツによってラベル付けされた要素は、それらの視認できるテキストがアクセシブルな名前の一部になっていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.5.3

  • Label in Name

  • 名前 (name) のラベル

関連ガイドライン項目

• フォーム：表示されているテキストをラベルとして用いる

リンクは色に依存しない形で区別できなければなりません (Links must be distinguishable without relying on color)

リンクが色に依存しない形で周囲のテキストと区別できることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.4.1

  • Use of Color

  • 色の使用

関連ガイドライン項目

• テキスト：複数の視覚的要素を用いた表現

• 画像：複数の視覚的要素を用いた表現

• アイコン：複数の視覚的要素を用いた表現

• リンク：複数の視覚的要素を用いた表現

• フォーム：複数の視覚的要素を用いた表現

リンクには認識可能なテキストがなければなりません (Links must have discernible text)

リンクに認識可能なテキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.4.4

  • Link Purpose (In Context)

  • リンクの目的 (コンテキスト内)

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

• リンク：適切なリンク・テキスト

<ul>および<ol>の直下には<li>、<script>または<template>要素のみを含まなければなりません (<ul> and <ol> must only directly contain <li>, <script> or <template> elements)

リストが正しく構造化されていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

<li>要素は<ul>または<ol>内に含まれていなければなりません (<li> elements must be contained in a <ul> or <ol>)

<li>要素がセマンティックに使用されていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

<marquee>要素は非推奨のため、使用してはなりません (<marquee> elements are deprecated and must not be used)

<marquee>要素が使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.2.2

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

関連ガイドライン項目

• 動的コンテンツ：点滅、自動スクロールを伴うコンテンツ

• 動的コンテンツ：自動更新されるコンテンツ

• 音声・映像コンテンツ：動きを伴うコンテンツ

20時間より短い時間経過後のページの自動リロードを使用してはなりません (Delayed refresh under 20 hours must not be used)

一定時間経過後のページの自動リロードのために<meta http-equiv="refresh">が使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.2.1

  • Timing Adjustable

  • タイミング調整可能

関連ガイドライン項目

• ログイン・セッション：ログイン・セッションの有効期限

• フォーム：フォーム入力の制限時間

一定時間経過後のページの自動リロードを使用してはなりません (Delayed refresh must not be used)

一定時間経過後のページの自動リロードのために<meta http-equiv="refresh">が使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.2.4

  • Interruptions

  • 割り込み

• 達成基準3.2.5

  • Change on Request

  • 要求による変化

関連ガイドライン項目

• 動的コンテンツ：割り込み表示

ズーム機能やテキストのサイズ変更は無効にしてはなりません (Zooming and scaling must not be disabled)

<meta name="viewport">がテキストのサイズ変更やズームを無効化しないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.4.4

  • Resize text

  • テキストのサイズ変更

関連ガイドライン項目

• テキスト：ズーム機能を用いた200パーセントの拡大表示

• テキスト：文字サイズ設定の変更

• テキスト：モバイルOSの文字サイズ設定の変更

対話的なコントロールはネストされていてはなりません (Interactive controls must not be nested)

スクリーン・リーダーで必ずしもよみあげられなかったり支援技術のフォーカスに関する問題を引き起こす可能性があったりするため、対話的なコントロールがネストされていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

<video>または<audio>要素は音声を自動再生してはなりません (<video> or <audio> elements must not play automatically)

<video>または<audio>要素が音声を停止またはミュートするコントロールなしに音声を3秒より長く自動再生しないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.4.2

  • Audio Control

  • 音声の制御

関連ガイドライン項目

• 音声・映像コンテンツ：音声の自動再生

<object>要素には代替テキストがなければなりません (<object> elements must have alternative text)

<object>要素に代替テキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

スタイル付けした<p>要素を見出しとして使用してはなりません (Styled <p> elements must not be used as headings)

<p>要素を見出しとしてスタイル付けするために太字、イタリック体、およびフォントサイズが使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

[role="img"]の要素には代替テキストがなければなりません ([role="img"] elements must have an alternative text)

[role="img"]の要素に代替テキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

スクロール可能な領域はキーボードでアクセスできなければなりません (Scrollable region must have keyboard access)

スクロール可能なコンテンツを持つ要素がキーボードでアクセスできることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.1.1

  • Keyboard

  • キーボード

• 達成基準2.1.3

  • Keyboard (No Exception)

  • キーボード (例外なし)

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• フォーム：キーボード操作を可能にする

select要素にはアクセシブルな名前がなければなりません (Select element must have an accessible name)

select要素にはアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

サーバーサイドのイメージマップを使用してはなりません (Server-side image maps must not be used)

サーバーサイドのイメージマップが使用されていないことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.1.1

  • Keyboard

  • キーボード

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• フォーム：キーボード操作を可能にする

summary要素には認識可能なテキストがなければなりません (Summary elements must have discernible text)

summary要素に認識可能なテキストが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連ガイドライン項目

• マークアップと実装：コンポーネントをアクセシブルにする

• 入力ディバイス：モバイルの支援技術のサポート

imgロールを持つ<svg>要素には代替テキストが存在しなければなりません (<svg> elements with an img role must have an alternative text)

img、graphics-documentまたはgraphics-symbolロールを持つsvg要素にアクセシブルなテキストがあることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

• アイコン：テキスト情報の付与

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

データテーブルにキャプションをつけるためにデータまたはヘッダーセルを用いてはなりません (Data or header cells must not be used to give caption to a data table.)

キャプション付きのテーブルが<caption>要素を用いていることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

大きい<table>の空ではない<td>要素は対応するテーブルヘッダーと関連づけられていなければなりません (Non-empty <td> elements in larger <table> must have an associated table header)

3×3より大きい<table>の空ではないデータセルにはそれぞれ1つ以上のテーブルヘッダーが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

テーブルのheaders属性を使用するすべてのセルは、同じ表内の他の<th>要素を参照しなければなりません (Table cell headers attributes must refer to other <th> elements in the same table)

テーブルでheaders属性を使用している各セルの参照先が、同じテーブル内の他の<th>要素であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

データテーブルのテーブルヘッダーはデータセルを参照していなければなりません (Table headers in a data table must refer to data cells)

すべての<th>要素およびrole=columnheader/rowheaderを持つ要素にはそれらが説明するデータセルがあることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• マークアップと実装：対話的なUIコンポーネントの実装

• ページ全体：ページを構成する領域の明示

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

• 動的コンテンツ：支援技術への適切な情報提供の維持

lang属性には有効な値がなければなりません (lang attribute must have a valid value)

lang属性に有効な値が存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準3.1.2

  • Language of Parts

  • 一部分の言語

関連ガイドライン項目

• テキスト：部分的に使用される言語の明示

• テキスト：テキストを表示するUIコンポーネントの言語の明示

<video>要素にはキャプションがなければなりません (<video> elements must have captions)

<video>要素にキャプションが存在することを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.2.2

  • Captions (Prerecorded)

  • キャプション (収録済)

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報と同等の内容にする

• 音声・映像コンテンツ：キャプションの提供

autocomplete属性は正しく使用しなければなりません (autocomplete attribute must be used correctly)

autocomplete属性が正しく、かつフォームフィールドに対して適切であることを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準1.3.5

  • Identify Input Purpose

  • 入力目的の特定

同じ名前を持つ複数のリンクは類似した目的を持っていなければなりません (Links with the same name must have a similar purpose)

同じアクセシブルな名前を持つ複数のリンクが類似した目的を果たすことを確認してください

参考：Deque Universityの解説

関連するWCAG 2.1の達成基準

• 達成基準2.4.9

  • Link Purpose (Link Only)

  • リンクの目的 (リンクのみ)

accesskey属性の値は一意でなければなりません (accesskey attribute value should be unique)

すべてのaccesskey属性の値が一意であることを確認してください

参考：Deque Universityの解説

ARIAロールは要素に対して適切でなければなりません (ARIA role should be appropriate for the element)

role属性の値が要素に対して適切であることを確認してください

参考：Deque Universityの解説

ARIA dialogとalertdialogノードにはアクセシブルな名前がなければなりません (ARIA dialog and alertdialog nodes should have an accessible name)

すべてのARIA dialog、alertdialogノードにアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

"role=text"が指定されている要素には、フォーカス可能な子孫が含まれていてはなりません ("role=text" should have no focusable descendants)

role="text"が指定されている要素にフォーカス可能な子孫がないことを確認してください

参考：Deque Universityの解説

ARIA treeitemノードにはアクセシブルな名前がなければなりません (ARIA treeitem nodes should have an accessible name)

すべてのARIA treeitemノードにアクセシブルな名前があることを確認してください

参考：Deque Universityの解説

見出しは空にしてはなりません (Headings should not be empty)

見出しに認識可能なテキストが存在することを確認してください

参考：Deque Universityの解説

テーブルのヘッダーは空にしてはなりません (Table header text should not be empty)

テーブルのヘッダーに認識可能なテキストが存在することを確認してください

参考：Deque Universityの解説

フォーカス順序に含まれる要素には、適切なロールがなければなりません (Elements in the focus order should have an appropriate role)

フォーカス順序に含まれる要素にインタラクティブコンテンツに適したロールがあることを確認してください

参考：Deque Universityの解説

フレームはaxe-coreでテストしなければなりません (Frames should be tested with axe-core)

<iframe>および<frame>要素にaxe-coreスクリプトが含まれていることを確認してください

参考：Deque Universityの解説

見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

見出しの順序が意味的に正しいことを確認してください

参考：Deque Universityの解説

ページ上の隠れているコンテンツは分析されなければなりません (Hidden content on the page should be analyzed)

隠れているコンテンツについてユーザーに通知してください

参考：Deque Universityの解説

画像の代替テキストはテキストとして繰り返されるべきではありません (Alternative text of images should not be repeated as text)

画像の代替がテキストとして繰り返されていないことを確認してください

参考：Deque Universityの解説

フォーム要素には視認できるラベルがなければなりません (Form elements should have a visible label)

すべてのフォーム要素に視認できるラベルがあり、非表示のラベル、titleまたはaria-describedby属性のみを使用してラベル付けされていないことを確認してください

参考：Deque Universityの解説

bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)

bannerランドマークがトップレベルにあることを確認してください

参考：Deque Universityの解説

asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)

complementaryランドマークあるいはasideがトップレベルにあることを確認してください

参考：Deque Universityの解説

contentinfoランドマークは他のランドマークに含まれるべきではありません (Contentinfo landmark should not be contained in another landmark)

contentinfoランドマークがトップレベルにあることを確認してください

参考：Deque Universityの解説

mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)

mainランドマークがトップレベルにあることを確認してください

参考：Deque Universityの解説

ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)

ドキュメント内のbannerランドマークが最大で1つのみであることを確認してください

参考：Deque Universityの解説

ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)

ドキュメント内のcontentinfoランドマークが最大で1つのみであることを確認してください

参考：Deque Universityの解説

ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

ドキュメント内のmainランドマークが最大で1つのみであることを確認してください

参考：Deque Universityの解説

ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

ドキュメントにmainランドマークが含まれていることを確認してください

参考：Deque Universityの解説

ランドマークには一意のロール又はロール／ラベル／タイトル (すなわちアクセシブルな名前) の組み合わせがなければなりません (Landmarks should have a unique role or role/label/title (i.e. accessible name) combination)

ランドマークが一意であることを確認してください

参考：Deque Universityの解説

ユーザーがズームをしてテキストを最大500％まで拡大できなければなりません (Users should be able to zoom and scale the text up to 500%)

<meta name="viewport">で大幅に拡大縮小できることを確認してください

参考：Deque Universityの解説

ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

ページ、またはそのページ中のフレームの少なくとも1つにはレベル1の見出しが含まれていることを確認してください

参考：Deque Universityの解説

プレゼンテーション目的とされている要素は一貫して無視されなければなりません (Elements marked as presentational should be consistently ignored)

プレゼンテーション目的とされている要素には、グローバルなARIAまたはtabindexが指定されておらず、すべてのスクリーン・リーダーが無視するようになっていることを確認してください

参考：Deque Universityの解説

ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)

ページのすべてのコンテンツがlandmarkに含まれていることを確認してください

参考：Deque Universityの解説

scope属性は正しく使用されなければなりません (scope attribute should be used correctly)

scope属性がテーブルで正しく使用されていることを確認してください

参考：Deque Universityの解説

スキップリンクのターゲットが存在し、フォーカス可能でなければなりません (The skip-link target should exist and be focusable)

すべてのスキップリンクにフォーカス可能なターゲットがあることを確認してください

参考：Deque Universityの解説

要素に指定するtabindexは0より大きい値であってはなりません (Elements should not have tabindex greater than zero)

tabindex属性値が0より大きくないことを確認してください

参考：Deque Universityの解説

テーブルのキャプションとサマリーは同一であってはなりません (Tables should not have the same summary and caption)

<caption>要素の内用がsummary属性のテキストと同一ではないことを確認してください

参考：Deque Universityの解説

すべてのタッチターゲットは24pxの大きさか、十分なスペースがなければなりません (All touch targets must be 24px large, or leave sufficient space)

タッチターゲットのサイズとスペースが十分にあることを確認してください

参考：Deque Universityの解説

参考情報

セマンティクスを適切にマークアップする重要性

文書の構造を示すような情報を「セマンティクス（意味情報）」と呼びます。見出し、段落、箇条書きとそれを構成する項目などを例として挙げることができます。

視覚的にコンテンツを利用する多くの場合において、文字のサイズやフォントの種類、レイアウトなどの視覚的情報からそのセマンティクス（意味情報）を判断します。例えば、大きめの文字で画面上部中央に表示されているフレーズを、そのページの内容を表す見出しだと判断する、といった具合です。

ところが、スクリーン・リーダーを初めとする支援技術は、少なくとも現時点ではこのようなセマンティクスを視覚的な特徴から正確に推測することができません。そのため支援技術は、HTMLでどのように記述されているかという情報に基づいてセマンティクスを判断しています。上記の例の場合、見出しのテキストがh1要素になっていれば、支援技術はそれが見出しであることを理解してユーザーに伝えることができますが、div要素やspan要素になっていてCSSで文字サイズなどが変更されているだけの場合、支援技術がそれを見出しだと判断することはできません。

支援技術、特にスクリーン・リーダーが正しいセマンティクスをユーザーに伝えられることは、より効率的なコンテンツ利用につながります。例として、見出しジャンプ機能を用いた斜め読みを挙げることができます。

多くのスクリーン・リーダーには、複数のh1～h6要素があるページにおいて、前後の見出しにジャンプして読み上げさせる機能があります。この機能を使って見出しの拾い読みをしたり、見出しの直後のテキストだけを読んだりして、いわば斜め読みのようなことが可能になります。スクリーン・リーダーを利用している視覚障害者の多くは、画面全体を一度に見ることができず、アクセスしたページに必要としている情報が掲載されているかどうかの判断を短時間にすることができませんので、このような手法でコンテンツを利用できることは、効率的なコンテンツ利用につながります。

支援技術が適切にコンテンツを解析し、ユーザーに伝えられるようにするために、コンテンツの内容に応じたセマンティクスを表す適切なマークアップを行うことが極めて重要です。

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

関連FAQ

• 見出しレベルの指定

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

UIコンポーネントのアクセシビリティー

HTMLで記述されるコンテンツの場合は、仕様に則って適切なセマンティクスを示すマークアップをすることで、支援技術が利用しやすいコンテンツにすることができます。（参考：セマンティクスを適切にマークアップする重要性）

これはユーザーの操作を受け付けるUIコンポーネントにおいても同様です。すなわち、リンクやボタン、各種フォーム・コントロールなどは、適切なHTMLを用いて実装することで、支援技術やキーボード操作でも利用しやすいものになります。

一方、JavaScriptで記述されたものなど、標準的なHTMLの要素以外を用いてUIコンポーネントを実装する場合、適切にHTMLでマークアップした場合同様に、支援技術が適切にコンテンツを解析し、ユーザーに提示できるようにする必要があります。アクセシビリティーが考慮されている開発フレームワークやデザイン・システムを利用している場合は、標準的なコンポーネントで実装することで、問題の少ない実装にできる場合が多いですが、独自にUIコンポーネントを実装する場合には、特に以下の点に注意する必要があります。

まず重要なことは、コンポーネントの名前（nameやAccessibleNameなどとも呼ばれます）と、roleが定義されていて、支援技術が取得できる状態になっていることです。

AccessibleNameは、支援技術が利用するための名前で、スクリーン・リーダーの読み上げや、音声認識を用ている場合のクリック・ターゲットの指定などに利用されます。HTMLの要素においては、要素の中のテキスト、特定の属性の値、その要素に関連付けられた別の要素などを利用して自動的に付与されます。

一方roleは、その要素やコンポーネントの役割を示すもので、支援技術の挙動に影響します。HTMLの要素においては、要素ごとにデフォルトが決まっていて、それとは異なるroleを割り当てる必要があるときにはrole属性を用います。

例1：a要素の場合、要素の中のテキスト（リンク・テキスト）がAccessibleName、デフォルトのroleはlink。

例2：img要素の場合、alt属性の値がAccessibleName、デフォルトのroleはimg。

例3：<input type="checkbox" />の場合、関連付けられたlabel要素の中身がAccessibleName、デフォルトのroleはcheckbox。

参考：要素ごとのAccessibleNameとroleの付与については、HTML Accessibility API Mappings 1.0で定義されています。

Reactコンポーネントのように、最終的にHTMLとしてブラウザーが処理するものを生成するコンポーネントの場合は、そのHTMLが適切なセマンティクスを示す要素で構成されているようにしたり、必要に応じてaria-label属性やrole属性を用いて適切な値が含まれるHTMLにすることで、AccessibleNameとroleを提供することができます。

AccessibleNameやroleは、例えばChromeの開発者ツールのAccessibility Treeから確認することができるようになっていれば問題ありません。

これに加えて、コンポーネントの状態やプロパティー、ユーザーが設定できる値について、支援技術が制御できるようにする必要があります。WCAG 2.1の解説書では、フォーカスの状態の取得と制御、チェックボックスなどの状態といったものを例示しています。

上述の通り、まずは開発者ツールで最低限の確認が可能ですが、実際にはスクリーン・リーダーなどの支援技術のユーザーが正しく利用できる状態を確保することが目的ですので、最終的には支援技術で使い勝手を確認するのが望ましいでしょう。

関連ガイドライン項目

• マークアップと実装：対話的なUIコンポーネントの実装

• マークアップと実装：コンポーネントをアクセシブルにする

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

ページを開いたり新たなページに遷移した直後、多くのスクリーン・リーダーでは自動的にtitle要素の内用を読み上げます。また、複数のウィンドウやタブを切り替えながら利用している場合、title要素の中身で目的のウィンドウ/タブかを判断します。したがって、title要素の内用をそのページを特定できるものにすることが求められます。

目的のページにたどり着いたら、ユーザーはまずそのページに自分が求めている情報や機能があるかどうかを判断する場合が多いでしょう。画面全体を一度に見ることができる場合、この判断は容易ですが、スクリーン・リーダーを使っているユーザーの多くは、ある程度ページの中身を読まないと判断することが困難です。

多くのスクリーン・リーダーには、ARIAランドマークで示される複数の領域の間を移動する機能があります。

ARIAランドマークで示される領域とは、header要素、nav要素、main要素、footer要素、aside要素などで、ページを構成する領域を示したものです。これらの要素の代わりに、div要素などに対してrole属性を用いて明示する方法もあります。

ページ上に存在する領域を確認するには、ページのソースを確認するか、Chrome拡張、Firefoxアドオン、Opera拡張、Edgeアドオンとして提供されているLandmark Navigation via Keyboard or Pop-upのようなツールを活用すると良いでしょう。

ページを構成するすべての要素が適切な領域に含まれていれば、ユーザーは斜め読みのような形でページ全体の構成を把握することができ、また目的の情報が掲載されているかどうかの判断や目的の情報を迅速に見つけることに役立てることができます。

ARIAランドマークについて詳しくは、以下のMDNの記事を参考にしてください：

• ARIA: banner ロール

• ARIA: complementary ロール

• ARIA: contentinfo ロール

• ARIA: form ロール

• ARIA: main ロール

• ARIA: navigation ロール

• ARIA: region ロール

• ARIA: search ロール

さらに、特に長いページにおいてより効率的な斜め読みを可能にするためには、h?要素を用いてページ内に複数の見出しを配置することが有効です。ただ、コンテンツの量や性質によっては、複数の見出しを配置することが必ずしも適当ではない場合もありますので注意が必要です。

複数の見出しがあるページの場合、ページ内の情報の構造に合わせて適切な見出しレベルを用いることが重要です。たとえば、記事のタイトルはh1要素、記事中の小見出しはh2要素、さらに仮想の見出しはh3要素を用いる、といった具合です。

実際にコンテンツを読み始めるとき、ナビゲーションのリンクなどを飛ばして本文の先頭に移動することになります。本文部分がmain要素でマークアップされていたり、本文の先頭の見出しがh1でマークアップされていれば、スクリーン・リーダーの機能を活用して本文の先頭に容易に移動することが可能です。

そしてさらに読み進めていくに当たっては、スクリーン・リーダーはDOM treeに出現する順序（≒HTMLソースの記述順序）に従って読み上げます。そのため、画面上ではCSSによって隣接した位置に表示されている要素であっても、DOM tree上で離れた位置にあれば、画面表示と読み上げの順序が異なることになります。当該要素が隣接していることで、その意味が伝わりやすいような場合は特に、DOM tree上の順序が適切になっていることが重要です。

なお、ユーザーの操作によって表示されるコンテンツが変化するようなページについては、さらに注意が必要です。DOMツリーとスクリーン・リーダーも合わせて参照してください。

関連ガイドライン項目

• ページ全体：タイトルの指定

• ページ全体：ページを構成する領域の明示

• ページ全体：本文の開始位置の明示

• ページ全体：適切な記述順序

• ページ全体：適切なセクション分けと見出しの付与

画面の表示方向と肢体不自由者の利用

Webページは様々な端末で表示されることを前提にデザインする必要があります。

肢体不自由のユーザーの中には、一定の姿勢でなければ端末を利用できない人や、たとえば車椅子に端末を固定して使う必要がある人がいます。この場合、画面の方向（縦置き/横置き）も固定されている場合がありますので、特定の画面方向を前提にしたページのデザインは避けなければなりません。

ただ、このガイドラインの意図は、縦置きでも横置きでも全く問題なく表示されるようにするということではなく、例えば画面に表示が納まらなくてもかまわないので、画面の回転を許容するということです。

また、このガイドラインではコンテンツの性質上必須の場合は、画面方向を固定することを許容しています。特定の画面方向を前提としなければ意図が伝わらない視覚的表現をする場合などがこれに当たります。

関連ガイドライン項目

• ページ全体：画面方向を固定しない

使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

サイト内のナビゲーションの仕組みやサイトの構造は、そのサイトの使い勝手に影響します。ここでは、一貫性のあるナビゲーション、ページの場所の明示、複数の動線の提供の重要性について説明します。

ナビゲーションの一貫性

画面表示を拡大して利用しているロービジョンのユーザーは、画面の一部分だけを見て操作を行っている場合があります。このようなユーザーの場合、どのページにおいてもナビゲーションのためのリンクの出現順序やレイアウトが一貫していると、ページの構造などを推測しやすくなり、目的の機能をより早く、容易に見つけることができます。

また、スクリーン・リーダーのユーザーの場合、複数のページで共通に出現するナビゲーションなどを毎回すべて読み上げさせるのは時間もかかり非効率的です。しかし、出現順序やレイアウトが一貫していれば、必ずしも毎回同じ内容を読み上げさせる必要がなくなります。

このとき重要なことは、視覚的に出現順序やレイアウトの一貫性があることに加えて、マークアップについても一貫したものを用いるということです。スクリーン・リーダーは、マークアップが示すセマンティクスを伝えるための情報を付加します。したがって、視覚的に同じものでもマークアップが異なれば、読み上げられ方も異なってしまいます。つまり読み上げられ方の一貫性を欠く結果になってしまいます。

ページの場所の明示

そのページが、サイト構造の中のどこに位置しているのかを明示することは、ユーザーがサイト構造を理解するために重要です。サイト構造を理解することで、ユーザーは目的のページに到達しやすくなります。また、サイト構造を理解することで、様々な操作に当たっての推測を容易にします。

例えば、サイトのトップページからの階層構造を示すパンくずリストを表示することは、ユーザーが現在のページの位置を把握するのに役立ちます。

また、現在のページが、グローバル・ナビゲーションのどの項目に属しているのかを示すことも、ユーザーがサイト構造を理解するために役立ちます。これには、視覚的にグローバル・ナビゲーションの項目を強調表示する方法が考えられます。加えて、aria-current属性を適切に用いることで、スクリーン・リーダーのユーザーにも、現在のページがどの項目に属しているのかを伝えることができます。

複数の動線の提供

ページへの動線が1つしかないページの場合、サイト構造を正確に理解している、あるいは容易に推測できるユーザーでなければ、到達するのが困難なページになってしまいます。この問題を軽減するために、複数の動線を提供することが推奨されています。

具体的には、グローバル・ナビゲーションから到達できるページの場合、サイト内のどこからでも到達できることになりますので、この条件を満たします。また、特定のページ中のリンクから到達できることに加えて、他の何らかの手段で到達できれば、この条件を満たします。具体的には、以下のような例を挙げることができます。

• ヘルプ・ツールが利用ページからのリンク

• サイト内検索の結果からのリンク

• 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示した結果からのリンク

しかし、以下の例に挙げるような、特定の文脈で表示されなければ意味が無いようなページに複数の動線を提供する必要はありません。

• ウィザードの途中で表示されるページ

• 操作結果の表示など、特定の操作をしたときのみ表示されるページ

関連ガイドライン項目

• ページ全体：コンポーネントの一貫した出現順序

• ページ全体：複数の到達手段

• ページ全体：現在地の明示

制限時間とアクセシビリティー

ユーザーの中には、操作や情報の取得により長い時間を要する人がいます。

スクリーン・リーダーを利用している全盲のユーザーは、画面の広範囲に表示されている情報を一度に確認することができません。同様に、視野が狭かったり画面の拡大ソフトなどを用いていたりするロービジョンのユーザーも、画面の広範囲に表示されている情報を一度に確認することが困難です。このようなユーザーは、コンテンツの確認により多くの時間を要する場合があります。

一方、上肢が不自由なユーザーの場合、マウスやキーボードの操作により長い時間を要することがあります。また、マウスやキーボードの操作が難しいユーザーは、音声入力やその他の代替入力手段を利用しますが、このような場合も、一般的にマウスやキーボードを利用するよりも長い時間を要することがあります。

このように情報の取得やフォームの操作により長い時間が必要なユーザーの場合、もしフォームの入力などに制限時間が設定されていると、必要な操作を完了できないということが起こり得ます。また、なにも操作しない状態が一定時間続くとログイン・セッションが無効になるような設計の場合も、ユーザーの意図に反してログアウトしてしまうことにつながる可能性があります。

WCAG 2.1では、レベルAの達成基準で制限時間を設定する場合に満たすべき条件を示しています。

また、レベルAAAの達成基準では、そもそも制限時間を設定しないことを求めています。さらに、ユーザーの意図に反してログアウトした状態になったり、制限時間を超過した場合に、直前の操作を継続できるようにすることを求めています。

当ガイドラインは、基本的にはWCAG 2.1のレベルAとレベルAAの達成基準に基づいていますが、実際には不要な場合でも安易に制限時間を設定するようなことは避けるべきであるという観点から、レベルAAAの達成基準に基づいたガイドライン項目も設けています。

関連ガイドライン項目

• ログイン・セッション：ログイン・セッションの有効期限

• ログイン・セッション：制限時間超過後の操作の継続

• フォーム：フォーム入力の制限時間

• フォーム：制限時間超過後の操作の継続

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

テキスト情報においてどれだけ多くの人に情報が伝わるかは、用いられている文言次第です。当然、分かりやすい表現や一貫した表記を心掛けるといったことは必要ですが、これらはアクセシビリティー以前の問題です。テキストの品質を一定以上に保つために、ライティング・ガイドラインを別に定めると良いでしょう。

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

テキスト情報の文言について、アクセシビリティーの観点から特に重要なのは、特定の感覚を前提とした表現を単独で用いないということです。

例えば、「赤色のアイコンをクリック」というテキストがあったとします。もし赤色のアイコンが画面上に1つだけしかない場合、多くの人にとってはこの説明で十分ですし、それが一番分かりやすい説明になり得るでしょう。しかし、色弱のユーザーには他の色の同じ形状のアイコンとの区別ができない可能性があります。さらに、スクリーン・リーダーのユーザーには、全く伝わらない可能性が高いでしょう。

ではこのような表現を避けるべきかというと、全くそんなことはありません。この表現では伝わらない可能性がある人にも理解しやすい表現を併用すれば問題ありません。この場合なら、アイコンの色だけではなく、形状、表示位置、アイコンに付与されているテキストのラベルなど、必要に応じていくつかの情報を提示することで、この問題を回避することができます。

明確な見出しやラベル

テキスト情報の文言についてもう1つ重要な点は、見出しやラベルに用いるテキストの文言を分かりやすいものにする、という点です。見出しに適切な文言が用いられていれば、そのセクションに書かれている情報が自分にとって必要なものかどうかの判断が容易になります。これは、特にスクリーン・リーダーのユーザーには重要です。

ラベルに関しても分かりやすい文言を用いることで、そのコンポーネントやフォーム・コントロールの目的を正確に伝えることができます。

テキスト情報の文言の明確さはすべてのユーザーに役立ちますが、特に支援技術のユーザーにとっては、コンテンツの理解やナビゲーションをより効果的に行うのに大いに役立ちます。

関連ガイドライン項目

• テキスト：特定の感覚に依存しない表現

• テキスト：複数の視覚的要素を用いた表現

• テキスト：適切な文言の見出し

関連FAQ

• 見出しレベルの指定

画像化されたテキストの問題点

文字情報は、テキスト・データとして提供されていれば、全盲のユーザーはスクリーン・リーダーで読むことができますし、ロービジョンのユーザーはサイズやフォント、表示色などを見やすいものに変更することでより効率的に読むことができます。しかし、画像にしてしまうとこれらの特性は失われ、全盲のユーザーはアクセスできなくなりますし、ロービジョンのユーザーの中には読みづらく感じる人も現れることが考えられます。さらに画像化されたテキストは、コピーすることができず、特に障害がないユーザーにとっても利便性を損なうものです。

このような理由から、画像化したテキストの利用はなるべく回避すべきです。

ガイドラインでは、以下のような場合に関しては、画像化したテキストの利用を認めています。

なお、利用する場合は、十分なコントラストを確保し、テキストによる代替情報を提供する必要があります。

1. その情報を提示するうえで必要不可欠な表現方法が、画像化したテキストを用いないと実現できない場合

   ロゴやバナーなどが該当します。

2. ユーザーの要求に合わせて見た目（文字サイズやフォントの種類など）をカスタマイズした画像を提供できる場合

   例えば、画像化されたテキストを表示しているページに、文字サイズやフォントなどを変更するためのボタンが設置されていて、画像化されたテキストについてもユーザーが読みやすいように表示を調整できるような仕組みが提供されているような場合です。

関連ガイドライン項目

• 画像化されたテキスト：画像化されたテキストを使用しない

• 画像化されたテキスト：テキスト情報の提供

• 画像化されたテキスト：画像内のテキストのコントラスト比

• 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

画像化されたテキストを使用する場合の代替情報の提供

画像化されたテキストは結局画像ですから、用いる場合には画像を用いる場合と同じことが求められます。特に重要なのは、その画像化されたテキストに対する適切な説明を提供することです。

基本的には画像化されている文字情報をそのままテキストとして提供すれば良いですが、その長さによって適切な提供方法は異なります。

文字情報が数単語よりも短いような場合は、単純にalt属性にその文字情報を指定すれば良いでしょう。一方、文字情報が多い場合は、aria-describedby属性の利用など、画像に対して詳細な説明を付与する場合の手法を用いるのが適当な場合が多いでしょう。

関連ガイドライン項目

• 画像化されたテキスト：テキスト情報の提供

コントラスト比確保の重要性

テキストや画像の表示色と背景色のコントラスト比が極端に低い状態は、視覚的にWebを利用している大半のユーザーにとって、そのコンテンツの利用を困難なものにします。ロービジョンのユーザーの中には、低いコントラスト比の影響をより強く受けるユーザーがいます。

当ガイドラインでは、視覚的に提示される情報について、一定のコントラスト比を確保することを求めています。当ガイドラインで示している基準は、WCAG 2.1のレベルAAの達成基準で示されているものですが、当ガイドラインではレベルAに相当するものとしており、必ず順守する必要があります。

対象となるのは、テキストと画像の両方で、画像にはアイコンや画像化されたテキストも含まれます。テキストの場合、文字のサイズや書体によって基準が異なります。

画像の場合、隣接領域とのコントラスト比も確保する必要があります。

参考

• コントラスト比のチェック方法

• 社内デザイン・システムVibesのカラー・コントラスト表

関連ガイドライン項目

• テキスト：コントラスト比の確保

• テキスト：モバイルOSでのコントラスト比の確保

• 画像化されたテキスト：画像内のテキストのコントラスト比

• 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

• 画像：隣接領域とのコントラスト比の確保

• 画像：画像内のテキストのコントラスト比

• 画像：モバイルOSでの画像内のテキストのコントラスト比

• アイコン：コントラスト比の確保

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

ロービジョンのユーザーの中には、画面表示を拡大してPCやスマートフォンを操作している人がいます。拡大表示時にも、レイアウトが崩れるなどして情報を得にくくなったり、操作をしにくくなったりといったことがないようにする必要があります。

Webブラウザーの拡大表示

Webブラウザーで表示を拡大する方法としては、ブラウザーのズーム機能を使う方法と、文字サイズを変更する方法があります。

当ガイドラインでは、いずれの方法を使った場合も、200パーセントに拡大した際問題が発生しないようにすることを求めています。この条件を満たすためには、少なくともズーム機能で200パーセントの拡大表示を問題なく行える必要があります。

一方文字サイズ変更機能による拡大表示については、200パーセントの拡大設定をしたときに表示が適切に拡大されることが望ましいのは言うまでもないことですが、実際に表示が拡大されるかどうかにかかわらず、コンテンツの理解や利用を阻害するようなレイアウト崩れが発生しないことが最低限求められています。こうすることで、定常的に文字サイズ変更機能を利用しているユーザーの利用を困難にしないことにつながります。

ズーム機能を用いている場合、拡大表示をしても問題が発生することはあまりありません。一方文字サイズ変更機能を用いて拡大する場合、文字サイズの指定にpxなどの絶対値指定とemやremなどの相対値指定が混在している場合などに問題が発生します。

さらに、ガイドラインでは400パーセントに拡大したときに、縦スクロールと横スクロールが共に必要になるようなコンテンツにならないように、適切にリフローすることを求めています。このガイドラインの対応するWCAG 2.1の達成基準（SC 1.4.10）では、縦スクロールのコンテンツ（横書きのコンテンツ）では幅320 CSS px相当の表示にした際に横スクロールが、横スクロールのコンテンツ（縦書きのコンテンツ）では高さ256 CSS px相当の表示にした場合に縦スクロールが、それぞれ発生しないようにリフローすることを求めています。これは、1280x1024のサイズの画面において400パーセントのズーム表示をした場合に、縦横両方のスクロールが必要という状況にならないようにすることを意図しています。

なお、1280x1024のサイズの画面上での表示を確認するためには、ブラウザーのウィンドウをこのサイズにした上で拡大表示をしてみると良いでしょう。以下の手順で、簡単にウィンドウ・サイズを1280x1024に変更することができます。

1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

   コードを表示

   javascript:window.open(location.href,'a11ytest_1280x1024','width=1280,height=1024')
   

   ウィンドウ・サイズを1280x1024にするブックマークレット

2. チェック対象のページを表示した状態で、このブックマークレットを実行。

参考：ズーム機能と文字サイズ変更機能

ズーム機能は、ウィンドウ全体を拡大・縮小する機能で、最近のブラウザーでは標準的な機能です。Google Chromeの場合、Chromeメニューにある「テキストを拡大する」、「テキストを縮小する」を実行することで利用できます。また、これらの機能はそれぞれCtrl++、Ctrl+-を押下することでも実行できます。

一方文字サイズ変更機能は、テキストのサイズのみを変更する機能です。Google Chromeの場合、設定画面の「デザイン」のセクションにある「フォントをカスタマイズ」をクリックして表示される画面で設定します。この画面は、アドレスバーにchrome://settings/fontsと入力することでも表示できます。

なお、Google Chromeにおけるこの設定のデフォルト値は16です。（バージョン85.0.4183.102で確認）文字サイズ変更機能を用いた後に標準的な表示に戻す場合には、この値を指定します。

モバイル・アプリケーションにおける拡大表示

拡大表示が必要なユーザーがスマートフォン上で動作するアプリケーションを使用する場合は、OSが提供する拡大表示の機能をを活用することが多いと考えられます。以下、拡大表示のための設定手順を示します。

iOSの場合

以下の手順で、最大の拡大表示にすることができます。iOSのDynamic Type機能に対応しているアプリケーションの場合、適切に拡大表示されます。

1. 「設定」アプリ、アクセシビリティ ‣ 画面表示とテキストサイズ ‣ さらに大きな文字の順にタップ

2. 「さらに大きな文字」を有効にする

3. 画面下部のスライダーで最大のサイズを指定

Androidの場合

注：以下の記述はPixel 8上のAndroid 16における操作手順です。端末の機種やAndroidのバージョンによって異なっている場合があります。

以下の操作で、文字の表示サイズを変更することができます。

1. 「設定」アプリ、ユーザー補助 ‣ 表示サイズとテキストの順にタップ

2. 「フォントサイズ」のスライダーで文字のサイズを指定

また、以下の操作で文字以外の部分も含めてサイズを調整することができます。

1. 「設定」アプリ、ユーザー補助 ‣ 表示サイズとテキストの順にタップ

2. 「表示サイズ」のスライダーで表示サイズを指定

なお、この2つの設定を組み合わせて使用することも可能です。

関連ガイドライン項目

• テキスト：ズーム機能を用いた200パーセントの拡大表示

• テキスト：文字サイズ設定の変更

• テキスト：ズーム機能を用いた400パーセントの拡大表示

リンク先の内容を推測しやすくする

リンク先に求めている情報があるかどうかを推測しやすくすることは、どのようなユーザーにとっても使い勝手の向上につながります。

リンク先の内容の推測を容易にして、不必要なページ遷移を抑制することは、肢体不自由でマウス操作に時間がかかるなどといった状況のユーザーにとっては特に重要です。

また、スクリーン・リーダーのユーザーは、スクリーン・リーダーが提供するページ中のリンクを一覧表示する機能を用いて、目的のページへのリンクを探す場合があります。さらに、Tab / Shift+Tabキーを繰り返し押すことでフォーカスを移動させ、目的のリンクを探すユーザーも少なくありません。このような場合、リンク・テキスト（a要素の中身）が、リンク先のページの内容を推測できるものになっているかどうかが重要です。

注意すべきリンク・テキストの文言の例（「」部分がリンク・テキスト）

NG	OK
○○は「こちら」	「○○はこちら」
「もっと見る」	「○○についてもっと見る」
「詳細」	「○○についての詳細」

また、マークアップによってリンクの意図が明確になっていれば、ガイドラインを満たすことができます。

具体的には、リンク・テキストが同じ複数のリンクがあるページで、以下のような条件を満たしている場合を例として挙げられます。

• 当該のリンクがページ中の異なるセクションに含まれている場合、見出しが適切にマークアップされていて、各リンクが含まれるセクションが明確になっている

• リストの各項目に同じリンク・テキストのリンクがある場合に、適切にリスト・アイテムがマークアップされていて、どのリスト項目に含まれるリンクかが明確になっている

• 表の各行に同じリンク・テキストがある場合に、適切にtable要素や関連要素でリンクが含まれる行と列が明確になっている

関連ガイドライン項目

• リンク：適切なリンク・テキスト

DOMツリーとスクリーン・リーダー

スクリーン・リーダーがWebページを読み上げる際、DOMツリーに出現する順序（HTMLの記述順序）に従ってコンテンツを読み上げます。そのため、仮に画面上では隣接した位置に表示されているものであっても、DOMツリー上で離れた位置にあると、スクリーン・リーダーのユーザーにとっては見つけづらい、認知しづらいものになってしまいます。

静的なページの場合は、HTMLの記述順序に気を付ければ良いのですが、ユーザーの操作に応じてコンテンツが増減するようなページにおいては、どのようにDOMツリーを構成するのかという点について注意が必要です。

しばしば見られる問題のある事例として、モーダル・ダイアログの表示を挙げることができます。

表示されるモーダル・ダイアログの実体である要素が、DOMツリーの末尾など、その表示をトリガーしたボタンなどとDOMツリー上で離れた場所に挿入されると、スクリーン・リーダーのユーザーがその表示に気づかない可能性が高くなります。

理想的には、モーダル・ダイアログの表示時にはそのダイアログの内容以外のコンテンツをaria-hidden属性を使うなどの方法でスクリーン・リーダーから隠蔽するべきです。ただ、既存のコンテンツに対してこのような変更をするのは容易でないことも多いので、ダイアログの内容と、その裏側の内容の両方がスクリーン・リーダーから見えているいる状態になることはよくあります。この際、そのダイアログの内容が、DOMツリー上でそのダイアログの表示をトリガーするボタンの直後にあれば、スクリーン・リーダーのユーザーも容易にその存在に気づくことができ、内容を確認することができます。

開閉できるメニューやアコーディオンなども、同様の問題を引き起こしがちです。

関連ガイドライン項目

• 動的コンテンツ：支援技術への適切な情報提供の維持

マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

マウス・ポインターのマウスオーバー（ホバー）やキーボード・フォーカスを受け取ったことがトリガーになって新たなコンテンツが表示される場合、特に拡大表示を利用しているロービジョンのユーザーのアクセスを阻害する可能性があります。

拡大表示を利用している場合、一度に画面に表示されるのはコンテンツの一部分に過ぎません。ユーザーはマウス・ポインターを移動させることで、拡大表示する部分を切り替えながら、最終的にコンテンツ全体を理解するという作業をします。

まず、この一連の動作の中で、マウス・ポインターが意図せずしてマウスオーバー表示をトリガーしてしまうことがあります。そして、こうして表示されたコンテンツによってそれまで閲覧していたコンテンツや操作しようとしていたコンポーネントが適切に表示されなくなり、動作を続けられなくなる場合があります。

もちろん、マウスオーバーで表示されたコンテンツが他のコンテンツの利用を阻害しないようにすれば問題はありませんが、ユーザーによって異なる様々な拡大率のすべてを想定することは現実的ではありません。もしこのとき、マウス・ポインターを移動させずに、例えばEscキーを押すことでマウスオーバー表示されたコンテンツを非表示にすることができれば、ユーザーはそれまで行っていた動作を容易に継続することができます。

一方、マウスオーバーで表示されたコンテンツを拡大表示を用いているユーザーが読みたい場合、特に表示されたコンテンツが占める領域が大きい場合には、表示されたコンテンツをスクロールさせるような操作が必要になります。しかし、もしマウス・ポインターがマウスオーバーのトリガーとなったオブジェクトから離れることでそのコンテンツが非表示になってしまうと、こういった操作を行えなくなります。この問題を回避するために、マウスオーバーで新たに表示されたコンテンツ上にマウス・ポインターがある場合も、その表示が継続されるようにすることが求められています。

このように、拡大表示を用いている場合は、用いていない場合と比較してより多くの操作が必要となり、同じコンテンツを読むのにもより時間がかかる場合があります。そのため、マウスオーバー表示されたコンテンツを非表示にする操作をユーザーが能動的にした場合と、表示されているものが意味を持たなくなった場合（例えば「読み込み中……」といったメッセージなど）以外には、基本的にマウスオーバー表示されたコンテンツを自動的に非表示にしないことが求められています。

これらの基準を満たしていても、マウスオーバー表示のトリガーとなるオブジェクトの位置と実際に表示されるコンテンツの表示位置が離れていると、ユーザーはその表示に気づかない場合があるという点には注意が必要です。本当にマウスオーバーによる表示が最善の方法なのか、よく検討する必要があるでしょう。

なお、マウスオーバーをトリガーとする場合、キーボード操作を可能にするを満たすために、キーボード・フォーカスも合わせてトリガーにする必要がある点に十分注意する必要があります。

関連ガイドライン項目

• 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの拡大

• 動的コンテンツ：マウスオーバー（ホバー）で表示されるコンテンツの非表示

ステータス・メッセージとスクリーン・リーダー

ステータス・メッセージは、状況に応じて動的に表示されたり変更されたりします。画面表示を見ることができない場合、このような動的な変化を認知することが不可能です。

この問題を回避するために、ステータス・メッセージについてスクリーン・リーダーなどの支援技術が適切に処理できるようにすることが求められています。具体的には、以下に示すARIAライブ・リージョンを活用することで、自動的に読み上げられるようにすることが必要です。

なお、このステータス・メッセージに関するWCAG 2.1の達成基準はレベルAAとされていますが、freeeのプロダクトにおいては操作の結果をユーザーに知らせる場合など、比較的重要な場面でステータス・メッセージが活用されていますので、当ガイドラインではこの達成基準をレベルA相当のものとしています。

ARIAライブ・リージョンの実装例と利用時の注意点

ステータス・メッセージなど、自動的に読み上げられるようにする必要があるコンテンツがある場合は、ARIAライブ・リージョンを用います。

aria-live属性が指定されているか、role属性でstatus, alert, logなどの特定の値が指定されている要素があると、これらがARIAライブ・リージョンとして扱われます。ARIAライブ・リージョンがページ中にあると、スクリーン・リーダーはその要素を監視して、内容に変化があると読み上げることが期待されています。

参考：ARIA ライブリージョン - アクセシビリティ | MDN

基本的な実装例

以下のコードが、もっとも基本的な実装です。

aria-live-basic.html：

コードを表示

 1 <!DOCTYPE html>
 2 <html lang="ja">
 3   <head>
 4     <meta charset="UTF-8"/>
 5     <title>ARIAライブ・リージョンの基本的な実装例</title>
 6     <script>
 7       function showStatus() {
 8         let statusRegion = document.getElementById("status-region");
 9         let button = document.getElementById("button");
10         let msgContainer = document.createElement("p");
11         let msg = document.createTextNode("ページが更新されました。");
12         msgContainer.appendChild(msg);
13         statusRegion.appendChild(msgContainer);
14         button.setAttribute("disabled", "true");
15       }
16     </script>
17   </head>
18   <body>
19     <h1>aria-live属性を使って自動的にメッセージが読み上げられる</h1>
20     <div aria-live="polite" id="status-region"></div>
21     <p>下のボタンを押すと、「ページが更新されました。」というテキストが表示され、自動的に同じ内容が読み上げられます。</p>
22     <button id="button" onclick="javascript:showStatus()">ページを更新</button>
23   </body>
24 </html>

20行目の空のdiv要素がARIAライブ・リージョンです。

以下は上記のコードを表示したもので、「ページを更新」を押下するとARIAライブ・リージョンがサポートされている環境では、追加されたメッセージが読み上げられます。

注意：ページのロード時にARIAライブ・リージョンが存在しないと読み上げられない

基本的に、ARIAライブ・リージョンはページのロード時に存在することが期待されています。そのため、メッセージを表示するのと同時にaria-live属性が付いた要素を追加しても、適切に読み上げられません。一部読み上げられる環境が存在するという情報もありますが、本稿執筆時、NVDA日本語版2020.3とGoogle Chromeの組み合わせでは読み上げられないことを確認しています。

しかし、以下のようにARIAライブ・リージョンの設置とその内容の更新に時間差を与えると、NVDAでも読み上げられることを確認しています。

aria-live-timer.html：

コードを表示

 1 <!DOCTYPE html>
 2 <html lang="ja">
 3   <head>
 4     <meta charset="UTF-8"/>
 5     <title>ARIAライブ・リージョンをページのロード後に挿入する（要注意）</title>
 6     <script>
 7       function addText(elm, str) {
 8         elm.appendChild(str);
 9       }
10 
11       function showStatus() {
12         let button = document.getElementById("button");
13         button.setAttribute("disabled", "true");
14         let statusRegion = document.getElementById("status-region");
15         let msgContainer = document.createElement("p");
16         msgContainer.setAttribute("aria-live", "polite");
17         statusRegion.appendChild(msgContainer);
18         let msg = document.createTextNode("ページが更新されました。");
19         setTimeout(addText, 1, msgContainer, msg);
20       }
21     </script>
22   </head>
23   <body>
24     <h1>aria-live属性を使って自動的にメッセージが読み上げられる</h1>
25     <div id="status-region"></div>
26     <p>下のボタンを押すと、「ページが更新されました。」というテキストが表示され、自動的に同じ内容が読み上げられます。</p>
27     <button id="button" onclick="javascript:showStatus()">ページを更新</button>
28   </body>
29 </html>

この方法を用いる場合、以下の点に注意が必要です。

• ARIAライブ・リージョンの挿入とその内容の更新との時間差を発生させる際、while分を使った手法では読み上げられず、setTimeout()などを使う必要がある。

• 上記サンプルでは時間差を1msとしているが、実装状況や利用環境によってはもっと長い時間差が必要な場合が考えられる。

• この手法では読み上げられない環境が存在する可能性がある。

このように、後からARIAライブ・リージョンを挿入する手法には不確実な点もあるので、なるべくページのロード時にARIAライブ・リージョンを設置するようにするのが良いでしょう。

関連ガイドライン項目

• 動的コンテンツ：ステータス・メッセージの適切な実装

自動的に変化するコンテンツの問題点

認知障害や注意障害があるユーザーの中には、以下のようなコンテンツが他のコンテンツと一緒に同じページに表示されていると、情報を理解することが難しくなるユーザーがいます。

• 自動更新される

• 動きがある

• 点滅する

• 自動スクロールする

そもそもこのような動的な変化が自動的に発生しない、または発生しても短時間しか継続しなければ、このようなコンテンツが問題になることはありません。そうでない場合について、WCAGではその動的変化をユーザーが制御できるようにすることを求めています。

さらに、WCAGのより厳しい基準では、緊急の場合を除いて、プッシュ通知などによる割り込みをしないことが求められています。一般に割り込みが発生すると、認知障害や注意障害があるユーザーの集中を削ぐだけでなく、スクリーン・リーダーを利用している場合に情報の読み上げが中断され、混乱を生じる場合があります。そういった混乱を生じないために、WCAGでは健康、財産、安全を守るために必要な場合を、割り込みを発生させても良い場合として限定しています。

ページの中のある程度の面積において、輝度が特定の頻度で交互に変化する（閃光が発生する）と、一部のユーザーの光過敏性発作を誘発する可能性があります。WCAGでは、レベルAの達成基準で一定の条件下での閃光の発生を許容しています。一方レベルAAAの達成基準として、どのような場合も閃光は1秒間に3階以内という条件を示しています。しかし、レベルAの限定的な条件を正確に満たすことや、満たしていることを確認することが難しい場合もあり得ますし、ユーザーの安全に関わることですから、freeeではより厳しい条件を示しているレベルAAAの達成基準を採用しています。

参考：この達成基準はいわゆるポケモンショックを受けて追加されたものです。

関連ガイドライン項目

• 動的コンテンツ：点滅、自動スクロールを伴うコンテンツ

• 動的コンテンツ：自動更新されるコンテンツ

• 動的コンテンツ：閃光を放つコンテンツ

• 動的コンテンツ：割り込み表示

フォーム・コントロールのラベル付けの必要性

例えばあるエディット・フィールドがなにを入力するためのものなのかなど、フォーム・コントロールの目的が分かるようにラベル付けをする必要があります。

画面表示を見ることができる場合、フォーム・コントロールの目的は周囲のテキストとの位置関係から容易に推測することが可能な場合も多いですが、スクリーン・リーダーを利用している場合、位置関係を正確に把握することが困難な場合も多く、結果としてフォーム・コントロールの目的を判断することも困難になってしまいます。フォーム・コントロールと周囲のテキストを明示的に関連付ける（ラベル付けする）ことによって、スクリーン・リーダーなどの支援技術は、そのフォーム・コントロールの目的をユーザーに伝えることができます。

ラベル付けに際しては、実際に画面に表示されているテキストをラベルとして用いることが、画面表示を見ることができるユーザーと、スクリーン・リーダーを利用しているユーザーのコミュニケーションを円滑にすることにつながります。また、画面上のテキストがラベルとして用いられていると、音声入力を利用している場合に目的のフォーム・フィールドを音声で指定しやすくなる可能性が高くなります。

一方非表示のテキストは、コンテンツの修正の際などに修正し忘れるリスクもあります。

こういったことから、なるべくlabel要素やaria-labelledby属性を用いて、表示されているテキストをラベルとして活用することが望ましく、aria-labelledby属性で非表示のテキストをラベルとして用いること、aria-label属性を使うことは避けるほうが良いでしょう。

関連ガイドライン項目

• フォーム：表示されているテキストをラベルとして用いる

• フォーム：表示されているテキストをラベルにできない場合

クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

上肢が不自由なユーザーは、細かい操作が苦手な場合があります。また、ロービジョンのユーザーの中にも細かいマウス操作が苦手なユーザーがいます。アイコンやフォーム・コントロールにおいて、クリックやタップに反応する領域のサイズ（ターゲット・サイズ）が小さすぎると、このようなユーザーにとって、目的の箇所をクリック/タップすることが困難になります。

なお、フォーム・コントロールについてWCAGでは、ブラウザーのデフォルト表示から見た目を変更していない場合は、ターゲット・サイズに関する条件を満たす必要はないとしています。そして、フォーム・コントロールについては、フォーム・フィールドのラベルを適切にマークアップすることで、ラベルもクリック/タップのターゲットの一部になり、ターゲット・サイズを大きくすることができます。

また、文中のテキストがリンクになっているような場合は、ターゲット・サイズに関連するガイドラインの対象ではありません。しかし、ターゲット・サイズが小さすぎると操作が困難になるのはリンクであっても変わりませんので、リンク・テキストを工夫するといった方法で、使いやすいターゲット・サイズとなるように意識すると良いでしょう。

クリック/タップのターゲット・サイズの確認方法

クリックやタップを受け取る要素のサイズは、ブラウザーの開発者ツールを用いれば確認することができます。ただ、この方法の場合、サイズを確認する要素を正確に指定する必要があることに加えて、複雑な方法でサイズが制御されているような場合もあるため、正確に判断することが容易ではない場合もあります。

そこで、1辺が44pxの正方形を画面上に表示し、この正方形とターゲットのサイズを比較するという簡易的な方法を併用すると良いでしょう。

具体的には、以下のブックマークレットを利用することで、1辺が44pxの赤枠の正方形の内側に、1辺が24pxの青枠の正方形をマウスに追従する形で表示することができます。

1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

   コードを表示

   javascript:(function(){var d = document,e=d.createElement('div'),g=d.createElement('div'),w=window;d.body.appendChild(e);e.appendChild(g);e.setAttribute('style','position:absolute;top:0;left:0;z-index:2147483647;box-sizing:border-box;width:44px;height:44px;border:1px solid #f00;background:#fff;opacity:0.5;transform: translate(-50%,-50%);pointer-events:none;');g.setAttribute('style','position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:24px;height:24px;border:1px solid #00f;');w.onmousemove=(function(v){e.style.left=w.scrollX+v.clientX+'px';e.style.top=w.scrollY+v.clientY+'px'})})()
   

   44x44 pxの4角形を表示するブックマークレット

2. チェック対象のページを表示した状態で、このブックマークレットを実行。

関連ガイドライン項目

• アイコン：十分な大きさのクリック/タッチのターゲット

• アイコン：十分な大きさのクリック/タッチのターゲット（モバイル）

• フォーム：十分な大きさのクリック/タッチのターゲット

• フォーム：十分な大きさのクリック/タッチのターゲット（モバイル）

関連FAQ

• ラジオボタンやチェックボックスのサイズ

• テキスト・リンクのクリック可能な領域が小さい

フォーム操作で発生する動的な変化が及ぼす影響

スクリーン・リーダーを利用している全盲のユーザーは、画面の広範囲に表示されている情報を一度に確認することができません。同様に、視野が狭かったり画面の拡大ソフトなどを用いていたりするロービジョンのユーザーも、画面の広範囲に表示されている情報を一度に確認することが困難です。

現在操作しているコンポーネント以外の場所でのコンテンツの更新やフォーム・フィールドの値の変更が動的に発生したとき、このようなユーザーがその変化に気づくことが難しい場合があります。また、ページ全体に及ぶようなコンテンツの更新が発生すると、多くのユーザーの混乱を招く可能性があります。

こういった挙動であっても、ユーザーが充分に予期できれば大きな問題はありませんが、なるべく回避するのが望ましいでしょう。

関連ガイドライン項目

• フォーム：フォーカス時の挙動

• フォーム：フォームの値の変更時の挙動

入力エラーの扱い

スクリーン・リーダーを利用している全盲のユーザーは、画面の広範囲に表示されている情報を一度に確認することができません。同様に、視野が狭かったり画面の拡大ソフトなどを用いていたりするロービジョンのユーザーも、画面の広範囲に表示されている情報を一度に確認することが困難です。

フォーム入力のエラーを示す際、そのフォーム・フィールドの色を変えるなどの方法でエラーであることを示す手法がありますが、こういった手法を使うと、画面全体を見られないユーザーにとってエラー箇所の特定が困難になります。これを避けるために、エラー箇所をテキストによる説明で明示することが求められています。

これに加えてエラーの修正方法を示すこと、そもそもエラー入力が発生しないようにすることが必要で、これらはWCAG 2.1ではレベルAAの達成基準として示されています。

関連ガイドライン項目

• フォーム：テキスト情報によるエラーの特定

• フォーム：エラーの修正方法の提示

• フォーム：誤操作の防止

lang属性と音声読み上げ

スクリーン・リーダーの中には、html要素やその他の要素に指定されたlang属性の値に応じて、読み上げに用いる音声合成エンジンを切り替えるものがあります。freeeで標準環境としているNVDAでも、音声設定を調整することで、多言語の読み上げに対応した状態になります。（スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照）

このようなスクリーン・リーダーでは、例えばhtml要素にlang="en"が指定されているページにアクセスすると、英語用の音声合成エンジンが利用されます。多くの英語用の音声合成エンジンは日本語を正しく扱えませんので、もしそのページのコンテンツが主に日本語で書かれている場合には正しい読み上げが行われず、半角の英数字のみを読み上げるような状態になってしまいます。

特にhtml要素のlang属性はページ全体の処理に影響しますので、適切な値をlang属性に指定することは重要ですが、それ以上に誤った値を指定しないことが重要です。

例えば、以下のようにhtml要素のlang属性に誤った値が指定されているページは、画面表示に問題はありませんが、多言語の読み上げに対応しているスクリーン・リーダーでは適切に読み上げられません。

lang-incorrect.html：

コードを表示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8"/>
 5     <title>誤ったlang属性の指定</title>
 6   </head>
 7   <body>
 8     <p>日本語のテキストは日本語の合成音声で読み上げられます。</p>
 9     <p>HTML要素のlang属性には、ページ全体で主に使われている言語を指定します。</p>
10     <p>Web Content Accessibility Guidelines 2.1や、それを元に作ったfreeeアクセシビリティー・ガイドラインでは、html要素に適切なlang属性を指定することを必須としています。</p>
11   </body>
12 </html>

もし主に日本語で書かれていてhtml要素のlang属性にjaが指定されているページ中に英語のテキスト情報がある場合、その部分も含めて日本語用の音声合成エンジンが用いられます。

“freee”や“Web”といった単語単位であったり、“Web Content Accessibility Guidelines”のように数単語程度のフレーズであれば、このことが問題になることは少ないのですが、例えば1段落以上の長さに渡ってhtml要素のlang属性に指定されているのとは異なる言語のテキストがあるような場合などにおいては、その言語に対応した音声合成エンジンが用いられる方が望ましいことがあります。

以下のように、引用されている英文の箇所にlang="en"を指定してある場合（12行目）、この部分と他の日本語で書かれた部分で読み上げに用いられる音声が変わります。

lang-partial.html：

コードを表示

 1 <!DOCTYPE html>
 2 <html lang="ja">
 3   <head>
 4     <meta charset="UTF-8"/>
 5     <title>lang属性 - 日英混在</title>
 6   </head>
 7   <body>
 8     <p>日本語のテキストは日本語の合成音声で読み上げられます。</p>
 9     <p>Webの考案者、Tim Berners-Leeは、以下のように言っています：</p>
10 
11     <blockquote>
12       <p lang="en">The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
13     </blockquote>
14 
15     <p>適切にlang属性を使うことで、複数の言語が混在しているときの使い勝手が変わってきますが、状況や想定ユーザーに応じて、最善の実装方法が異なることが考えられます。</p>
16   </body>
17 </html>

関連ガイドライン項目

• テキスト：ページの主たる言語の指定

• テキスト：部分的に使用される言語の明示

ユーザーCSSを適用したチェックの実施方法

ロービジョンのユーザー、ディスレクシアのユーザーのように読みに困難があるユーザーの中には、文字の表示方法をカスタマイズすることで、テキスト情報を理解しやすくなるユーザーがいます。このようなユーザーは、支援技術を用いて表示をカスタマイズしている場合もありますし、拡張機能などを用いてユーザーCSSを適用している場合もあるでしょう。

以下、ガイドラインが求めるカスタマイズを実現するための方法を示します。

ガイドラインが求める条件を満たすためのCSS

ガイドラインが求める条件は、以下のCSSの通りです：

* {
  line-height: 1.5em !important;
  letter-spacing: 0.12em !important;
}
p + * {
  margin-top: 2em !important;
}

このCSSをユーザーCSSとしてブラウザーに設定すれば良いわけですが、例えばGoogle ChromeではユーザーCSSを指定する機能は廃止されているようですし、他のブラウザーでもその設定方法があまり分かりやすいとはいえません。日常的にユーザーCSSを活用しているユーザーは、ブラウザーの拡張機能を活用するなどして、ユーザーCSSを適用しているものと考えられます。

チェックに当たっては、以下に示すブックマークレットを活用する方法が便利でしょう。

ブックマークレットの利用

以下の手順でブックマークレットを利用することで、ガイドラインが求める条件のカスタムCSSをブラウザーに表示中のページに適用した表示を確認することができます。

1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

   コードを表示

   javascript:(function(){var d=document,s=d.createElement('style');s.innerHTML='*{line-height:1.5em !important;letter-spacing: 0.12em !important;} p+*{margin-top: 2em !important;}';d.head.appendChild(s)})()
   

   表示中のページにカスタムCSSを適用するブックマークレット

2. チェック対象のページを表示した状態で、このブックマークレットを実行。

関連ガイドライン項目

• テキスト：テキスト表示のカスタマイズ

テキストによる画像の説明

画像は、全盲やロービジョンのユーザーなどが適切に利用できない可能性があります。

まず全盲のユーザーの場合、当然ですが画像を見ることができません。また、一部のスクリーン・リーダーに搭載されている画像の認識・推測を行う機能も完璧とはほど遠いのが現状で、こういった機能の使用を前提とすることはできません。

一方ロービジョンなどの要因で見ることに困難があるユーザーの場合、画像のサイズや用いられている色の組み合わせなどによって見づらいという場合が考えられます。

このような問題を回避するためには、その画像が提供しているのと同等の情報をテキストでも提供することが必要です。より具体的には、画像の説明をテキストで提供します。この際重要なことは、過不足なく情報を提供するということです。情報が不足しているのはもちろん良くないのですが、過剰なのも良くありません。

提供すべき説明の分量や詳しさは、その画像の内容によっても、その画像が使われている文脈によっても異なります。

例1: 何らかの機能を実行するためのアイコンについて、そのアイコンがどのような機能を実行するためのものなのか広く一般に認知されている場合、その機能を示すテキストを提供するのが妥当でしょう。一方、そのアイコンの意味がほとんどの人にとって分からない場合は、そのアイコンの形状など視覚的特徴を説明する必要があるかもしれません。（これは製作者の意図次第です。）

例2: グラフを示す画像があるとき、その画像の前後のテキストを読めばそのグラフの内容が充分理解でき、画像には理解を補助する意味合いしかないような場合には、それがグラフであることが分かるテキストを提供すれば良いでしょう。一方、その画像を見なければ意味のある情報を得られない場合は、グラフの傾向の説明や、グラフ上の数値などをテキストで提供する必要があるでしょう。

文脈や内容に応じて説明を検討する必要がありますが、可能な限り一貫性がある説明にすべきです。どのような説明にすべきか検討する際に活用できる事例集を、今後整備する予定です。

画像の説明を提供する方法としては、短い説明の場合はimg要素のalt属性や、場合によってはaria-label属性やaria-labelledby属性を用いると良いでしょう。長い説明の場合は、aria-describedby属性やfigcaption要素を用いる方法に加えて、詳細な説明文または詳細な説明を掲載したページへのリンクを画像の周囲に配置する方法なども考えられます。

以上は、画像に何らかの意味がある情報が含まれている場合です。画像が純粋に装飾目的で、意味のある情報を含んでいない場合は、スクリーン・リーダーなどの支援技術がその画像の存在を無視するような記述をする必要があります。

具体的には、img要素に空のalt属性を付ける（<img src="image.png" alt="">）、role="presentation"を付与するなどの方法が考えられます。

なお、上記例2のような場合において、グラフの画像は情報を提供していますので、適切な説明を付与する必要があります。画像の説明がなくてもコンテンツの意味が伝わるのだから説明は不要だと考えるかもしれませんが、テキストの説明を活用するのは決して全盲のユーザーだけではありません。普段は主にスクリーン・リーダーを使っているロービジョンのユーザーの場合、そこにグラフがあることが分かればグラフは拡大表示して見てみようと考えることもあるでしょう。また、全盲のユーザーでも、そこにグラフがあることが分かれば、晴眼者とのコミュニケーションが容易になります。

関連ガイドライン項目

• 画像：画像の説明の提供

• 画像：装飾目的の画像の無視

関連FAQ

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

画像の表示とアクセシビリティー

特定の色が何らかの意味を持つような画像を使うと、色弱のユーザーが適切に情報を認知できない場合があります。色以外の視覚的要素も併用することで、この問題を回避することができます。

例えば、円グラフでは色分けして回答の分布状況を示すようなことがありますが、背景の模様を回答ごとに異なるものにすれば、色の判別ができなくても適切にグラフの情報を理解できる可能性があります。

画像を用いる際、その周囲で用いられている色、特に背景色とその画像の色のコントラストが低いと、ロービジョンのユーザーなどの中には、正しく画像を判別できないユーザーがいます。また、画像中にある文字やその他の視覚的要素が重要な意味を持つ場合は、これらの色と背景色とのコントラスト比も充分に確保する必要があります。

その問題を回避するために、ガイドラインではこのコントラストを一定以上確保することを求めています。

参考：コントラスト比のチェック方法

関連ガイドライン項目

• 画像：複数の視覚的要素を用いた表現

• 画像：隣接領域とのコントラスト比の確保

• 画像：画像内のテキストのコントラスト比

• 画像：モバイルOSでの画像内のテキストのコントラスト比

色を用いた表現に関する注意点

参考：グレースケール表示への切り替え方

なにかを表現する際に色を用いることがしばしばあります。

色を用いた表現としてよく見られるものとして、以下のような例が挙げられます：

• フォーム中で入力が必須の項目のラベルを赤色で表示する

• エラー・メッセージを赤色で表示する

• リンクなど、クリッカブルであることを色を変えて示す

• 強調するためにテキストの色を変える

• 円グラフの画像で、回答の分布状況を色で示す

色を用いた表現そのものには問題はありませんが、その意味するところが色の違い以外の手段で表現されていないと、色弱者や視覚障害者にその意図が伝わりません。

テキスト情報であれば、その意図が伝わるような文言を工夫して色を用いた表現と併用すれば良いでしょう。

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

上記のリンクの場合は、色に加えて下線など、別の視覚的要素も併せて用いれば問題ありません。

画像の場合、テキストによる説明を併記する方法がまず考えられます。また、上記の円グラフの例であれば、背景の模様を変えるといった方法が考えられるでしょう。

このように、色の違いに加えて、別の手段で意図を表現することが重要です。

さらに、色弱者に配慮した色の組み合わせを用いる、いわゆるカラー・ユニバーサル・デザイン（CUD）を行うことも有効です。色に依存しない表現を用いれば、色の認識が著しく困難な人にも伝わる情報になりますが、CUDを行えば、色弱者にとってはより理解しやすい情報になります。

カラーユニバーサルデザイン機構（CUDO）は、CUDのポイントとして以下の3つを挙げています。

1. 出来るだけ多くの人に見分けやすい配色を選ぶ。

2. 色を見分けにくい人（場合）でも情報が伝わるようにする。

3. 色の名前を用いたコミュニケーションを可能にする。

—「カラーユニバーサルデザイン３つのポイント」とは？ – NPO法人 カラーユニバーサルデザイン機構 CUDO

CUDを行う場合、上記のポイントを満たすような配色を用います。具体的には、例えばカラーユニバーサルデザイン推奨配色セットとして公開されているカラー・パレットを用いるといった方法が考えられます。ただ、配色についてはプロダクトやサービスのブランド・カラーなどとの兼ね合いもあることが多く、こういった制約を考慮して独自のカラー・パレットを予め定義しておくのが良いでしょう。

実際にデザインしたものや実装したものが色弱者にとって利用しやすいものかを検証する場合は、以下に挙げるようなシミュレーターを用いると良いでしょう。

• 色のシミュレータ

  • iOS版

  • Android版

  • Web版

関連ガイドライン項目

• テキスト：複数の視覚的要素を用いた表現

• 画像：複数の視覚的要素を用いた表現

• リンク：複数の視覚的要素を用いた表現

• フォーム：複数の視覚的要素を用いた表現

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

グレースケール表示への切り替え方

参考：色を用いた表現に関する注意点

グレースケール表示にした際の見え方を確認する場合、基本的にはOSが提供する表示切り替え機能を用います。以下に各OSごとの表示切り替え機能の利用方法を示します。

Windows 10、Windows 11

1. 「設定」画面を開き、「アクセシビリティ」（Windows 10では「簡単操作」）をクリック（Win+U）。

2. 「カラーフィルター」をクリック。

3. ウィンドウの右側にある「カラーフィルター」のスイッチをオンにして、その下にあるドロップダウンをクリックして関連オプションを表示。

4. 「グレースケール」を選択。

   

頻繁に利用する場合は、同じ画面で「カラーフィルターのキーボードショートカット」を有効にすると便利でしょう。この設定を有効にすると、Win+Ctrl+Cキーの押下でいつでもカラーフィルターのオン・オフを切り替えることができるようになります。

参考：Windows を見やすくする - Microsoft サポート

macOS

以下の手順やスクリーン・ショットは、macOS Venturaでのものです。

1. Appleメニュー ‣ システム設定の順に選択

2. サイドバーで「アクセシビリティ」を選択

3. 右側で「ディスプレイ」をクリック

   

4. 画面下方の「カラーフィルタ」のセクションで、「カラーフィルタ」のスイッチをオンにする

5. 「フィルタタイプ」で「グレイスケール」を選択

   

参考：Macでアクセシビリティの「ディスプレイ」環境設定を変更する - Apple サポート

iOS

注：以下の記述はiOS 17.4における操作手順です。

1. 「設定」アプリ、アクセシビリティ ‣ 画面表示とテキストサイズ ‣ カラーフィルタの順にタップ

2. 「カラーフィルタ」をオンにする

3. 「グレイスケール」を選択する

参考：iPhoneに表示されるカラーを変更して画面上の項目を見やすくする - Apple サポート (日本)

Android

Android 13以降の場合

注：以下の記述はPixel 8上のAndroid 14における操作手順です。機種やOSのバージョンによって異なっている場合があります。

1. 「設定」アプリ、ユーザー補助 ‣ 色と動き ‣ 色補正の順にタップ

   注：Androidのバージョンによっては、「色と動き」ではなく「テキストと表示」をタップ

2. 「色補正を使用」をチェック

3. 「補正モード」で「グレースケール」を選択

参考：テキストとディスプレイの設定を変更する - Android のユーザー補助機能 ヘルプ

Android 11以前の場合

注：以下の記述はPixel 3A上のAndroid 11における操作手順です。端末の機種やAndroidのバージョンによって異なっている場合があります。

1. 「設定」アプリ、システム ‣ 詳細設定の順にタップ

2. 開発者向けオプションをタップ（「開発者向けオプション」が表示されていない場合は、後述の手順で「開発者向けオプション」を有効にします）

3. 色空間シミュレートをタップ

4. 「全色盲」を選択

「色空間シミュレート」で「無効」を選択するか、「設定」アプリのユーザー補助 ‣ 色補正を無効にすることで、標準の表示モードに戻すことができます。

参考：開発者向けオプションの有効化

「開発者向けオプション」が表示されない場合は、以下の手順で開発者向けオプションを有効にします。

1. 「設定」アプリ、端末情報をタップ

2. 表示されている「ビルド番号」を7回連続してタップ

3. 端末に設定されている暗証番号を入力

参考：ブックマークレットの利用

簡易的なチェックの方法として、ブラウザーに表示中のページをグレースケール表示にするブックマークレットを利用する方法があります。以下の手順でブックマークレットを作成することができます。

なお、このブックマークレットが正常に動作せず、実行すると表示が崩れてしまうような場合があることが報告されています。そのような場合やこのブックマークレットが正常に動作しないブラウザーを使用している場合、モバイル・アプリケーションなどWebページ以外のものの表示を確認する場合には、各OSの表示切り替え機能を使います。

1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

   コードを表示

   javascript:(function(){var d=document;s=d.createElement("style");s.innerHTML="*{filter:grayscale(100%) !important}";d.body.appendChild(s)})()
   

   表示中のページをグレースケール表示にするブックマークレット

2. チェック対象のページを表示した状態で、このブックマークレットを実行。

関連ガイドライン項目

• テキスト：複数の視覚的要素を用いた表現

• 画像：複数の視覚的要素を用いた表現

• リンク：複数の視覚的要素を用いた表現

• フォーム：複数の視覚的要素を用いた表現

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

キーボード・トラップが引き起こす問題

ガイドラインでは、ページ上にあるコンポーネントにキーボードを使ってフォーカスを移動できる場合、そのコンポーネントからフォーカスを外す操作もキーボードで可能にするように求めています。

これは、元々JavaアプレットやFlashを用いたページが頻繁に作られていた時期に、キーボードのみを使っているユーザーがページ中に埋め込まれたJavaアプレットやFlashプレイヤーからフォーカスが外せなくなる現象がしばしば見られたことに起因して定められた項目です。一般的なHTMLで実装されているページではこのような状況を引き起こすことは少ないですが、Reactコンポーネントやページ中に埋め込まれる音声/動画プレイヤーなどではこのような状況が発生する可能性があります。

こういった状況が発生すると、ユーザーはそのコンポーネントの外にあるコンテンツにアクセスできなくなってしまいます。すなわち、ページの他の部分がいくらアクセシビリティーが高い状態であっても、この問題が発生しているページではページ全体を利用できない状態になってしまいますので、このような状況を回避することは必須です。

Tab / Shift+Tabキー、矢印キー、Escキーなど、簡単な操作でフォーカスを外せるようにすることが必要です。

関連ガイドライン項目

• 入力ディバイス：キーボード・トラップの回避

• 音声・映像コンテンツ：キーボード・トラップの回避

モバイル・アプリケーションのアクセシビリティーに関する基本事項

アクセシビリティーが高いモバイル・アプリケーションを実現する上でも、情報の表現方法など多くの部分はWebと同様の考え方を適用することができます。ここでは、モバイル・アプリケーション固有のアクセシビリティーに関する基本事項について説明します。

アプリケーション固有の独自ジェスチャーを作らない

スクリーン・リーダーやスイッチ・インターフェースなど、さまざまな支援技術を使用しているユーザーがモバイルアプリケーションを操作できるようにするためには、アプリケーションが提供するすべての機能をモバイルOSの標準ジェスチャーによって利用できるようにする必要があります。標準ジェスチャーは、アクセシビリティーを考慮して設計されており、支援技術を使用した際には、対応する操作方法が定められています。たとえば、標準的なタップのジェスチャーは、スクリーン・リーダー使用時にはダブルタップによって実行可能です。このように、標準ジェスチャーは支援技術との互換性が非常に高く、あらゆるユーザーがストレスなくアプリケーションを利用できるよう配慮されています。

一方、アプリケーションが独自に実装したジェスチャーは、支援技術によって正しく認識されない場合があり、利用環境によっては実行できない場合があります。また、ユーザーがそのジェスチャーを学習・習得する必要があるため、ユーザーにとって利用しにくい場合もあります。

したがって、アプリケーションが提供するすべての機能は、モバイルOSの標準ジェスチャーを使って利用可能であることが必須です。独自ジェスチャーを提供すること自体に問題はありませんが、そのジェスチャーに依存しなければ使えない機能は作るべきではありません。

使用する標準ジェスチャー

モバイルOSの標準ジェスチャーは非常に豊富で、多くの操作方法が存在しますが、ほとんどのユーザーはそのすべてを熟知しているわけではありません。そのため、アクセシビリティーを考慮する際には、なるべくシンプルで直感的な操作をベースに設計することが重要です。

特にスクリーン・リーダーが有効な場合は、1本指による左右方向へのフリックと1本指によるダブルタップといった基本的なジェスチャーだけしか使わなくても、すべての情報にアクセスでき、すべての機能が実行できるように設計することが推奨されます。これにより、ユーザーが追加の学習や複雑な操作を必要とせず、スムースにアプリケーションを使用できます。

また、スクリーン・リーダーが無効な場合においては、タップや長押しといったほとんどのユーザーが既に知っているジェスチャーを前提とすることで、支援技術を使用していないユーザーにも使いやすくなるだけでなく、結果的に支援技術利用時のアクセシビリティーを高めることにもつながります。これらのシンプルな操作は、支援技術によっても問題なく認識され、操作感に一貫性を持たせることができるため、アクセシビリティー全体の向上に寄与します。

もちろん、これら以外の標準ジェスチャーを用いることに問題はありません。しかし、開発チーム内で「どのジェスチャーを使えるようにするか」という前提を共有し、一貫性を保ったUI設計を行うことが大切です。一貫性がないUIは、支援技術を利用しているユーザーやジェスチャーに慣れていないユーザーの混乱を招くことにつながります。

スクリーン・リーダーで利用できるようにする

すべての機能がスクリーン・リーダーを使用して問題なく操作できるようにすることは、モバイル・アプリケーションのアクセシビリティーにおいて非常に重要です。これは、スクリーン・リーダーで適切に利用できるようにしておくことで、他の多くの支援技術でも同様に操作しやすくなる可能性が高いためです。

たとえば、スクリーン・リーダーでコンポーネントに正しくフォーカスが当たるようになっていれば、スイッチ・インターフェースのユーザーも同じくそのコンポーネントに簡単にアクセスできます。また、画面上のすべてのインターフェース要素がスクリーン・リーダーで正確に読み上げられるようになっていれば、音声認識による操作を行うユーザーも、そのコンポーネントを指定して、必要な操作を指示できるようになります。

独自ジェスチャーが不可欠な場合

たとえば自筆の署名を求めるような場合など、独自のジェスチャーの利用が不可欠な場合もあります。ただ、そのような場合も、まずはそもそもその機能の目的を達成するための手段として、そのような実装以外に実現手段がないのかを検討することが重要です。

それでもなお独自ジェスチャーが不可欠な場合は、支援技術が利用されている場合にも問題無く操作できるような実装の工夫が必要です。

関連ガイドライン項目

• 入力ディバイス：モバイルOS標準のジェスチャーによる操作

• 入力ディバイス：モバイルの支援技術のサポート

様々なユーザーの入力手段の特徴とそのサポート

Webサイトのアクセスに際して、多くのユーザーはキーボードとマウス、またはタッチUIを利用しています。しかし、必ずしもすべてのユーザーが同じ環境を使っているわけではありませんから、特定の入力手段を前提とした実装をするべきではありません。

多様な入力手段

以下、様々な入力手段のうちいくつかを記します。

マウスを使用せずキーボードのみを使用する場合

以下のようなユーザーは、マウスなどのポインティング・ディバイスを使うことが困難、もしくは不可能で、キーボードのみを使用している可能性があります。

• スクリーン・リーダーを利用している視覚障害者

• 上肢が不自由で細かい動きが苦手なユーザー

タッチUIを使用せずキーボードを使用する場合

iOSやAndroidの端末において、タッチUIをほとんど使用せず、キーボードを接続してこれを主に使用するユーザーがいます。上肢が不自由でタッチUIの細かい操作が困難な場合がまず考えられますが、障害の種別、障害の有無に関係なく、タッチUIの操作が苦手なユーザーがこういった使い方をしている可能性は充分に考えられます。

音声入力を使用する場合

上肢が不自由な人の中には、音声入力を使用しているユーザーもいます。もちろん今や障害の有無に関係なく、音声入力を使用する人は増えていますが、健常者が音声入力を使用するのは文字入力をするときが主であるのに対して、上肢が不自由なユーザーの場合は、メニューの操作などGUIの操作も音声入力で行います。

オンスクリーン・キーボード+スイッチ・インターフェース

肢体不自由のユーザーでキーボードやタッチUIを使うことが難しい場合、オンスクリーン・キーボードとスイッチ・インターフェースを組み合わせて端末機器を操作する場合があります。

「スイッチ」というと、オンとオフを切り替えるハードウェアを想像する人が多いと思いますが、ここでいうスイッチは「押しボタン」に近いイメージのものです。形状やスイッチの数は、ユーザーの身体能力に合わせて異なります。複数の指を動かすことができるユーザーの場合は、その指の本数分の小さめの押しボタンかもしれませんし、細かい指の動きができず肘から先を動かせるユーザーの場合は、大きめの押しボタン一つかもしれません。

体をほとんど動かすことができないユーザーの場合は、呼気スイッチと呼ばれるものを使うかもしれません。呼気スイッチは、ストロー状の形状のスイッチで、行きを吹き込むことでボタンを押したのと同じ信号を発するようになっています。

これらのスイッチをPCやスマートフォン、タブレットに接続して操作する仕組みが、スイッチ・インターフェースです。

詳細な挙動は環境や設定によって異なりますが、スイッチ・インターフェースを使用する場合は、だいたい以下のように端末を操作します。

1. 1度スイッチを押すと、画面上にあるポインターが移動を開始する。

2. クリックしたい場所にポインターが到達した時に、再度スイッチを押す。

文字入力に当たっては、スクリーン上にキーボードを表示して（オンスクリーン・キーボード）上記の操作をします。

スイッチを複数使用できる場合は、ポインターの移動する方向を変えるなどの指示を出すこともできるようになっているようです。

多様な入力手段をサポートするための基本的な考え方

前述のように、入力手段には様々な方式がありますが、これらをなるべく広くサポートするためには、以下の点に注意する必要があります。

一般的なキーボードでの操作を保証する

多くの入力のための仕組みは、一般的なキーボードと同じ信号を発するようになっています。したがって、一般的なキーボードですべての機能の操作をできるようになっていれば、多くの入力手段に対応できる可能性が高いと考えられます。

また、当然のことですが、こうすることでキーボードのみを使用する場合にも確実に対応することができます。

マウスの誤操作を減らす

マウスを使用している場合に、誤った場所をクリックしたときに操作を取り消すことができるように、ガイドラインではトリガーにはダウン・イベントではなくアップ・イベントを使うことを求めています。

このガイドラインに従うことで、マウスによる誤操作の抑制に加えて、タッチUIや視線追跡ディバイスなど、他のポインティング・ディバイスの使用も容易にできることが考えられます。

なお、クリック・イベントは、同じコンポーネント上でのダウン・イベントとアップ・イベントの組み合わせによって発生しますので、クリック・イベントをトリガーとして用いれば、このガイドラインを満たすことになります。

テキスト情報の提供

音声入力でGUIを操作する場合、クリック（アクティベート）したい項目（メニューやアイコンなど）を言葉で指示する必要があります。あるアイコンをクリックしたい場合、そのアイコンに付いている名前が分かる、もしくは推測できなければ、音声入力でこのアイコンをクリックすることはできません。そしてもちろん、そのアイコンにそもそも言葉で表現できるような名前が付いていなければ、簡単にクリックすることはできません。

この問題を回避するためには、操作対象になるものにはAccessibleNameを付与するということが必要です。また、もしそのAccessibleNameが推測しにくいものであれば、なるべく画面上に表示されているテキストを用いると良いでしょう。AccessibleNameについては、UIコンポーネントのアクセシビリティーを参照してください。

ただ、音声入力のサポート以外の目的でも適切なAccessibleNameの付与は必要なことですから、他のガイドラインを満たしていれば、この点について取り立てて意識する必要はあまりないでしょう。

音声入力で誤ってショートカットキーが発呼しないようにする

システムによっては、音声入力でショートカットキーを押したのと同じ操作ができるようです。このようなシステムで誤ってショートカットキーが押されることがないようにするために、ショートカット・キーを提供する場合が定められています。

特定の入力手段を前提としない

前述した「一般的なキーボードでの操作を保証する」こどう徹底すれば、この点について意識する必要はないはずですが、ガイドラインでは特に以下のような場合について、注意することを求めています。

• OSがサポートする入力手段の使用を阻害しない:

  状況に応じて、複数の入力手段を併用する必要があるユーザーがいます。このようなユーザーの利用を阻害しないために、たとえば、タッチUIを前提としている環境で何らかの入力を求める場面において、接続されたキーボードからの入力を受け付けず、画面上に表示されたボタンを使うことを強制するといったことは回避すべきです。

• 加速度センサー、モーション・センサーの入力だけをトリガーにする機能を作らない:

  肢体不自由のユーザーの利用を阻害しないために、たとえば端末を振るなど、ユーザーの動きだけをトリガーとするような機能は作るべきではありません。ユーザーの動きに加えて、別の手段でその機能を利用できれば問題ありません。

関連ガイドライン項目

• 入力ディバイス：ダウン・イベントをトリガーにしない

• 入力ディバイス：特定の入力ディバイスを前提としない

• 入力ディバイス：ショートカット・キーを提供する場合

Tab / Shift+Tabキーを用いたチェック

Tab / Shift+Tabキーを用いたチェックは、以下を確認するために行います。

• キーボードのみによる操作が可能か

• 自然な順序でフォーカスが移動するか

• ユーザーの混乱を招くような挙動を発生させないか

キーボードのみによる操作

上肢が不自由でマウスなどのポインティング・ディバイスの操作が難しいユーザーの中には、主にキーボードを使ってPCを操作している人がいます。また、このようなユーザーが利用する音声認識を用いた入力手段や、スイッチを用いたインターフェースの多くは、キーボードの挙動をエミュレートするようになっています。そのため、キーボードのみで操作できるようにすることで、このような支援技術を用いて入力している場合にも、問題なく操作できる可能性が向上します。

上肢が不自由なユーザーに加えて、スクリーン・リーダーのユーザーも基本的にはキーボードのみを用いた操作を行います。この場合の細かい挙動や操作方法は、スクリーン・リーダーを利用していない場合とは異なることもありますが、ポインティング・ディバイスを用いないという点は同じです。そのため、スクリーン・リーダー・ユーザーが利用できるようにするという点からも、キーボードのみで操作ができるようにすることは重要です。

キーボードのみを用いた操作の場合、以下の点を満たしていることが必要です。

• 操作を受け付けるあらゆるコンポーネント（リンク、ボタン、フォーム・フィールドなど）に、Tab / Shift+Tabキーで到達できる:

  キーボードのみで操作している場合、マウスを使用できる場合と異なり、画面上の任意の位置にフォーカスを移動させることができません。そのため、操作対象となり得るコンポーネントには、キーボードの操作のみで確実に移動できるようにする必要があります。

• 操作を受け付けるコンポーネントは、キーボードからでも操作ができる:

  必ずしもマウスを使っているわけではないという前提ですから、操作を受け付けるコンポーネントについてはキーボードのみで操作できる必要があります。

  • マウス・クリックをトリガーとしたようなイベントは、Enterキーの押下もトリガーになるようにする

  • マウスオーバー（ホバー）によってのみ表示される情報や実行できる機能がない

• フォーカスされているコンポーネントを視覚的に判別できる:

  例えばあるボタンを押すとき、マウスを使用している場合にはマウス・ポインターを対象のボタンの上に移動してクリックすれば良いですが、キーボードのみを使用している場合、基本的にはTab / Shift+Tabキーでフォーカスを目的のボタンに移動させた上で、Enterキーやスペースキーを押下する必要があります。この際、どのコンポーネントがフォーカスされているのかが視覚的に分からないと、目的のボタンにフォーカスがあるかどうかの判断ができません。CSSでoutline: noneが指定されているなど、フォーカスされていることを示す表示（フォーカス・インジケーター）が消されているとこの問題が発生します。

なお、これらの確認は、必ずスクリーン・リーダーを利用しない状態で実施する必要があります。前述の通り、スクリーン・リーダーを利用している場合と利用していない場合では、細かい挙動や操作方法が異なる可能性があるためです。

参考：マウス・ポインターを消して操作する方法

以下の手順で、マウス・ポインターを非表示にすることができます。スクリーン・リーダーを使用していないとき、この状態で実行できない操作がある場合、ガイドラインを満たしていない状態です。

1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

   コードを表示

   javascript:(function(){var s=document.createElement('style');s.innerText="*{cursor:none !important;pointer-events:none !important}*:focus{cursor: none !important;pointer-events:none !important}";document.head.appendChild(s)})()
   

   マウス・ポインターを非表示にするブックマークレット

2. チェック対象のページを表示した状態で、このブックマークレットを実行。

関連ガイドライン

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：フォーカス箇所の可視化

• フォーム: キーボード操作を可能にする

フォーカスの移動順序

前述のようにマウスを使用しない場合は、基本的にTab / Shift+Tabキーでフォーカスを移動させます。その際、フォーカスの移動順序について、以下の観点から自然なものになるようにする必要があります。

• 画面レイアウト:

  多くの場合、左から右、上から下の順に移動するのが自然な順序ですが、これに逆行する順序であったり、画面上の離れた場所に移動するような箇所がある場合は、問題がある可能性があります。

• 想定される操作手順:

  主に入力フォームにおいて、フォーカスの移動順序が、想定される情報の入力順序に応じたものになっていることを確認する必要があります。

• 文脈:

  上記の画面レイアウトと操作手順の観点で自然な順序でフォーカスが移動するようになっていれば、ほとんどの場合問題ありませんが、コンテンツを読む場合の順序とフォーカスの移動順序も合致していることを確認する必要があります。

関連ガイドライン

• 入力ディバイス：適切なフォーカス順序

• リンク：適切なフォーカス順序

• フォーム：適切なフォーカス順序

ユーザーの混乱を招く挙動

Tab / Shift+Tabキーでフォーカスを移動した際に、ユーザーが予期しないような挙動が発生しないことを確認する必要があります。ガイドラインでは、フォーカスが移動したときに以下のような挙動のコンポーネントを作らないように求めています。

• ページ遷移

• フォーム送信

• モーダル・ダイアログの表示

このような挙動は、ユーザーを混乱させるだけでなく、ユーザーが意図しない操作を実行してしまうことにもつながります。

フォーム操作で発生する動的な変化が及ぼす影響も併せて参照。

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：適切なフォーカス順序

• 入力ディバイス：フォーカス箇所の可視化

• リンク：適切なフォーカス順序

• フォーム：キーボード操作を可能にする

• フォーム：適切なフォーカス順序

• フォーム：フォーカス時の挙動

• フォーム：フォームの値の変更時の挙動

• 動的コンテンツ：OnFocus/OffFocus時の挙動

関連FAQ

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

音声・映像コンテンツの存在を認知可能にする

音声・映像コンテンツを提供する場合、ページ中にプレイヤーを埋め込むことが多いでしょう。ページに埋め込まれたプレイヤーについては、そこにプレイヤーがあることが確実に認知できるようにする必要があります。プレイヤーそのもののアクセシビリティーが充分に確保されていれば、自ずとその存在も認知できる状態になりますが、実際にWeb上で見られる実装の中には、そこにプレイヤーがあることをスクリーン・リーダーのユーザーが認知することすら難しい実装が少なからず存在します。

スクリーン・リーダーでプレイヤーの存在を認知できない場合、以下のような問題が発生します。

音声・映像コンテンツが自動再生される場合

• ページを閉じる以外にコンテンツの再生を停止する方法がない

• コンテンツが映像のみで音声を含んでいない場合、視覚障害者は、コンテンツが再生されていることに気づかない

• コンテンツに音声が含まれている場合、盲聾のユーザーはコンテンツが再生されていることに気づかない

音声・映像コンテンツが自動再生されない場合

• 視覚障害者がコンテンツの存在に気づかない

このような問題が発生しないようにするためには、以下のような方法が考えられます。

• アクセシビリティーが高いプレイヤー・コンポーネントを使う。

• aria-label属性やaria-labelledby属性を用いて、プレイヤーの存在を明示する。

• 前後の文章の文言で、プレイヤーの存在に言及する。

関連ガイドライン項目

• 音声・映像コンテンツ：音声・映像コンテンツの存在を明示する

音声の自動再生とアクセシビリティー

スクリーン・リーダーによる音声出力を利用している場合、自動再生される音声があると、スクリーン・リーダーの音声を聞き取ることができずに、閲覧や操作を進められないということになり得ます。そのため、ガイドラインでは音声の自動再生をする場合は3秒より短い音声にすることを求めています。

なおWCAGでは、3秒以上の音声を自動再生する場合の条件を定めて長い音声の自動再生も認めていますが、ユーザーが音声の制御をできるようにすることなどを求めていて、実装コストがそれなりに高くなることが考えられますので、freeeにおいては基本的に自動再生は用いず、用いる場合も3秒より短い音声の利用にとどめるのが良いでしょう。

関連ガイドライン項目

• 音声・映像コンテンツ：音声の自動再生

音声・映像コンテンツのアクセシビリティーを確保する

音声のみ、音声と映像を含む動画、映像のみの動画コンテンツの利用に当たっては、以下の点を考慮する必要があります。

• 視覚障害者は映像情報を得られない

• 聴覚障害者は音声情報を得られない

視覚障害者に対して映像に含まれる情報を補う手段としては、映像に関する音声解説の提供、テキストによる説明の提供があります。ただし、音声と映像の両方を含むコンテンツで、音声から充分に映像に含まれる情報が伝わるような場合には、音声やテキストによる解説は不要です。一方、音声がない、映像のみの動画の場合は、ほとんどの場合音声かテキストによる解説が必要になります。

聴覚障害者に対して音声情報を補う手段としては、テキスト情報の提供、手話通訳の提供があります。動画コンテンツの音声については、同期した字幕を提供することが求められているのに対して、音声のみのコンテンツの場合は書き起こしテキストを提供することが求められています。

その実現の難しさから、手話通訳の提供に関するガイドライン項目に関連付けられているチェック内容の重篤度は、字幕の提供に関するものよりも低く設定されています。しかし、聴覚障害者の中には文字情報より手話の方が得意な人も、その逆に文字情報の方が手話よりも得意な人もいます。ですから、手話通訳の提供が文字情報の提供より重要性が低いというわけでも、文字情報があれば手話通訳は不要というわけでも、手話通訳があれば文字情報は不要というわけでもないという点に注意が必要です。

音声のみの収録済みコンテンツについては、発話者の音声が聞き取りやすくなるようにすることも求められています。ガイドラインでは、発話者の音声と背景音の大きさの差が20db以上あるようにすることを求めていますが、これを正確に測定することは困難です。客観的な評価は難しいですが、少なくとも聴き取りづらいと感じるような状態のコンテンツを提供しないようにすることが重要でしょう。

上記の点に注意することで、音声・映像情報のアクセシビリティーを確保することができますが、もしその音声・映像コンテンツがテキスト情報の代替情報である場合について、WCAG 2.1ではレベルAAの達成基準で映像の解説や音声の文字化を求めています。

テキスト情報の代替情報である場合とは、その音声・映像コンテンツがテキスト情報と併せて提供されていて、それぞれが同等の情報を提供している場合です。この場合、音声・映像コンテンツの利用が困難なユーザーも、テキスト情報を用いることで同等の情報を得ることができますが、そのコンテンツがテキスト情報の代替であることを明示することが必要です。

関連ガイドライン項目

• 音声・映像コンテンツ：テキスト情報と同等の内容にする

• 音声・映像コンテンツ：キャプションの提供

• 音声・映像コンテンツ：書き起こしテキストの提供

• 音声・映像コンテンツ：テキスト情報または音声解説の提供

• 音声・映像コンテンツ：音声解説の提供

• 音声・映像コンテンツ：手話の提供

• 音声・映像コンテンツ：充分に小さい背景音

アクセシビリティー・チェックのためのツール

The Nu Html Checkerを用いたHTMLのバリデーション

The Nu Html Checkerは、W3CやWhatWGでも利用されているHTMLのバリデーターです。上記W3CまたはWhatWGのページにアクセスして、チェック対象のページのURLを入力して、HTMLの仕様に準拠しているかどうかをチェックするというのが一般的な使い方です。

しかし、この方法には以下の問題があります：

1. 開発中のページのように社外からアクセスできないページや、ログインが必要なページのチェックができない

2. 公開前のページなど、社外に出せないページのチェックに向いていない

以下の方法で、これらの問題に対応することができます。

ブックマークレットの利用

以下の手順でブックマークレットを利用することで、ブラウザーに表示中のページのDOMツリーを送信してチェックすることができます。

1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

   コードを表示

   javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="https://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("showsource","yes");c("content",e);document.body.appendChild(d);d.submit()})();
   

   表示中のページを https://validator.w3.org/nu/ に送信するブックマークレット

2. チェック対象のページを表示した状態で、このブックマークレットを実行。

この方法を使えば、手元の開発環境だけにあるページのように、社外からアクセスできないページのチェックが可能です。ただし、ページの内容はvalidator.w3.orgに対して送信されますので、社外に一切出したくないページの場合には使えません。

ローカルに実行環境を構築

以下のいずれかの方法で、手元の開発環境や社内ネットワーク上にThe Nu Html Checkerの実行環境を構築することができます：

1. GitHubからパッケージまたはjarファイルを入手して実行。（jarファイルを利用する場合はJREが必要）

   適切に`JAVA_HOME`環境変数を設定したうえで、以下を実行:

   % java -cp vnu.jar nu.validator.servlet.Main 8888
   

2. dockerで実行:

   % docker run -it --rm -p 8888:8888 validator/validator:latest
   

この状態で、http://localhost:8888/にブラウザーでアクセスすると、Web UIが表示されます。

詳しい方法やこの他の方法については、Nu Html CheckerのGitHub参照。

実行環境を構築できたら、前述のブックマークレット中のhttps://validator.w3.org/nu/を構築した環境のURLに書き替えて利用することで、チェックを実行することができます。

なお、jarファイルを使えばコマンド・ラインからThe Nu Html Checkerを実行することは可能ですが、この場合、ブラウザーにレンダーされる前のソースファイルに対するチェックになります。そのため、JavaScriptでコンテンツが更新されるようなページのチェックには不向きです。

関連ガイドライン項目

• マークアップと実装：文法的に正しいマークアップ

コントラスト比のチェック方法

Webやモバイル・アプリケーションにおいて、ロービジョン者でもコンテンツを知覚できるよう、テキストやUIコンポーネントにそれぞれコントラスト比の基準を満たす色の組み合わせを用いることが重要です。

Webページで色のコントラスト比が不足している場所を発見するには、axe DevToolsのようなチェック・ツールを用いると良いでしょう。モバイル・アプリケーションの画面など、このようなチェック・ツールが利用できない場合は、WebAIM: Contrast Checkerのような、具体的な色同士のコントラスト比の計算ができるツールと、カラー・ピッカーを組み合わせて使用すると良いでしょう。

アクセシビリティー・チェックツールの使用

Google Chromeでは、開発者ツールのLighthouseタブから、色のコントラスト比の問題を含め、アクセシビリティーの問題をチェックすることができます。

また、axe DevToolsでも、Webページ全体からコントラスト比の問題を含め、アクセシビリティー上の問題のある場所を発見することができます。axe DevToolsは、Google Chrome 拡張およびMozilla Firefoxアドオンとして提供されています。

コントラスト比の自動判定ができない場合

画像の中の文字など、これらのチェック・ツールではコントラスト比を正しく判定できない場合があります。

axe DevToolsのGoogle Chrome拡張の場合、コントラスト比の判定ができない場合も「要素には十分な色のコントラストがなければなりません」のような、コントラスト比が不充分な場合と同じメッセージが表示されます。しかし自動判定ができない場合は、詳細パネルに「This potential issue needs your review... コントラスト比を判定できません」といったメッセージが表示されます。

また、axe DevToolsが利用できるのはWebページに対するチェックのみで、モバイル・アプリケーションの画面などに対しては利用できません。

このような場合は、当該箇所のカラー・コードを調べ、コントラスト比を確認します。

モバイル・アプリケーションの画面のチェック

モバイル・アプリケーションの画面を対象にしたチェックを実施する場合、以下のような方法が考えられます：

• スクリーン・ショットを撮り、その画像をPC上でチェックする。

• Google Meetなどのオンライン会議ツールを使って画面を共有し、PC上で共有された画面をチェックする。ただし利用するオンライン会議ツールによっては、共有された画面に色補正が加えられることも考えられるので、この方法を用いる場合は注意が必要です。

カラー・コードを調べる

カラー・ピッカーと呼ばれるツールで、コントラスト比のチェックをしたい箇所で用いられている色のカラー・コードを調べることができます。

後述するWebAIM: Contrast Checkerでも、カラー・ピッカーが提供されていますが、WindowsやmacOSで動作するものもあります。以下では代表的なものを挙げます。

Windows

Microsoft PowerToysの機能の1つとして、Color Pickerが提供されています。

Microsoft PowerToysは、Microsoft StoreまたはGitHubから入手することができます：

• Microsoft PowerToys (Microsoft Store)

• Microsoft PowerToys (GitHub)

参考：Microsoft PowerToys: Windows をカスタマイズするためのユーティリティ

macOS

macOSには、Digital Color Meterというカラー・ピッカーが標準で搭載されています。

参考：Mac用Digital Color Meterユーザガイド

macOSでカラー・ピッカーを使用する場合、ディスプレイのカラー・プロファイルの影響を受けることがあります。これを防ぐためには、macOSのカラープロファイル設定で、「このディスプレイのプロファイルのみを表示」のチェックを外してから「SRGB IEC61966-2.1」を選択します。

参考：Macのディスプレイのカラープロファイルを変更する

Figmaを使用する場合、画面上部、ファイル名の右横のメニュー内、「File color profile」から、各ファイルに適用されているカラー・プロファイルを確認することができます。「sRGB」または「Same as preferred profile (sRGB)」となっていれば問題ありません。

また、画面左上、Figmaのメニュー・アイコンから、Preferences ‣ Color profile...で「sRGB」に変更することで、ファイルの新規作成時にsRGBが選択されるようになります。

コントラスト比の計算ツールの使用

コントラスト比の計算式は非常に複雑であるため、WebAIM: Contrast Checkerのような計算ツールを使用することが一般的です。contrast.appのように、インストールして常駐させるタイプのチェッカーも存在します。

なお、コントラスト比の計算ツールによって小数点以下の丸め方に差異があり、計算結果がバラつくことがあります。計算結果は目安として考え、コントラスト比に余裕のある色を選ぶのが望ましいでしょう。

参考

• コントラスト比確保の重要性

• 社内デザイン・システムVibesのカラー・コントラスト表

関連ガイドライン項目

• テキスト：コントラスト比の確保

• テキスト：モバイルOSでのコントラスト比の確保

• 画像化されたテキスト：画像内のテキストのコントラスト比

• 画像化されたテキスト：モバイルOSでの画像内のテキストのコントラスト比

• 画像：隣接領域とのコントラスト比の確保

• 画像：画像内のテキストのコントラスト比

• 画像：モバイルOSでの画像内のテキストのコントラスト比

• アイコン：コントラスト比の確保

スクリーン・リーダーを用いたチェックの実施方法

ここでは、主要なスクリーン・リーダーを用いてチェックする場合に推奨される設定や最低限知っておくべき事項について説明します。

なお、freeeでは以下の方針でスクリーン・リーダーによるチェックを実施しています。

PC向けWeb

• Windows上のNVDAとGoogle Chromeで動作確認し、動作しない場合は当該チェックの結果をNGとする

• macOS VoiceOverによるチェックは、スタティックなコンテンツや既にNVDAでの動作確認が完了しているUIコンポーネントに限定し、その他のチェックはNVDAで実施する

モバイル・アプリケーション

• iOS VoiceOver、Android TalkBackそれぞれでで動作確認し、動作しない場合は当該チェックの結果をNGとする

NVDAを用いたチェックの実施方法

Windows用スクリーン・リーダーのNVDAの初期設定の方法と、基本的な使い方について記します。

なお、本稿のキー操作の説明では、NVDA+Nのような表記をしていますが、これは初回起動時の設定の項で説明する「NVDA制御キー」を押しながらNを押すことを意味します。

標準環境

freeeでは、スクリーン・リーダーを用いて行う必要があるチェックについては、Windows上でNVDAとGoogle Chromeのそれぞれ最新版で実施することにしています。

macOSではなくWindowsを採用しているのは、日本においてはスクリーン・リーダーを利用している視覚障害者のほとんどがWindowsを利用していると考えられるためです。[1] NVDAを採用しているのは、WAI-ARIAなどの最新のWeb技術への対応が最も進んでいるスクリーン・リーダーであると考えられるためです。Google Chromeを採用しているのは、freeeでは最新版のGoogle Chromeを推奨環境としているためです。

様々な環境で問題なく動作するものを実現できるのが理想ですが、こういった理由で、freeeでは最低限NVDAで問題なく動作するものを目指しています。

[1]

第3回支援技術利用状況調査報告書

事前準備

参考動画

• NVDAのインストールと初期設定【NVDAでアクセシビリティー チェック】

NVDAのインストール

以下の手順でNVDA日本語版の最新版をインストールします。インストール完了後の画面で、NVDAが自動的に起動します。NVDAが起動すると、いろいろな挙動が普段と異なった状態になりますので、後述するNVDAの終了方法を予め確認しておくことをお勧めします。

1. NVDA日本語チームのサイトから、NVDA日本語版の最新リリースをダウンロード（https://i.nvda.jp/にアクセスすると、自動的にダウンロードが開始される）

2. ダウンロードしたファイルを実行（実行すると音が出るので注意）

3. 使用許諾条件を確認後、「同意する」をチェック

4. 「このコンピューターにNVDAをインストール」をクリック

5. 「ログオン画面でNVDAを使用」のチェックを外す

6. 「継続」をクリック

7. Windowsのユーザーアカウント制御の確認ダイアログでインストールを許可

8. インストールが完了したら「OK」をクリック

初回起動時の設定

NVDAの初回起動時には、「ようこそ画面」が表示されます。

以下を参考に、必要な設定をすると良いでしょう。

なお、インストール後にこの画面を再度表示したい場合は、後述するNVDAメニューでヘルプ ‣ ようこそ画面の順にクリックします。

キーボード配列

通常は「デスクトップ」を選択します。

「ラップトップ」は、テンキーがないキーボードを使っている場合に便利なキーマップがデフォルト設定になっています。ただ、通常のチェック作業においては、テンキーに割り当てられた機能を使うことはほとんどありませんので、どちらを選んでも問題ありませんが、Web上の情報などはデスクトップ配列を想定して書かれているものが多いので、デスクトップのままにしておくと良いでしょう。

NVDA制御キー

NVDA制御キーは、他のキーと組み合わせて押下することでNVDAの機能を実行するためのキーで、デフォルトではInsert (Ins)キーになっています。ただ、ノートPCなどInsキーを搭載していない機種もあり、そのような環境での利用を可能にするために、他のキーをNVDA制御キーとして使う設定ができるようになっています。

テンキーがある場合、NumLockをオフにした状態で0キーを使うことが可能ですので、ようこそ画面では特になにも設定する必要はありません。

テンキーがない場合やInsキーがない場合は、変換か無変換、あるいはその両方を使う設定にすると良いでしょう。

Escキーを指定できるようになっているのは、上記のいずれのキーもないような環境を想定したもので、具体的にはmac OS上の仮想Windows環境でNVDAを使用しているような場合に便利です。

なお本稿の説明では、NVDA制御キーをNVDAと表記します。例えば、NVDA+Nと表記した場合、ここで設定したNVDA制御キーを押しながらNキーを押すことを意味します。

その他の設定

検証作業の際のみNVDAを使う場合は、「Windowsへのログオン後に自動的にNVDAを起動」のチェックを外します。

この画面での設定は、今後変更することはほとんどありませんし、設定メニューから変更することも可能ですので、「NVDA起動時にこのダイアログを表示」のチェックは外しておくと良いでしょう。

その他の初期設定

NVDAには、ようこそ画面で設定できる項目以外にも、設定画面にかなり多くの設定項目があります。ここでは、NVDAを検証作業に使う場合に便利な設定について記します。

設定画面は、画面右下のシステムトレイにあるNVDAのアイコンをクリックして表示されるメニューから開くことができます。このメニューはNVDA+Nを押下することでも表示できます。

「設定」画面では、左側に設定カテゴリーが表示され、右側に選択中のカテゴリーの設定項目が表示されます。

以下、最初にしておくと良い設定について、カテゴリーごとに記します。

音声

参考動画

• NVDA音声の設定【NVDAでアクセシビリティー チェック】

「音声エンジン」が、「Windows OneCore音声」になっていることを確認します。

「早さ」や「高さ」を、好みに合わせて変更します。もし高速な音声に慣れてきて、「早さ」を最高にしても遅く感じる場合は、「高速読み上げ」をチェックしたうえで、「早さ」を調整してみると良いでしょう。

なお、後述するように、音声の速度や高さは、この設定画面を開かなくても変更できるショートカット・キーがあります。

「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」の2項目は、日本語以外の自然言語の読み方に関するものです。この2項目をチェックしておくと、Webページで用いられている言語が適切に指定されているかどうかを確認する、チェックID：0621やチェックID：0921を実施することが容易になります。なお、この設定をする場合、日本語以外の音声合成エンジンがWindowsにインストールされている必要があります。（音声合成エンジンの管理参照）

ビジョン

「ハイライトあり」、「フォーカスをハイライト」、「ナビゲーターオブジェクトをハイライト」、「ブラウズモードのカーソルをハイライト」をチェックします。これらをチェックすることで、現在読み上げられている箇所を可視化することができます。

ブラウズモード

「サポートされている場合画面レイアウトを使用」のチェックを外します。この項目がチェックされている場合、ブラウズ・モードでの読み上げ時に画面上の1行分のテキストがまとめて読み上げられます。このテキストの一部がリンクになっている場合、リンク箇所とそうでない箇所がまとめて読み上げられるため、リンク・テキストの確認などの際に分かりづらくなる可能性があります。なおこの設定は、NVDA+Vで変更することも可能です。

「フォーカスの変化を追跡する自動フォーカスモード」と「テキストカーソルの移動を追跡する自動フォーカスモード」のチェックを外します。これらの項目がチェックされていると、ブラウズ・モードで操作している際に、状況に応じて自動的にフォーカス・モードに切り替わるため、混乱を生じやすくなります。

「フォーカスモードとブラウズモードの切り替えを音で報告」のチェックを外します。この項目がチェックされていると、フォーカス・モードとブラウズ・モードの切り替わりが効果音で通知されますが、チェックされていないと音声で通知され、慣れていない場合にはモードの切り替わりを意識しやすくなります。

マウス

「マウスカーソル位置のテキストの報告」のチェックを外します。

画面表示を確認できない視覚障害者の場合、マウスを使うことは困難なので、アクセシビリティー・チェック実施の際にもマウスをなるべく使用せずにチェックを実施することが望ましいです。この項目がチェックされていると、マウス・ポインターが移動した先にあるテキストが自動的に読み上げられます。そのため、キーボードのみによる操作では読み上げられないものが、誤ったマウス操作によって読み上げられてしまう場合があり、チェック結果について誤った判断につながることがあります。

書式とドキュメント情報

「クリック可能」のチェックを外します。

この項目がチェックされていると、リンクでもボタンでもない要素にonclick属性がある場合など、クリック操作時に何らかの処理が行われるようになっている要素を読み上げる際に、「クリック可能」という読み上げが追加されます。

本来クリック可能な要素にはボタンやリンクなどの適切なロールが指定されているべきですが、現実にはspan要素やdiv要素を適切なrole属性を指定せずに用いているなど、アクセシビリティーの観点から望ましくない実装が少なくありません。こういった要素がクリック可能であるという情報は、視覚障害があるユーザーにとっては有益なものとなり得ますが、適切に実装されている場合は不要な情報です。

アクセシビリティー・チェックの実施に当たっては、この情報が読み上げられることで、実際には適切に実装されていないものについての問題を見落とすことにつながる可能性が考えられます。

音声合成エンジンの管理

参考動画

• Windows音声の設定【NVDAでアクセシビリティー チェック】

音声の項で触れた自然言語に関する設定について、これらの設定を反映した形でNVDAを動作させるには、Windowsに複数言語の音声合成エンジン（音声パッケージ）がインストールされている必要があります。ここでは、現在インストールされている音声パッケージの確認と、新たな音声パッケージの追加の方法を記します。

1. スタート・ボタンなどから設定画面を表示

2. 「時刻と言語」、「音声認識」の順にクリック

3. この画面の下の方にある「インストールされている音声パッケージ」のプルダウンに表示されている、現在インストールされている音声パッケージの一覧を確認

4. 1つの言語しかインストールされていない場合は、「音声を追加」をクリックして、「英語 (米国)」、「日本語」など、別の言語を追加

一般的なチェックの場合、「日本語」と「英語 (米国)」がインストールされていれば、NVDAは意図した挙動になります。英語と日本語以外の言語が使われているサイトをチェックする場合は、その言語も合わせて追加すると良いでしょう。

最低限知っておきたいこと

NVDAメニュー

NVDAメニューは、NVDAの各種画面やツールへのアクセスを提供するメニューです。このメニューは、以下のいずれかの方法で表示することができます。

• NVDA+Nを押下

• デスクトップ右下のシステムトレイにあるNVDAのアイコンをクリック

起動と終了

インストールの際にデスクトップにショートカットを作成している場合、デスクトップのショートカットをクリックするか、Ctrl+Alt+Nキーの押下で起動することができます。ショートカットがない場合は、「ファイル名を指定して実行」（Win+R押下で表示）でnvdaと入力して起動します。

終了は、NVDA+Qの押下で可能です。このキー操作が何らかの理由で使えない場合は、前述のNVDAメニューから終了することができます。

フォーカス・モードとブラウズ・モード

参考動画

• ブラウズモード【NVDAでアクセシビリティー チェック】

• ブラウズモードとフォーカスモードの違い【NVDAでアクセシビリティー チェック】

NVDAには「フォーカス・モード」と「ブラウズ・モード」という2つの動作モードがあります。

2つのモードの最も大きな違いは、フォーカス・モードではNVDA制御キーを用いたものを除いて、すべてのキー操作がそのままOSや現在フォーカス中のアプリケーションに渡されるのに対して、ブラウズ・モードではキー操作はNVDAが受け取り、NVDAの様々な機能の実行に用いられるという点です。

フォーカス・モードは通常の動作モードであるのに対して、ブラウズ・モードは主にWeb閲覧時だけに利用できるモードです。

Webブラウザーのコンテンツ表示領域にフォーカスがある場合など、ブラウズ・モードが利用できるときには、NVDA+Spaceで2つのモードを切り替えることができます。

Web閲覧時は、通常はブラウズ・モードでコンテンツを確認し、フォーム入力時などにフォーカス・モードに切り替えるというのが一般的な使い方です。ただし、アプリケーションのような振る舞いをするWebコンテンツにおいては、主にフォーカス・モードで操作することもあります。

参考：Windows上で動作するスクリーン・リーダーの多くには、同様の動作モードが存在します。Microsoft Narratorでは、「スキャン・モード」がオンの状態がブラウズ・モード、オフの状態がフォーカス・モードに当たります。JAWSでは、「仮想PCカーソル」がブラウズ・モード、「フォーム・モード」がフォーカス・モードに当たります。

スピーチビューアーの活用

参考動画

• スピーチビューアー【NVDAでアクセシビリティー チェック】

スピーチビューアーは、NVDAが音声出力した内容を文字で表示する機能です。音声出力がよく聴き取れない場合や、そもそも音を出せない状況で読み上げられる内容を確認する必要があるときは、スピーチビューアーを使うと便利です。

スピーチビューアーは、NVDAメニューを開いてツール ‣ スピーチビューアーの順に実行することで利用できます。実行するとスピーチビューアーのウィンドウが開き、NVDAが発声した内容が表示されます。

スピーチビューアーが不要になったときは、スピーチビューアーのウィンドウを閉じます。再度NVDAメニューを開いてツール ‣ スピーチビューアーの順に実行することでも、スピーチビューアーのウィンドウを閉じることができます。

知っておきたいキー操作

音声設定の変更

前述の設定画面での音声設定について、一時的に変更したい場合などに、設定画面を開かずに設定変更を行う方法があります。使用するのは、NVDA+Ctrlと上下左右の矢印キーです。

NVDA+Ctrl+←またはNVDA+Ctrl+→を押下すると、「高さ50」のように、設定対象の項目名と現在の設定値が読み上げられます。目的の設定項目が読み上げられるまで、このいずれかのキー操作を続けます。目的の設定項目が読み上げられたら、NVDA+Ctrl+↑またはNVDA+Ctrl+↓キーで設定値を調整します。

その他

参考動画

• 読み上げの停止と読み上げモード【NVDAでアクセシビリティー チェック】

• 入力ヘルプモード【NVDAでアクセシビリティー チェック】

Ctrl

読み上げの停止

Shift

読み上げの一時停止/再開

NVDA+S

読み上げモードの変更（誤操作で音声が出なくなった場合などに何度か押下してみると良い場合があるかもしれない）

NVDA+1

入力ヘルプ（1度押下するとヘルプ・モードに入り、再度押下するとヘルプ・モードから抜ける。ヘルプ・モードでは、押下したキーの名称や役割が読み上げられる。）

NVDA+Q

NVDAの終了

NVDA+N

NVDAメニューの表示

参考：NVDAチートシート

ここまでで紹介したキー操作などはごく一部のものですが、NVDA日本語チームが公開しているNVDAチートシートには、キーボード配列の設定が「デスクトップ」と「ラップトップ」の場合に分けて、他のキー操作も含めてまとめられています。GitHubのリポジトリーでは、Markdown版、pptx版、PDF版とPNG版（デスクトップ配列、ラップトップ配列）が公開されています。以下にデスクトップ配列のNVDAチートシートのPNG版を転載します。

なお、前述の通り、ラップトップ配列はテンキーがない場合に便利な設定ですが、通常のチェック作業において、テンキーに割り当てられた機能を使う必要はありません。これらの機能を使わないと内容を確認できないようなWebページは、アクセシビリティーに関する問題がある可能性があります。

NVDAの更新

NVDAは3カ月に1回程度、更新版がリリースされます。また、これらのメジャー・バージョンのリリースの間に、マイナー・バージョンがリリースされることもあります。

NVDAは、最新のブラウザーへの対応やWeb技術への対応など、継続的に改良されていますので、必ず最新版を使うようにしましょう。

デフォルトでは、NVDAの起動時に更新版がリリースされていないかチェックするようになっています。これに加えて、NVDAメニューを開いて ヘルプ ‣ 更新を確認を実行することで、明示的に更新版のリリースを確認することができます。

Webコンテンツのチェック

ここでは、Webコンテンツのチェックを実施する場合の基本的な考え方やよく実行する操作について説明します。チェック内容に応じた具体的なチェック実施方法については、NVDAを用いたチェック実施方法の例を参照してください。

Webコンテンツのチェックをする場合、基本的にはブラウズ・モードですべての情報にアクセスできることを確認することが必要です。

ブラウズ・モードでは、↓キーで読み進め、↑キーで戻って読むというのが基本的な操作です。上下の矢印キーで進む/戻る長さは、概ねHTMLソースの要素単位です。途中にリンクやspan要素でマークアップされた部分がないような段落であれば、p要素が1つのまとまりとして扱われます。一方、リンクがあればリンク部分が1つのまとまり、span要素があればその部分が1つのまとまりとして扱われ、上下矢印キーによる移動の単位になります。

1つのまとまりとして判断されるテキストが、一定の長さを超える場合、↓キーによる読み上げが途中で止まります。この場合、↓キーを再度押下することで、続きの部分が読み上げられます。

NVDA+↑を押下すると、直前に読み上げられた内容を再度読み上げさせることができます。（正確には、この操作はカーソルが現在ある行を読み上げさせる操作です。）

なお、左右の矢印キーは1文字単位の読み上げのために使います。

ページ全体を読み上げさせる

以下の手順で、ページ全体を読み上げさせることができます。

1. Ctrl+Homeでページの先頭に移動

2. NVDA+↓で読み上げを開始

途中で読み上げを停止したい場合は、Ctrlキーを押下します。

再度NVDA+下矢印を押下すると、続きを読み上げさせることができます。

操作を受け付けるコンポーネント

開閉できるメニュー、アコーディオンなど、何らかの操作を受け付けるコンポーネントについては、ブラウズ・モードでも操作ができることを確認する必要があります。

具体的には、ブラウズ・モードでそのコンポーネントを探し、そのコンポーネント上でキー操作を実行してみます。コンポーネントに対する操作のうち、Enter、Space、Escによる操作はブラウズ・モードでも想定した挙動となることを確認します。その結果として新たなコンテンツが表示された場合は、そのコンテンツをブラウズ・モードで読み上げ可能なことを確認します。

これら以外のキー操作については、NVDA+Spaceでフォーカス・モードに切り替えた上で確認します。

表の読み上げ

NVDAには、表の読み上げを効率的に行うためのキー操作が用意されています。これらのキー操作を利用することで、表を構成するセルの位置関係などを把握しやすくなりますので、表組みされたコンテンツのアクセシビリティーチェックに当たっては、これらのキー操作が適切に機能することを確認することが重要です。

以下に、表の読み上げに関連する主なキー操作を記します。これらはいずれもブラウズ・モードで動作します。

表の読み上げに関連するキー操作

キー操作	説明
T, Shift+T	次、前の表へ移動
Ctrl+Alt+↑	1つ上のセルへ移動して読み上げ
Ctrl+Alt+↓	1つ下のセルへ移動して読み上げ
Ctrl+Alt+←	1つ左のセルへ移動して読み上げ
Ctrl+Alt+→	1つ右のセルへ移動して読み上げ

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

• 左右の移動：移動先のセルの列見出し、列の番号、セルの内容

• 上下の移動：移動先のセルの行見出し、行の番号、セルの内容

ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。

• 上下矢印：前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。

• 左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

移動のための様々なキー操作

ブラウズ・モードでは、以下に挙げるようなキー操作でコンテンツ内を移動することができます。

ブラウズ・モードで使用できるキー操作（抜粋）

キー操作	説明
D、Shift+D	次、前のランドマーク（領域）
H、Shift+H	次、前の見出し
L、Shift+L	次、前のリスト（ul、ol、dl要素）
G、Shift+G	次、前の画像
F、Shift+F	次、前のフォーム・コントロール
T、Shift+T	次、前の表

これらのキー操作に加えて、NVDA+F7の押下でページ内の要素ごとのリストを表示することができ、このリストを用いて移動することも可能です。

関連FAQ

• スクリーン・リーダーによる長いテキストの読み上げが途中で止まる

macOSのVoiceOverを用いたチェックの実施方法

macOS用スクリーン・リーダーのVoiceOverの推奨設定の方法、基本的な使い方と基本的なチェックの実施方法について記します。

なお、iOSにも同名のスクリーン・リーダーが標準搭載されていますが[1]、macOSのVoiceOverとはまったくの別物です。本稿ではmacOSのVoiceOverについてのみ記し、「VoiceOver」という記述はmacOS VoiceOverを差します。

本稿のキー操作の説明では、VO+→のような表記をしていますが、これはVoiceOverキー（ VO キー）と VO キー・ロックの項で説明する「VoiceOverキー」を押しながら→キーを押すことを意味します。また、F1～F12は、キーボード上部のファンクション・キーのことですが、設定によってはfnキーを押しながら押下する必要がある点に注意が必要です。（後述のファンクション・キーの設定を参照）

[1]

iOS VoiceOverを用いたチェックの実施方法

macOS VoiceOverを用いたチェックの位置づけ

NVDAを用いたチェックの実施方法にもあるように、freeeでは、スクリーン・リーダーを用いて行う必要があるチェックについては、Windows上のNVDAとGoogle Chromeのそれぞれ最新版を標準環境としています。これは、日本においてはスクリーン・リーダーのユーザーの大半がWindowsを利用していて[2]、これらのユーザーが確実に使えるようにすることが重要であると考えているためです。

しかし、すべてのチェックについてNVDAでなければ実施できないというわけではなく、macOSのVoiceOverでも実施可能なチェックもあります。最終的なチェックにはNVDAを用いることを推奨しますが、開発中に実施するチェックのうち、以下のような場合はmacOS VoiceOverを用いても問題ありません。

• すでにNVDAでの挙動に問題がないことが確認されている既存のコンポーネントの動作確認

• 静的なHTMLで実装されている箇所の動作確認

一方、新たに実装するコンポーネントについては、開発の早い段階からNVDAによる動作確認を実施することを強く推奨します。

macOS VoiceOverで問題なく動作してもNVDAでは動作に問題がある場合や、反対にmacOS VoiceOverでは動作に問題があってもNVDAでは問題なく動作する場合もあります。どちらの環境でも問題なく動作するものを実現できることが理想ですが、freeeでは最低限NVDAで問題なく動作することを目指しています。

[2]

第3回支援技術利用状況調査報告書

事前準備

VoiceOverの起動と終了

VoiceOverの起動と終了は、以下のいずれかの方法で行うことができます。

1. Command+F5キーの押下

2. Commandキーを押しながらTouch IDを3回連続で素早く押す

3. Siriに「ボイスオーバーをオンにする」（起動）または「ボイスオーバーをオフにする」（終了）と話しかける

上記1.と2.の操作は、VoiceOverが起動していないときに実行することでVoiceOverを起動し、VoiceOverが起動しているときに実行することでVoiceOverを終了します。

ファンクション・キーの設定

前述のように、Command+F5キーは、設定によってはfn+Command+F5となる場合があります。ファンクション・キーを使うことが多い場合は、fnキーの押下を必要としない設定にすることも検討すると良いでしょう。

macOS Venturaでの設定手順を以下に示します。

1. Appleメニュー ‣ システム設定の順に選択

2. サイドバーで「キーボード」を選択

3. 右側で「キーボードショートカット」をクリック

   

4. サイドバーで「ファンクションキー」を選択

5. 右側で「F1、F2などのキーを標準のファンクションキーとして使用」をオンにする

   

参考：Mac でファンクションキーを使う方法 - Apple サポート (日本)

初回起動時の操作

VoiceOverを初めて起動したときは、以下のような「ようこそダイアログ」が表示され、画面の内容を読み上げる音声が再生されます。

このダイアログからVoiceOver Quick Startにアクセスすることができますが、この時点ではVキーを押してこの画面を閉じます。なお、VoiceOver Quick Startは、初めてVoiceOverを使用する視覚障害者がVoiceOverの使い方を独習できるように提供されているものです。VoiceOver起動中にVO+Command+F8を押下することでいつでも起動することができます。VoiceOverの操作方法についてより深く理解したい場合などには参考になりますので、活用すると良いでしょう。

推奨設定

VoiceOver動作中にVO+F8を押下すると、VoiceOverユーティリティが起動し、VoiceOverの様々な設定を変更することができます。この画面では、左側に設定のカテゴリーが表示され、右側に現在選択されているカテゴリーの設定項目が表示されます。

この項では、アクセシビリティー・チェックの実施に当たって推奨する設定を、カテゴリーごとに示します。

一般

「VoiceOver起動時にようこそダイアログを表示」のチェックを外します。これにより、前述のようこそダイアログの表示を抑制することができます。

ビジュアル

「パネルとメニュー」タブの「キャプションパネルを表示」にチェックを入れます。これにより、VoiceOverの読み上げ内容が画面上に表示されるようになります。

コマンダー

「トラックパッドコマンダー」タブの「トラックパッドコマンダーを有効にする」のチェックを外します。この項目にチェックが入っていると、トラックパッドをVoiceOverの操作に用いることができるようになり、通常のマウス操作ができなくなります。

「クイックナビ」タブの「クイックナビを有効にする」のチェックを外します。この項目がチェックされていると、VOキーを使わずにできる操作が増えます。日常的にVoiceOverを利用しているユーザーにとっては便利な設定ですが、VoiceOverを利用したアクセシビリティー・チェックを実施する場合には、誤ってこのモードを有効にしてしまった場合などに混乱を招くことも考えられますので、この設定を無効にしておくことを推奨します。

最低限知っておきたいこと

VoiceOverキー（VOキー）とVOキー・ロック

VoiceOver起動中は、特定のキーを押しながら他のキーを押下することで、VoiceOverの機能を利用することができます。これを「VoiceOverキー（VOキー）」と呼びます。初期設定では、Control+Optionキーの組み合わせ、またはCaps Lockキーの両方がVoiceOverキーとして設定されています。

なお、VO+;を押下すると、VOキーを押してロックした状態になります。この状態では、VoiceOverに関する様々なキー操作をVOキーを押さずに実行できるようになりますが、あらゆるキー操作が普段とは異なる挙動になるため注意が必要です。例えば、この状態ではCommand+F5を押下しても、VO+Command+F5を押下したことになり、VoiceOverを終了することはできません。

キー操作が期待通りの挙動にならない場合は、VOキーがロックされた状態になっている可能性も考えられます。この場合は、VO+;を再度押下してロックを解除してください。

VoiceOverカーソルとキーボード・フォーカス

VoiceOverが有効になっていると、VoiceOverカーソルと呼ばれる濃い矩形の枠が画面上に表示されます。VoiceOverカーソルが移動すると、移動した先に表示されているものが読み上げられることに加えて、そこにあるものが操作対象になります。

初期設定では、VoiceOverカーソルとキーボード・フォーカスやカーソルは同期するようになっていて、基本的に同じ場所にあります。しかし、これらは実際には独立したもので、必ずしも常に同じ場所にあるわけではない点に注意が必要です。

同様に、VoiceOverカーソルとマウス・ポインターも独立したものです。初期設定ではこれらは独立して動くようになっていますが、これも設定によって挙動が変わります。

VoiceOverカーソルの移動

VoiceOverカーソルは、VOキーを押しながら矢印キーを押下することで移動することができます。多くの場合、VO+→による右方向への移動を用いて、画面上の表示内容を読み進め、VO+←による左方向への移動を用いて少し戻って読み直す、というような使い方をします。

前述のように、VoiceOverカーソルがある場所にあるものは、操作対象になります。例えば、リンク上にVoiceOverカーソルがある場合、VO+Spaceを押下することで、そのリンクをクリックしたのと同じ結果を得られます。VoiceOverカーソルが何らかの操作ができるものの上にある場合、しばらくすると具体的な操作方法が音声で読み上げられます。

なお、VOキーを押さずに矢印キーを押したときの挙動は、VoiceOverが起動していない場合と同じで、カーソルが移動します。このとき、設定によってVoiceOverカーソルが追従する場合と追従しない場合があります。

項目の操作

テキスト・コンテンツ上でVO+→とVO+←でVoiceOverカーソルを移動する場合、センテンス単位など、ある程度まとまったテキストを単位とした移動が行われます。ところが、場合によってはその移動の単位がウィンドウの構成要素の単位など、もっと大きな単位になる場合があります。

例えば、Google ChromeのツールバーにVoiceOverカーソルがある状態でVoiceOverカーソルを右方向へ移動していくと、表示されているページのコンテンツに差し掛かったところで「Webコンテンツ」とだけ読み上げるような状態になります。これは、ページを表示している部分をVoiceOverが1つの要素として解釈しているためです。

このような場合、いわばその要素の中にVoiceOverカーソルを入れて、内部を探索するような形で読み上げる必要があります。これを行うためのキー操作が、VO+Shift+↓です。

上のGoogle Chromeの例の場合、「Webコンテンツ」と言われた所でVO+Shift+↓を押下することで、ページのコンテンツを表示している部分にVoiceOverカーソルを入れることができます。この状態で、VO+→とVO+←を用いることで、ページの内容を確認することができます。さらに、ページ中の表や箇条書きなどがひとまとまりの要素として解釈されている場合もあり、こういった場合にもVO+Shift+↓を用いることで、その要素の中にVoiceOverカーソルを入れることができます。

VoiceOverカーソルを現在の要素の外に出すときには、VO+Shift+↑を用います。

ローター

VoiceOver起動中にVO+Uを押下すると、ローターと呼ばれるメニューが表示されます。このメニューでは、現在フォーカスされているウィンドウ内にある要素のリストが表示されます。例えば、Webページを表示したGoogle Chromeがフォーカスされている状態でローター・メニューを開くと、リンク、見出し、フォーム・コントロール、表、ランドマークなどの項目が、そのページに含まれているものに応じて表示されます。

これらの項目のうちどの項目のリストを表示するかは、左右矢印キーで切り替えることができます。リストを表示したい項目を選んだら、上下矢印キーでその項目のリスト内を移動します。リスト内の項目上でEnterキーを押すと、その項目にフォーカスが移動します。

知っておきたいキー操作

VO+A

現在VoiceOverカーソルがある箇所以降を読み上げる

VO+Shift+F4

VoiceOverカーソルをキーボード・フォーカスの位置に移動

VO+Command+F4

キーボード・フォーカスをVoiceOverカーソルの位置に移動

VO+Shift+F5

VoiceOverカーソルをマウス・ポインターの位置に移動

Ctrl

読み上げの一時停止、再度押下で再開

VO+K

キーボード・ヘルプ（1度押下するとヘルプ・モードに入り、再度押下するとヘルプ・モードから抜ける。ヘルプ・モードでは、押下したキーの名称や役割が読み上げられる。）

参考情報

ここで紹介した内容は、VoiceOverの機能のごく一部です。より詳しい使い方や、VoiceOverの機能については、以下の情報を参照してください。

• Mac用VoiceOverユーザガイド

なお、このガイドにはVO+Hの押下で表示されるヘルプ・メニューからもアクセスできます。

Webコンテンツのチェック

ここでは、Webコンテンツのチェックを実施する場合の基本的な考え方やよく実行する操作について説明します。

Webコンテンツのチェックをする場合、基本的にはVoiceOverカーソルですべての情報にアクセスできることを確認することが必要です。VO+→で読み進め、VO+←で戻って読むというのが基本的な操作です。

これらのキー操作で進む/戻る長さは、概ね段落単位です。リンクが含まれているテキストの場合は、リンク部分が1つのまとまりとして扱われます。また、使用されているHTMLの要素によって、読み進む際の単位が変わることがあります。VO+→で読み進んだ際に、読み上げがテキストの途中で止まってしまっても、再度VO+→の押下で続きが読み上げられれば問題ありません。

VO+F3を押下すると、直前に読み上げられた内容を再度読み上げさせることができます。（正確には、この操作はVoiceOverカーソルが現在ある項目を説明させる操作です。）

まとまったコンテンツを読み上げさせる

VO+Aを押下すると、現在VoiceOverカーソルがある箇所以降を読み上げさせることができます。

設定によっては、マウス・ポインターの位置に自動的にVoiceOverカーソルが移動しますが、そのような設定になっていない場合は、VO+Shift+F5キーを押下することで、VoiceOverカーソルをマウス・ポインターの位置に移動することができます。この方法と、VO+→やVO+←でVoiceOverカーソルを目的の箇所に移動した上で、VO+Aを押下することで、特定の箇所の読み上げを確認することができます。

また、VO+Shift+Home（ラップトップ機ではVO+Shift+fn+←）で、VoiceOverカーソルをページの先頭に移動することができます。この操作とVO+Aを組み合わせることで、ページ全体を読み上げさせることができます。

途中で読み上げを停止したい場合は、Ctrlキーを押下します。Ctrlキーを押下して読み上げを一時停止してから、他の操作をなにもしていない状態の場合は、再度Ctrlキーを押下することで読み上げを再開することができます。または、再度VO+Aを押下して、続きを読み上げさせることもできます。

操作を受け付けるコンポーネント

開閉できるメニュー、アコーディオンなど、何らかの操作を受け付けるコンポーネントについては、キーボードで操作ができることを確認する必要があります。

具体的には、VoiceOverカーソルとキーボード・フォーカスをそのコンポーネント上に移動し、そのコンポーネント上でキー操作を実行してみます。

初期設定ではVoiceOverカーソルとキーボード・フォーカスは連動するようになっていますが、そのような設定になっていない場合は、以下のいずれかの操作でVoiceOverカーソルとキーボード・フォーカスを目的のコンポーネント上に移動させます。

• キーボード・フォーカスを目的のコンポーネント上に移動させてから、VO+Shift+F4を押下

• VoiceOverカーソルを目的のコンポーネント上に移動させてから、VO+Command+F4を押下

キー操作をする際は、カーソルキーやEnterキー、Spaceキー、EscキーなどをVOキーとは組み合わせずに押下して挙動を確認します。その結果として新たなコンテンツが表示された場合は、そのコンテンツをVoiceOverカーソルで読み上げ可能なことを確認します。

移動のための様々なキー操作

VoiceOver起動中は、以下に挙げるようなキー操作でコンテンツ内を移動することができます。

VoiceOverで使用できるキー操作（抜粋）

キー操作	説明
VO+Command+H、Shift+VO+Command+H	次、前の見出し
VO+Command+X、Shift+VO+Command+X	次、前のリスト（ul、ol、dl要素）
VO+Command+G、Shift+VO+Command+G	次、前の画像
VO+Command+J、Shift+VO+Command+J	次、前のフォーム・コントロール
VO+Command+T、Shift+VO+Command+T	次、前の表

iOS VoiceOverを用いたチェックの実施方法

iOS用スクリーン・リーダーのVoiceOverの推奨設定の方法、基本的な使い方と基本的なチェックの実施方法について記します。

なお、macOSにも同名のスクリーン・リーダーが標準搭載されていますが、iOSのVoiceOverとはまったくの別物です。本稿ではiOSのVoiceOverについてのみ記し、「VoiceOver」という記述はiOS VoiceOverを差します。

本稿ではごく一部の機能や設定について紹介しています。より詳しくは、Appleが提供するiPhoneユーザガイドの「iPhoneのアクセシビリティ機能を使ってみる」を参照してください。VoiceOverに加えて、その他のアクセシビリティー関連機能についても詳しく紹介されています。

起動と終了

VoiceOverの起動と終了の方法はいくつかありますが、一時的に有効にしたり、有効/無効を切り替えながら使うような場合は、以下の設定をすると便利です。

1. 「設定」アプリ、アクセシビリティをタップ

2. この画面最下部のショートカットをタップ

3. VoiceOverが選択された状態にする

この設定を行うことで、ホーム・ボタン（ホーム・ボタンがない機種の場合はサイド・ボタン）を素早く3度押して、VoiceOverの有効/無効を切り替えることができるようになります。

推奨設定

以下、アクセシビリティー・チェック実施の観点で推奨される設定を記します。

ヒントの読み上げ

選択されているオブジェクトについて、操作方法のヒントを読み上げるかどうかの設定です。

設定の場所

「設定」アプリ、アクセシビリティ ‣ VoiceOver ‣ 詳細度

推奨設定

「ヒントを読み上げる」をオンにする

ローター

後述するローター・ジェスチャーによって選択できる設定項目を設定します。

設定の場所

「設定」アプリ、アクセシビリティ ‣ VoiceOver ‣ ローター

推奨設定

• 「見出し」を選択

• その他、必要に応じてよく使う項目を選択し、使うことがないものの選択を解除

句読点の読み上げ

左右方向へのフリック操作で読み上げを実行する際などの、句読点の読み上げ方を設定します。

設定の場所

「設定」アプリ、アクセシビリティ ‣ VoiceOver ‣ 詳細度 ‣ 句読点および記号

推奨設定

「一部」を選択

多言語読み上げが可能な設定

読み上げるコンテンツの言語に応じて、読み上げに用いる音声合成エンジンをその言語用のものに切り替えられるようにするための設定です。

設定の場所

「設定」アプリ、アクセシビリティ ‣ VoiceOver ‣ 読み上げ

推奨設定

• 「言語を検出」をチェック

• 「ローターで選択可能な言語」に、日本語と英語がある状態（いずれかがない場合は、「新しい言語を追加」をタップして追加）

• この状態で、ローター・ジェスチャーで「言語」を選択し、1本指の上または下方向へのフリックで「デフォルト（日本語）」を選択

VoiceOverの読み上げ内容の表示

VoiceOverが読み上げる内容を、画面下部に表示する設定です。

設定の場所

「設定」アプリ、アクセシビリティ ‣ VoiceOver

推奨設定

「キャプションパネル」をチェック

基本的な使い方

VoiceOver有効時に使われることが多い、基本的なジェスチャーを以下に示します。

1本指による右および左方向へのフリック

フォーカスを次（右フリック）または前（左フリック）のオブジェクトに移して、そのオブジェクトを読み上げます。

画面の先頭のオブジェクトが選択されているときに左フリック、または画面の末尾のオブジェクトが選択されているときに右フリックすると、「ポン」という効果音が再生され、選択されているオブジェクトが読み上げられます。

この方法で画面の内容を読み上げさせることでチェックを実施する場合、以下が基本的な手順です：

1. 画面の先頭（普通は左上）のオブジェクトにタッチして選択された状態にする

2. 左フリックをしてそれ以上前にオブジェクトが存在しないことを確認（フリック時に「ポン」という効果音が再生され、選択されているオブジェクトが読み上げられる）

3. 左方向にフリックして別の内容が読み上げられる場合は、先頭のオブジェクトに到達するまで左フリック

4. そこから画面の末尾に到達するまで、読み上げられる内容を確認しながら右フリックを繰り返す

1本指によるダブルタップ

上述の1本指による左右方向へのフリックを行うことで、画面上のオブジェクトのいずれかが選択された状態になります。また、画面上の任意のオブジェクトを1本指でタップすることでも、そのオブジェクトが選択された状態になります。

画面上のオブジェクトが選択された状態のとき、画面上の任意の場所を1本指で素早く2度タップ（ダブルタップ）すると、そのオブジェクトがアクティベートされます。すなわち、VoiceOverが有効になっているときのダブルタップは、VoiceOverが無効になっているときのタップ操作に相当します。

1本指による上および下方向へのフリック

後述するローター・ジェスチャーで設定された内容に基づいて、読み上げ、フォーカスの移動、設定の変更などの操作をすることができます。

例えば、ローターの設定が「文字」のときは、1本指の下方向ーのフリックで次の文字、上方向ーのフリックで前の文字に移動して、その文字を読み上げます。ローターで「単語」や「行」を選択すると、移動の単位がそれぞれ単語や行に変わります。

また、ローターの設定が、「見出し」、「表」、「ボタン」などの場合は、1本指の下/上方向へのフリックで、次/前の当該オブジェクトに移動して読み上げます。「読み上げ速度」、「言語」などの場合は、1本指の上下方向へのフリックで、当該の設定値を変更します。

ローター・ジェスチャー

ローター・ジェスチャーは、2本の指でつまみを回すようなジェスチャーです。コンパスで円を描くようなイメージです。

ローターの設定に関しては、前述の推奨設定も参照してください。

スクロール

スクロールは、3本指によるフリックで行います。

縦長の画面でのスクロールは3本指による上または下方向へのフリックで縦方向にスクロールすることができます。また、例えばホーム画面で画面を切り替えるような場合は、3本指による右または左方向へのフリックで実行することができます。

その他の3本指によるフリック操作

画面上部のステータス領域に1本指で触れて、この領域に表示されているものが選択されている状態のとき、以下の操作が可能です。

画面の任意の場所を3本指で下方向にフリック

通知センターの表示

画面の任意の場所を3本指で上方向にフリック

コントロール・センターを表示

また、「引き下げて更新」のジェスチャーが使用できる場面では、VoiceOver有効時には更新対象が表示されている部分のどこかが選択された状態で3本指による下方向へのフリック操作で、更新を実行することができます。

ホーム画面への移動

ホーム・ボタンを搭載していない機種の場合、以下の手順でホーム画面へ移動します。

1. 画面下端に1本指で触れる。

2. そのまま指を離さず、上方向に指を動かす。

3. 振動を1度感じたら、指を離す。

なお、ここで指を離さず再度振動感じるまで指を動かしてから離すと、Appスイッチャーが表示されます。

戸惑わないために知っておきたいジェスチャー

以下に挙げる操作は、意図せずに実行して戸惑うことが多い操作です。チェックの際に使うことはあまりありませんが、事前に知っておくことでうっかりこれらの操作を実行してしまっても適切に対応することができるはずです。

読み上げのオン/オフ

3本指でダブルタップすると、VoiceOverの音声がミュートされます。この状態で操作すると、VoiceOverの効果音だけが再生され、読み上げはされません。

再度3本指でダブルタップすると、ミュートは解除されます。

スクリーン・カーテン

3本指でトリプルタップ（素早く3回タップ）すると、画面表示が停止されます。画面表示がされなくなるだけで、VoiceOverも含めて他の機能はすべて正常に動作している状態になります。

再度3本指でトリプルタップすることで、画面表示を再開できます。

なお、この機能を用いることで、画面表示が見えない状態での操作が可能かどうかを確認するといったことも可能です。

音楽の再生

2本指でダブルタップすると、音楽が再生されることがあります。

再度2本指でダブルタップすることで、再生を停止することができます。

一般的に用いられるコンポーネントの操作方法と期待される挙動

ここでは、用いられることが多い標準のUIコンポーネントについて、VoiceOver使用時の挙動と操作方法を記します。UIコンポーネントを独自に実装する場合は、これらを参考にしてVoiceOver使用時の挙動を定めると良いでしょう。

ボタン

UIコンポーネント

ボタン

参考

ボタン | Apple Developer Documentation

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• そのボタンの役割が分かるテキストが読み上げられる

• ボタンであることが分かる読み上げがされる

1本指によるダブルタップ

• ボタンがアクティベートされる

実装のポイント

• traitにbuttonを指定する

• labelにボタンの役割を示すテキストを指定する

ラベル

UIコンポーネント

ラベル

参考

ラベル | Apple Developer Documentation

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

ラベルの内容が読み上げられる

ページコントロール

UIコンポーネント

ページコントロール

参考

ページコントロール | Apple Developer Documentation

使用されている箇所の例

「天気」アプリの画面下部、天気を表示する地点を切り替えるコントロール

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• なにを変更するためのコントロールかが分かる読み上げがされる

• 現在選択されている項目が読み上げられる

• 現在選択されている項目が、全部でいくつある項目のうちのいくつ目かが分かる読み上げがされる

• 選択を変更できることが分かる読み上げがされる（例：「調整可能」などと発声する）

1本指による上または下方向へのフリック

• 選択項目が変更され※、変更後の状態を読み上げる

※このとき、ローターで「値を調整」が選択されている必要があります。通常は、フォーカスされた時に自動的にこの設定になります。

ピッカー

UIコンポーネント

ピッカー

参考

ピッカー | Apple Developer Documentation

使用されている箇所の例

「ヘルスケア」アプリの「概要」タブ内、プロフィール ‣ ヘルスケアの詳細 ‣ 編集 ‣ 生年月日

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• 現在選択されている項目が読み上げられる

• 現在選択されている項目が、全部でいくつある項目のうちのいくつ目かが分かる読み上げがされる

• 選択を変更できることが分かる読み上げがされる（例：「調整可能」や「ピッカー項目」などと発声する）

1本指による上または下方向へのフリック

• 選択状態が変更され※、変更後の状態を読み上げる

※このとき、ローターで「値を調整」が選択されている必要があります。通常は、フォーカスされた時に自動的にこの設定になります。

セグメントコントロール

UIコンポーネント

セグメントコントロール

参考

セグメントコントロール | Apple Developer Documentation

使用されている箇所の例

「マップ」アプリの「地図モード」をタップすると表示される、地図の表示モードを切り替える画面

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• そのセグメントの内容が分かるテキストが読み上げられる

• そのセグメントの選択状態が分かる読み上げがされる（選択状態の場合は「選択中」といった発声があり、選択されていない場合には選択状態に関する発声がない）

1本指によるダブルタップ

• そのセグメントが選択状態になり、選択状態が変わったことが分かる読み上げがされる

スライダ

UIコンポーネント

スライダ

参考

スライダ | Apple Developer Documentation

使用されている箇所の例

「設定」アプリの「画面表示と明るさ」内、「画面の明るさ」のコントロール

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• なにを変更するためのコントロールかが分かる読み上げがされる

• 現在の設定値が読み上げられる

• 値を変更できることが分かる読み上げがされる（例：「調整可能」などと発声する）

1本指による上または下方向へのフリック

• 値が変更され※、変更後の値を読み上げる

※このとき、ローターで「値を調整」が選択されている必要があります。通常は、フォーカスされた時に自動的にこの設定になります。

実装のポイント

• traitにsliderを指定する

• labelに変更対象が分かるテキストを指定する

• valueに現在の値を指定する

トグル

UIコンポーネント

トグル

参考

トグル | Apple Developer Documentation

使用されている箇所の例

「設定」アプリの「サウンドと触覚」内、「画面の明るさ」のコントロール

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• なにを変更するためのコントロールかが分かる読み上げがされる

• 現在の選択状態（オン/オフ）が読み上げられる

1本指によるダブルタップ

選択状態が切り替わり、変更後の状態が読み上げられる

テキストフィールド

UIコンポーネント

テキストフィールド

参考

テキストフィールド | Apple Developer Documentation

使用されている箇所の例

「設定」アプリ、メール ‣ アカウント ‣ アカウント追加 ‣ iCloudアカウントの、Apple IDを入力するフィールド

VoiceOver利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• なにを変更するためのコントロールかが分かる読み上げがされる

• text fieldであることが分かる読み上げがされる

• 現在入力されている値、またはプレイスホルダーとして表示されている値が読み上げられる

1本指によるダブルタップ

• 編集可能な状態に切り替わる

• 画面上に表示されたキーボードから入力ができる

• 外付けのキーボードが接続されている場合は、そのキーボードからも入力ができる

編集可能な状態での1本指による上または下方向へのフリック

• ローターの設定※に応じてカーソルが移動し、移動した範囲の入力内容が読み上げられる

※ローターの設定が、「文字」の場合は1文字ずつ、「単語」の場合は1単語ずつ、「行」の場合は1行ずつ移動します。

Android TalkBackを用いたチェックの実施方法

Android用スクリーン・リーダーのTalkBackの推奨設定の方法、基本的な使い方と基本的なチェックの実施方法について記します。

なお、本稿の記述は、以下の環境に基づいたものです。機種、AndroidのバージョンやTalkBackのバージョンによって細部が異なる可能性があります。

端末

Pixel 6

Androidバージョン

12

TalkBackバージョン

12.1

本稿ではごく一部の機能や設定について紹介しています。より詳しくは、Googleが提供するAndroidのユーザー補助機能に関するヘルプ内、「スクリーンリーダーを使用する」にあるTalkBackに関する情報を参照してください。

起動と終了

TalkBackの起動と終了の方法はいくつかありますが、一時的に有効にしたり、有効/無効を切り替えながら使うような場合は、以下の設定をすると便利です。

1. 「設定」アプリ、ユーザー補助 ‣ TalkBackの順にタップ

2. TalkBackショートカットをオンにする

3. TalkBackショートカットが「音量大と音量小の両方のボタンを長押し」になっていない場合は、TalkBackショートカットをタップし、音量キーを長押しをチェック

この設定を行うことで、音量大と音量小のボタンを同時に長押しして、TalkBackの有効/無効を切り替えることができるようになります。

推奨設定

以下、アクセシビリティー・チェック実施の観点で推奨される設定を記します。

読み上げの詳細設定

オブジェクトの選択時などに読み上げられる情報量を制御する設定です。

設定の場所

「設定」アプリ、ユーザー補助 ‣ TalkBack ‣ 設定 ‣ 読み上げの詳細設定

推奨設定

• 「プリセットの選択」で「高」を選択、または

• 「プリセットの選択」で「カスタム」を選択肢、以下の項目が有効になっていることを確認する

  • 使用に関するヒントの読み上げ

  • リストやグリッドの情報の読み上げ

  • 画面に表示されるリスト項目の数を読み上げる→常に読み上げる

  • 要素タイプの読み上げ

読み上げコントロール

後述する読み上げコントロールによって選択できる設定項目を設定します。

設定の場所

「設定」アプリ、ユーザー補助 ‣ TalkBack ‣ 設定 ‣ メニューのカスタマイズ ‣ 読み上げコントロールをカスタマイズ

推奨設定

• 「見出し」を選択

• その他、必要に応じてよく使う項目を選択し、使うことがないものの選択を解除

TalkBackの読み上げ内容の表示

TalkBackが読み上げる内容を、画面に表示する設定です。

設定の場所

「設定」アプリ、ユーザー補助 ‣ TalkBack ‣ 設定 ‣ 詳細設定 ‣ デベロッパー向けの設定

推奨設定

「音声出力の表示」をチェック

基本的な使い方

TalkBack有効時に使われることが多い、基本的なジェスチャーを以下に示します。なお、これらのジェスチャーはデフォルトの設定で有効なもので、ほとんどのジェスチャーは好みに応じて変更することが可能です。

1本指による右および左方向へのフリック

フォーカスを次（右フリック）または前（左フリック）のオブジェクトに移して、そのオブジェクトを読み上げます。

画面の先頭のオブジェクトが選択されているときに左フリック、または画面の末尾のオブジェクトが選択されているときに右フリックすると、「ポン」という効果音が再生されます。さらに同じ方向にフリックすると、画面末尾で右フリックの場合は画面先頭の、画面先頭で左フリックの場合は画面末尾のオブジェクトが選択され読み上げられます。

この方法で画面の内容を読み上げさせることでチェックを実施する場合、以下が基本的な手順です：

1. 画面の先頭（普通は左上）のオブジェクトにタッチして選択された状態にする

2. 左フリックをしてそれ以上前にオブジェクトが存在しないことを確認（フリック時に「ポン」という効果音が再生される。再度左フリックすると、画面末尾のオブジェクトが選択され読み上げられる。）

3. 左方向にフリックして別の内容が読み上げられる場合は、先頭のオブジェクトに到達するまで左フリック

4. そこから画面の末尾に到達するまで、読み上げられる内容を確認しながら右フリックを繰り返す

1本指によるダブルタップ

上述の1本指による左右方向へのフリックを行うことで、画面上のオブジェクトのいずれかが選択された状態になります。また、画面上の任意のオブジェクトを1本指でタップすることでも、そのオブジェクトが選択された状態になります。

画面上のオブジェクトが選択された状態のとき、画面上の任意の場所を1本指で素早く2度タップ（ダブルタップ）すると、そのオブジェクトがアクティベートされます。すなわち、TalkBackが有効になっているときのダブルタップは、TalkBackが無効になっているときのタップ操作に相当します。

1本指による上および下方向へのフリック

後述する読み上げコントロールの変更のジェスチャーで選択された内容に基づいて、読み上げ、フォーカスの移動、設定の変更などの操作をすることができます。

例えば、読み上げコントロールで「文字」が選択されているときは、1本指の下方向ーのフリックで次の文字、上方向ーのフリックで前の文字に移動して、その文字を読み上げます。読み上げコントロールで「単語」や「行」を選択すると、移動の単位がそれぞれ単語や行に変わります。

また、読み上げコントロールの選択が、「見出し」、「コントロール」、「リンク」などの場合は、1本指の下/上方向へのフリックで、次/前の当該オブジェクトに移動して読み上げます。「読み上げ速度」、「言語」などの場合は、1本指の上下方向へのフリックで、当該の設定値を変更します。

読み上げコントロールの変更（3本指による上および下方向へのフリックなど）

読み上げコントロールの設定変更には、デフォルトで以下のジェスチャーが割り当てられています。いずれのジェスチャーも同じ操作に割り当てられていますので、使いやすいものを使用します。

• 3本指による上および下方向へのフリック

• 3本指による左および右方向へのフリック

• 1本指による上方向へのフリックに続けて下方向にフリック、および下方向へのフリックに続けて上方向にフリック

読み上げコントロールの設定に関しては、前述の推奨設定も参照してください。

スクロール

スクロールは、2本指で画面に触れ、ゆっくりと動かすような操作で行います。同じ距離をフリックよりも時間をかけて移動するようなイメージです。この動きを、本稿では以下「スライド」と記します。

縦長の画面でのスクロールは2本指による上または下方向へのスライドで縦方向にスクロールすることができます。また、例えばホーム画面で画面を切り替えるような場合は、2本指による右または左方向へのスライドで実行することができます。

その他の2本指による操作

TalkBackが有効でない場合に1本指のフリックで行う操作は、TalkBack有効時には2本指によるフリック操作で実行できます。

例えば、画面下端から上方向に1本指でフリックすることでホーム画面に移動する設定がされている場合、TalkBack有効時には画面下端に2本指で触れてそのまま上方向にフリックすることで同様の操作をすることができます。

戸惑わないために知っておきたいジェスチャー

以下に挙げる操作は、意図せずに実行して戸惑うことが多い操作です。チェックの際に使うことはあまりありませんが、事前に知っておくことでうっかりこれらの操作を実行してしまっても適切に対応することができるはずです。

音楽の再生

2本指でダブルタップすると、音楽が再生されることがあります。

再度2本指でダブルタップすることで、再生を停止することができます。

一般的に用いられるコンポーネントの操作方法と期待される挙動

ここでは、用いられることが多い標準のUIコンポーネントについて、TalkBack使用時の挙動と操作方法を記します。UIコンポーネントを独自に実装する場合は、これらを参考にしてTalkBack使用時の挙動を定めると良いでしょう。

ボタン

UIコンポーネント

• button

• FAB

参考

• Common buttons – Material Design 3

• FAB – Material Design 3

使用されている箇所の例

button

「電話」アプリ、キーパッドの「発信」ボタン

FAB

「Gmail」アプリ、右下の作成ボタン

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• そのボタンの役割が分かるテキストが読み上げられる

• ボタンであることが分かる読み上げがされる

1本指によるダブルタップ

• ボタンがアクティベートされる

checkbox

UIコンポーネント

checkbox

参考

Checkbox – Material Design 3

使用されている箇所の例

「カレンダー」アプリ、左上のボタン（TalkBackでは「カレンダーリストと設定ドロワーを表示する」と読み上げられるボタン）をタップして表示される画面の、カレンダーのリスト

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• なにを変更するためのコントロールかが分かる読み上げがされる

• 現在の選択状態（オン/オフ）が読み上げられる

1本指によるダブルタップ

選択状態が切り替わる

switch

UIコンポーネント

switch

参考

Switch – Material Design 3

使用されている箇所の例

「設定」アプリ、ネットワークとインターネットの「機内モード」の切り替え

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• スイッチであることが読み上げられる

• なにを変更するためのコントロールかが分かる読み上げがされる

• 現在の選択状態（オン/オフ）が読み上げられる

1本指によるダブルタップ

選択状態が切り替わり、変更後の状態が読み上げられる

radio button

UIコンポーネント

radio button

参考

Radio button – Material Design 3

使用されている箇所の例

「設定」アプリ、ネットワークとインターネット ‣ プライベート DNSの「OFF】、「自動」、「プライベートDNSプロバイダのホスト名」の選択

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• ラジオボタンであることが分かる読み上げがされる

• 現在選択されている項目が読み上げられる

• 現在選択されている項目が、全部でいくつある項目のうちのいくつ目かが分かる読み上げがされる

1本指によるダブルタップ

• 選択状態が変更され、変更後の状態を読み上げる

スピナー

UIコンポーネント

menu

参考

Menus – Material Design 3

使用されている箇所の例

「時計」アプリ、その他のオプション ‣ 設定のアラームの「週の始まり」の設定

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• 変更対象が分かる読み上げがされる

• 現在選択されている項目が読み上げられる

1本指によるダブルタップ

選択肢が表示される

選択肢が表示された状態で

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

選択肢が読み上げられる

1本指によるダブルタップ

その項目が選択されて元の画面に戻る

time picker

UIコンポーネント

time picker

参考

Time pickers – Material Design 3

使用されている箇所の例

「時計」アプリ、「アラーム」タブ、アラームを追加で表示される画面

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• フォーカスされている項目が読み上げられる

• 現在選択されている項目の場合は、そのことが分かる読み上げがされる

1本指によるダブルタップ

その項目が選択された状態になる

ポップアップ

UIコンポーネント

snackbar

参考

Snackbars – Material Design 3

使用されている箇所の例

「Gmail」アプリ、メール一覧でメールを長押し後、既読にするをタップすると表示される

TalkBack利用時の挙動

表示内容が自動的に読み上げられる

dialog

UIコンポーネント

dialog

参考

Dialogs – Material Design 3

使用されている箇所の例

「設定」アプリ、ネットワークとインターネット ‣ プライベート DNSで表示される画面

TalkBack利用時の挙動

1本指による右/左方向へのフリック

• ダイアログ内の要素間でフォーカスが移動し、選択される

• フォーカスされている要素が読み上げられる

1本指で触れる

• 触れた箇所にある要素がフォーカスされる

• フォーカスされている要素が読み上げられる

1本指によるダブルタップ

フォーカスされている要素がアクティベートされる

ハンバーガー・メニュー

UIコンポーネント

navigation drawer

参考

Navigation drawer – Material Design 3

使用されている箇所の例

「Gmail」アプリ、画面左上に表示されている3本線

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

ナビゲーション・ドロワーであることが分かる読み上げがされる

1本指によるダブルタップ

メニューが開いて選択肢が表示される

メニューが開いている状態で

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

選択肢が読み上げられる

1本指によるダブルタップ

その項目が選択されて当該画面に遷移する

画面右上のメニュー

UIコンポーネント

top app bar

参考

Top app bar – Material Design 3

使用されている箇所の例

「Chrome」アプリ、右上に表示されているメニュー

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

タップできることが分かる読み上げがされる

1本指によるダブルタップ

メニューが開いて選択肢が表示される

メニューが開いている状態で

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

選択肢が読み上げられる

1本指によるダブルタップ

その項目が選択されて当該画面に遷移する

tab

UIコンポーネント

tab

参考

Tabs – Material Design 3

使用されている箇所の例

「Playストア」アプリ、「おすすめ」、「ランキング」、「子供」などのタブ

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• タブの名称（タイトル）が読み上げられる

• 現在選択、表示されているタブの場合は、選択されていることが分かる読み上げがされる

1本指によるダブルタップ

そのタブが選択状態になり、選択されたことが分かる読み上げがされる

縦スクロール

UIコンポーネント

list

参考

Lists – Material Design 3

使用されている箇所の例

「Playストア」アプリ、コンテンツの一覧

TalkBack利用時の挙動

2本指を上/下方向へスライド

• 効果音が再生され、表示がスクロールする

• 指を離すと、全何項目中の何項目目から何項目目までが表示されているかが分かる読み上げがされる

text field

UIコンポーネント

text field

参考

Text fields – Material Design 3

使用されている箇所の例

「Gmail」アプリ、作成の、件名や本文を入力するフィールド

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

• なにを変更するためのコントロールかが分かる読み上げがされる

• text fieldであることが分かる読み上げがされる

• 現在入力されている値、またはプレイスホルダーとして表示されている値が読み上げられる

1本指によるダブルタップ

• 編集可能な状態に切り替わる

• 画面上に表示されたキーボードから入力ができる

• 外付けのキーボードが接続されている場合は、そのキーボードからも入力ができる

編集可能な状態での1本指による上または下方向へのフリック

• 読み上げコントロールの設定※に応じてカーソルが移動し、移動した範囲の入力内容が読み上げられる

※読み上げコントロールの設定が、「文字」の場合は1文字ずつ、「単語」の場合は1単語ずつ、「行」の場合は1行ずつ移動します。

検索ボックス

UIコンポーネント

search

参考

Search – Material Design 3

使用されている箇所の例

「設定」アプリ画面内の「設定を検索」

TalkBack利用時の挙動

1本指で触れる、または1本指による右/左方向へのフリックでフォーカス

検索ボックスであることが分かる読み上げがされる

1本指によるダブルタップ

• 編集可能な状態に切り替わる

• 画面上に表示されたキーボードから入力ができる

• 外付けのキーボードが接続されている場合は、そのキーボードからも入力ができる

編集可能な状態での1本指による上または下方向へのフリック

• 読み上げコントロールの設定※に応じてカーソルが移動し、移動した範囲の入力内容が読み上げられる

検索語入力ご

• 1本指による右/左方向へのフリックで検索候補間を移動

• 検索候補を1本指でダブルタップすると検索を実行など

※読み上げコントロールの設定が、「文字」の場合は1文字ずつ、「単語」の場合は1単語ずつ、「行」の場合は1行ずつ移動します。

axe DevToolsを使用したアクセシビリティー・チェック

axe DevToolsは非常によく使われているアクセシビリティー・チェック・ツールです。基本機能がaxe-coreとして実装されているため様々な方法で使用することができますが、ここではブラウザー拡張機能として利用して、出来上がっているWebページのアクセシビリティーの対応状況をチェックする方法を紹介します。

なお、axe DevToolsを用いた具体的なチェックの実施方法については、axe DevToolsを用いたチェック実施方法の例を参照してください。また、axe DevToolsのルールと当ガイドラインの対応も合わせて参照してください。

axe DevToolsのインストールと起動の仕方

ChromeウェブストアからChrome拡張をインストールできます。

axe DevTools - Web Accessibility Testing - Chrome ウェブストア

axe DevTools拡張機能はデベロッパーツール内で使用します。

分析対象のページを開いた状態で、ツールバー右端のボタンからその他のツール ‣ デベロッパーツールを選択するか、ショートカットキー（WindowsではCtrl+Shift+I、macOSではCommand+Option+I）を使用してください。

デベロッパーツールのタブから「axe DevTools」を選択します。

デベロッパーツールの表示領域が狭い場合は「>>」アイコンに隠されていることがあります。

初期設定（推奨）

より多くの項目をチェックするために、以下の初期設定を行うと良いでしょう。

1. Options ‣ Settingsの順にクリック

   

2. "Best Practices"で"Enable"をチェック

   

3. 「保存」をクリック

axe DevToolsで今見ているページを分析する

分析対象のページを開いた状態でデベロッパーツール内のaxe DevToolsのタブを開き、「SCAN ALL OF MY PAGE」ボタンをクリックします。

今見ているページの問題を瞬時に発見することができます。

レポートの見方

axe DevToolsの画面には発見された問題の件数が表示されるエリアと、その問題のリストが表示されるエリアがあります。

発見された問題の件数が表示されるエリアには、そのページにある問題の件数が表示されます。ここで、axe DevTools内のUser Impact（当ガイドライン内での「重篤度」などの定義とは別のものです）や、「Best Practices」などを使ってリストをフィルターすることができます。

発見された問題のリストは、クリックで開くことでその問題の詳細ビューを見ることができます。

詳細ビューにはその問題が起きているHTML上の場所や、修正するための情報が表示されています。

同じ問題が複数箇所で見つかっている場合は、リスト上にその件数が表示され、詳細ビューのページャーで1つ1つ確認していくことができます。

axe DevToolsを使用する上での注意点

• モーダル・ダイアログやアコーディオンが開閉するような場所では、開いた状態や閉じた状態で何度かaxe DevToolsで分析してみる必要があります

• axe DevToolsだけではすべての問題を発見することはできませんが、機械的に発見できる問題を瞬時に発見することができます。また、調査の必要そうな場所を発見するために非常に有用です。

関連FAQ

• axe DevToolsの警告への対処

よくある質問と回答（FAQ）

ここでは、freee社内外から寄せられた質問の中で、比較的一般化できるものを「よくある質問と回答（FAQ）」としてまとめています。

各FAQ記事には、その内容に関連するキーワードをタグとして付与しています。また、関連するガイドライン項目、チェック内容や参考情報へのリンクも掲載しています。

FAQ記事一覧

よくある質問と回答（FAQ）の全記事一覧です。

見出しレベルの指定

最終更新：2023年12月5日

タグ：マークアップ

質問/問題

見出し、小見出しを設定するべきか、どの部分を見出しに指定すべきか分からない。

回答/結論

• 画面のタイトルや目的を示すような見出し（大見出し）は必ず配置する。

• 情報の区切りが視覚的に分かる形で表現されている場合、小見出しを配置する

• 検索欄の検索設定項目が多い、内容からグルーピングの意図が類推しづらい、などの場合、小見出しの配置を検討する

• 小見出しのレベルは、見出しのみを見て、または、「見出しレベル1のみ」「見出しレベル1と2のみ」「1と2と3のみ……」のように一定のレベル以上のものだけを読んだとき、画面の情報構成が類推できるように指定する

解説

一般的なテクニックとして、使用する見出しレベルを3つ程度に抑えることで、コンテンツの構成が練りやすく、また分かりやすくなります。4段階以上のレベルが必要な場合には、別項目として切り出すなど、構成を検討してみるとよいでしょう。

見出しだけを読んでみて、ページにどんな情報が並んでいそうかを想像できなければ、見出しが足りていない可能性が高いです。

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

• テキスト：適切な文言の見出し

関連チェック内容

チェックID：0271

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

関連する参考情報

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

• セマンティクスを適切にマークアップする重要性

アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

最終更新：2024年12月2日

タグ：マークアップ、スクリーン・リーダー

質問/問題

アイコン画像の説明として、代替テキストに「アイコン」や「ボタン」という言葉を含める必要はないのか。

回答/結論

代替テキストに「アイコン」や「ボタン」という言葉を含めるべきではない。

解説

適切なマークアップがされているアイコン画像を読み上げる際、スクリーン・リーダーはそれが画像であるという情報と共に代替テキストを読み上げますので、ユーザーはそれがアイコンであることを推測できます。ですから、代替テキストに「アイコン」という言葉を含める必要はありません。そもそも、それがアイコンであるかどうかを判断できなければ機能の利用や情報の取得に支障があるような状況は避けるべきです。

また、そのアイコンがボタンになっている場合は、それがボタンであるという情報も読み上げます。そのため、代替テキストに「ボタン」という言葉を含める必要もありません。もしボタンであることが分からないような読み上げになる場合は、マークアップに問題がある可能性が高いです。

参考：スクリーン・リーダーによる画像やボタンといった情報の追加は、読み上げ対象となっている要素のロール（役割）に基づいています。すべての要素にはデフォルトのロールがあります。またrole属性を用いることで、要素のロールをデフォルトから変更することができます。適切な要素を用いて、必要に応じてrole属性を活用することで、スクリーン・リーダーが適切に情報を追加できるようになります。

関連ガイドライン項目

• 画像：画像の説明の提供

関連チェック内容

チェックID：0421

画像の内容が過不足なく伝わるテキストによる説明が、設計資料に明示されている。

チェックID：0431

• 画像に関する簡潔で過不足ない説明が付加されている。かつ

• 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または関連付けられている。

チェックID：0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

関連する参考情報

• テキストによる画像の説明

• UIコンポーネントのアクセシビリティー

• セマンティクスを適切にマークアップする重要性

ラジオボタンやチェックボックスのサイズ

最終更新：2023年12月14日

タグ：フォーム、ターゲット・サイズ

質問/問題

サイズが24×24pxより小さいラジオボタンやチェックボックスは、チェックID：0331とチェックID：0351でNGとすべきか

回答/結論

ブラウザーのデフォルトの表示から変更していない場合は問題ない。

解説

チェックID：0331とチェックID：0351は、ガイドライン項目十分な大きさのクリック/タッチのターゲットを満たすための条件を示しています。このガイドラインは、WCAG 2.1の達成基準2.5.5 Target Size（ターゲットのサイズ）が元になっています。

レベルAAAのこの達成基準では、マウスなどのポインティング・ディバイスの操作対象（チェックボックスやラジオボタンを含む）の大きさとして44×44px以上のサイズを求めています。デスクトップ向けサービスの多いfreeeでは、44×44px以上を満たすのは難しいものの、何らかの基準は必要ということで、24×24pxという基準を設けています。

なお、WCAGの最新バージョンであるWCAG 2.2では、Target Size (Minimum) として、24×24px以上を求めるレベルAAの達成基準2.5.8が追加されています。

これらの達成基準では、例外事項として、「ユーザエージェントのコントロールである: ターゲットのサイズがユーザエージェントによって定められており、かつコンテンツ制作者が変更していない。」という項目があるため、freeeのガイドライン/チェックリストでも、ブラウザーのデフォルトから変更していないものは対象外としています。ブラウザーのデフォルトでラジオボタンやチェックボックスのサイズが小さいのはコンテンツ製作者の責任ではなく、またブラウザーのデフォルトにしてあればユーザー側で変更することも可能だろうという想定なのだと考えられます。

ブラウザーのデフォルトから変更しているかどうかの判断方法には、以下のようなものがあります。

• MDNのチェックボックスのサンプルやラジオボタンのサンプルと見比べてみて、明らかに見た目が違う場合は変更されている。

• 開発者ツールを用いてページのソースを確認する：

  1. チェックボックスの上で右クリックしてメニューを開き、「検証」を選ぶ

     

  2. 開発者ツールが開くので、type="checkbox"となっているinput要素がハイライトされた状態にする。

     

     描画領域でも、チェックボックスの部分がハイライトされる。

     

  3. Stylesパネルで、user agent stylesheet以外の部分に、見た目を変更するようなスタイル指定がないかを確認する。

     

     上記のスクリーン・ショットではbox-sizing: border-boxが上書きされているが、元の指定と同じで、見た目を変更する指定でもないので問題はない。

関連FAQ

• テキスト・リンクのクリック可能な領域が小さい

関連ガイドライン項目

• アイコン：十分な大きさのクリック/タッチのターゲット

関連チェック内容

チェックID：0331

ボタンやリンクになっている画像は、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

チェックID：0351

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

関連する参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

テキスト・リンクのクリック可能な領域が小さい

最終更新：2024年3月28日

タグ：ターゲット・サイズ

質問/問題

文中のテキストがリンクになっている箇所について、クリック/タップできる領域のサイズ、特に高さが基準を満たしていないが、修正する必要があるか。

回答/結論

リンク部分のテキストの文字サイズが、リンク部分以外のテキストと同じであれば、問題ない。

解説

当ガイドラインでクリック/タップ可能な領域のサイズ（ターゲット・サイズ）について定めているものは、アイコンとフォーム・コントロールを対象としていて、テキストのリンクは対象としていません。また、WCAG 2.1の達成基準2.5.5 Target Size（ターゲットのサイズ）においても、インラインである場合の例外として、クリック/タップのターゲットが文中、又はテキスト・ブロック内に存在する場合には、サイズの基準の対象外としています。

ターゲット・サイズは大きい方が操作しやすいというのは事実ですから、幅に関してはリンクにするテキストの内容を工夫することでより広くすることはできますし、可能な範囲でそういった工夫をすることは推奨されます。一方高さに関しては、ターゲット・サイズの基準を満たすだけの目的で調整する必要はありません。

関連FAQ

• ラジオボタンやチェックボックスのサイズ

関連チェック内容

チェックID：0331

ボタンやリンクになっている画像は、クリックやタッチに反応する領域が充分に大きく、その領域が設計資料で明示されている。

チェックID：0351

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

関連する参考情報

• クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法

Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

最終更新：2025年3月25日

タグ：キーボード操作

質問/問題

SafariでWebページを表示して、TabキーやShift+Tabキーでフォーカスを移動すると、本来フォーカスされるべきなのにスキップされる要素がある。Google Chromeや他のブラウザーでは適切にフォーカス移動できているが、コンテンツ側で何らかの対応が必要か。

回答/結論

デフォルト設定でSafariを使用している場合の挙動なので対処は不要。option+TabとShift+option+Tabキーを使用すると他のブラウザーと同様の挙動になる。

解説

デフォルト設定でSafariを使用している場合、リンクやボタンなど、本来TabキーやShift+Tabキーでフォーカスを移動できるはずの要素の一部に、フォーカスが移動できません。代わりに、option+TabキーやShift+option+Tabキーを使用すると、他のブラウザーと同様にフォーカスを移動できます。

フォーカス順序のチェックをする場合、通常は他のブラウザーで確認して問題なければ問題はありません。もしSafariでチェックを実施する必要がある場合は、option+TabキーとShift+option+Tabキーを使用して確認します。

なお、macOS上のSafariを使用している場合は、以下のいずれかの設定をすることで、TabキーとShift+Tabキーの挙動が他のブラウザーと同様になります。

• Safariの設定 ‣ 詳細で、「Tabキーを押したときにWebページ上の各項目を強調表示」にチェックを入れる

• macOSの環境設定 ‣ アクセシビリティ ‣ キーボードで「フルキーボードアクセス」を有効にする

関連ガイドライン項目

• 入力ディバイス：キーボード操作を可能にする

• 入力ディバイス：適切なフォーカス順序

• 入力ディバイス：フォーカス箇所の可視化

• リンク：適切なフォーカス順序

• フォーム：キーボード操作を可能にする

• フォーム：適切なフォーカス順序

• フォーム：フォーカス時の挙動

• 動的コンテンツ：OnFocus/OffFocus時の挙動

関連チェック内容

チェックID：0171

キーボードによる操作時、常にフォーカス箇所が視覚的に確認できる

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

関連する参考情報

• Tab / Shift+Tab キーを用いたチェック

スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある

最終更新：2024年11月21日

タグ：スクリーン・リーダー

質問/問題

読み上げられ方のおかしい漢字や英単語があるが、どのように対処するべきか。

例：

• 「寡婦」が「かふ」ではなく「やもめふ」と読み上げられる

• 「配偶者」が「はいぐうしゃ」ではなく「はいたましゃ」と読み上げられる

• 「折り畳む」が「おりたたむ」ではなく「おりりたたみむ」と読み上げられる

• 「作業を行った」が「さぎょうをおこなった」ではなく「さぎょうをいった」と読み上げられる

回答/結論

• 特に対処の必要はない

• ただし、全く逆の意味として捉えられてしまうなど、明らかに誤解を招く可能性が高い場合は対処を検討する

解説

スクリーン・リーダーによる漢字や英単語の読み上げが誤っていることはよくあります。

スクリーン・リーダーには、1文字ずつ読み上げさせたり、「『にっぽん』の『にち』」のように文字の説明と一緒に読む「詳細読み」機能があり、誤った読み上げられ方をした場合も、これらの機能を使って表記を確認することができます。

スクリーン・リーダーが何をどう読み上げるかは、スクリーン・リーダーの種類やバージョン、利用している音声合成エンジンによっても変わってくるので、特定の環境で正しく読むようになっても、他の環境でも正しく読み上げられるとは限りません。読み上げられ方を強制するために、ひらがなで表記すると、本来の漢字表記が失われたり、本来のアクセントとは違うかたちで読み上げられたり、点字表示が適切にできなくなったりして、かえってユーザーが意味を捉えにくくなってしまうおそれがあります。

上記の理由から、スクリーン・リーダーによる漢字の読み間違いについては、放置して問題ありません。無理に対処することで、かえって大きな問題を発生させるリスクがあります。

ただし、読み上げられ方によって、全く別の意味に捉えられてしまうような場合には注意が必要です。カッコ書きで読みを併記したり、表記を見直したりしたほうがいいでしょう。

例：「売」も「買」もどちらも「ばい」と読み上げられるので、「売り」、「買い」と表記した

関連FAQ

• 「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか

• スラッシュ（/）を含む数字はどのように読み上げられるべきか

スクリーン・リーダーによる長いテキストの読み上げが途中で止まる

最終更新：2025年2月14日

タグ：スクリーン・リーダー

質問/問題

NVDAのブラウズ・モードでテキストを読み上げさせたとき、1行のテキストや画像の代替テキストなど、一気に読み上げられることが期待されるものでも、途中で読み上げが止まってしまう場合がある。この挙動は実装によって抑制するべきものか。

回答/結論

NVDAの設定による挙動なので対処は不要。

解説

NVDAのブラウズ・モードでは、下矢印キーや上矢印キーを使って1行ずつ読み上げさせる場合に、一定の文字数を超える長さのテキストを複数行のテキストのように扱って読み上げるようになっています。そのため、1行のテキストや画像の代替テキストなど、一気に読み上げられることが期待されるものでも、この文字数を超える長いものの場合は途中で読み上げが止まり、下矢印キーを押下しないと続きが読み上げられません。これは、極端に長いテキストを一気に読み上げられても理解が難しい場合があるためです。仮に実装によってこの挙動を抑制することができたとしても、この挙動の意図を考えると、そういった対処はすべきではありません。ただし、画像の代替テキストについては、テキストに構造を持たせられないため、長いテキストは理解が難しくなる恐れがありますので、そもそも簡潔なものにすることが望ましいでしょう。

この設定のデフォルト値は100文字で、NVDAの設定画面の「ブラウズモード」の「1行の最大文字数」で変更できます。

なお、長いテキストの分割が発生する場合、分割位置の判定に半角の英数字や空白文字が使われるようで、英単語が含まれる日本語のテキストでは設定の文字数よりもかなり短い長さで分割されることがあります。

関連する参考情報

• NVDAを用いたチェックの実施方法

「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか

最終更新：2024年11月21日

タグ：スクリーン・リーダー

質問/問題

「2024-11-21」と表記されている日付をスクリーン・リーダーに読み上げさせたさい、「2024年11月22日」ではなく、「2024マイナス11マイナス21」と読み上げられが、このような読み上げでは理解が難しいかもしれないので、「2024年11月21日」と表記すべきか。同様に時刻についても、「12:30」のような表記を「12時30分」と読み上げるようにすべきか。

回答/結論

広く一般に用いられている表記であれば、対処は不要

解説

「2024-11-21」や「12:30」のように、広く一般に用いられている日時の表記は、スクリーン・リーダーのユーザーにとってもなじみのあるもので、特に理解が難しいものではありません。ですから、スクリーン・リーダーの読み上げを変更する目的で表記を変更したり、表記とは異なる非表示のテキストを指定したりする必要はありません。

関連FAQ

• スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある

• スラッシュ（/）を含む数字はどのように読み上げられるべきか

スラッシュ（/）を含む数字はどのように読み上げられるべきか

最終更新：2024年5月7日

タグ：スクリーン・リーダー

質問/問題

例えば"11/12"という数字について、11月12日なのか、全12ページ中の11ページ目なのか、12分の11なのかが分かるようにスクリーン・リーダーが読み上げるようにしたい。

回答/結論

• 「11スラッシュ12」と読み上げられれば、対処は不要

• 想定している環境でそれ以外の読み上げられ方をする場合には、何らかの対処を検討する

解説

表示通り、「11スラッシュ12」と読み上げられれば、それがその文脈において何を意味するかはユーザーが判断できるはずですので、特に対処の必要はありません。もし表示通りに読み上げられても判断することが難しい可能性があると感じる場合、それは画面表示を見ているユーザーにとっても判断が難しい可能性がありますから、そもそもそのような表記が妥当なのかを検討する必要があるでしょう。

ただし、スクリーン・リーダーによっては、「11月12日」や「12分の11」などと読み上げるものもあります。主に想定する環境においてこのような読み上げがされる場合、ユーザーが混乱する可能性があるため、何らかの対処を検討することが望ましいでしょう。

以下に対処方法の例をいくつか示します。

• 「11 / 12」のようにスペースを入れることで、「11スラッシュ12」と読み上げられるようにする

• 「11月12日」など、読み上げられるべき形で表記する。この際画面に表示される文字列と読み上げられる文字列はなるべく一致させる。

関連FAQ

• スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある

• 「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか

どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

最終更新：2024年4月12日

タグ：スクリーン・リーダー

質問/問題

スクリーン・リーダーを使用する際、どのような要素が読み上げられるべきか、または読み上げられるべきではないかの判断をどのようにするべきか分からない。

回答/結論

• スクリーン・リーダーで読み上げられるようにするべきか迷う場合は、読み上げられるようにする。

• 装飾的に挿入されている意味を持たない画像や、アイコンなどの画像で直後に全く同じ意味のテキストがある場合、それらは読み上げられないようにする。

• それ以外の要素は、原則として読み上げられるようにする。

解説

情報の取捨選択は、最終的にユーザーに委ねられるべきです。ですから、意味のある情報は原則としてすべて読み上げられるようにするべきです。

ただし、装飾的に挿入されている意味を持たない画像は読み上げられないようにします。

また、アイコンなどの画像で直後に全く同じ意味のテキストがある場合、それらの画像は読み上げられないようにします。こうすることで、情報の重複を避けることができます。

それ以外で読み上げられないようにしても問題がない情報は、そもそも画面上に表示されている必要がない情報の可能性があります。

関連FAQ

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

関連ガイドライン項目

• 画像：装飾目的の画像の無視

関連チェック内容

チェックID：0402

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられないようにする。

チェックID：0413

アイコンがテキストのラベルと併せて表示されている箇所をスクリーン・リーダーで読み上げさせた際、同じ内容が重複して読み上げられない。

チェックID：0451

情報や機能性を一切持たない画像は、スクリーン・リーダーに無視されるようになっている。

チェックID：0461

情報や機能性を一切持たない画像は、スクリーン・リーダーで無視されるようになっている。

チェックID：0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

関連する参考情報

• テキストによる画像の説明

hr要素はスクリーン・リーダーにどのように読み上げられるべきか

最終更新：2024年4月12日

タグ：スクリーン・リーダー、マークアップ

質問/問題

スクリーン・リーダーがhr要素を読み上げるようにするべきか分からない。また、読み上げるようにした場合にその読み上げられ方に違和感がある。

回答/結論

• hr要素は、基本的に情報の区切りを示すために使用されるため、スクリーン・リーダーでも読み上げるようにする。

• hr要素の読み上げられ方はスクリーン・リーダーごとに異なるもので、コンテンツ製作者は制御できない

解説

一般的にhr要素は、情報の区切りを示すために使用されます。無意味に使用されている要素でない以上、当然同じ情報はスクリーン・リーダーのユーザーにも伝わるようにする必要があります。

もし、hr要素の存在をスクリーン・リーダーのユーザーに伝えない方が、情報の理解などの観点でより良いと考えられる場合、そもそも視覚的にhr要素が必要なのかを検討すると良いでしょう。それでもやはりスクリーン・リーダーに読み上げられない方が良いと判断した場合は、role="presentation"を指定するなどの方法で、スクリーン・リーダーが無視するようにすると良いでしょう。

スクリーン・リーダーがhr要素をどのように読み上げるかは、スクリーン・リーダーごとに異なっています。例えばNVDAでは「区切り」と読み上げ、macOS VoiceOverでは「横方向分割バー」と読み上げます。各スクリーン・リーダーのユーザーは、これらの読み上げを聞いてhr要素の存在を判断していますから、コンテンツ製作者が違和感を持ったとしても、これらの読み上げを変更するべきではありませんし、そもそも変更することはできません。

また、スクリーン・リーダーの中には、前後のhr要素にジャンプする機能を提供しているものもあり、このような場合はhr要素の存在が効率的な情報取得につながることもあります。

関連FAQ

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

関連ガイドライン項目

• マークアップと実装：文書構造を適切に示すマークアップ、実装を行う

関連する参考情報

• セマンティクスを適切にマークアップする重要性

axe DevToolsの警告への対処

最終更新：2023年12月19日

タグ：axe DevTools

質問/問題

axe DevToolsで出ている警告の意味や対処方法が分からない。

回答/結論

1. axe DevToolsを用いたチェック実施方法の例で言及されている警告の場合、そのチェック内容と関連するガイドライン項目や参考情報を確認する。

2. axe DevToolsのルールと当ガイドラインの対応で、その警告と関連するガイドライン項目を確認する。

3. 充分な情報が見つけられない場合は、安易に判断せず、専門家に相談する。

解説

axe DevToolsを用いたチェック実施方法の例には、チェック内容のうちaxe DevToolsで実施できるものとその方法がまとめられています。ここに記載されて警告については、そのチェック内容と関連するガイドライン項目や参考情報を確認することで、対処方法のヒントを得られるでしょう。

一方axe DevToolsのルールと当ガイドラインの対応には、axe DevToolsのすべての警告に関する情報をまとめています。axe DevToolsの開発元が提供する情報へのリンクと合わせて、WCAGの達成基準と明確な関連がある警告については、その達成基準と関連するガイドライン項目を示している場合もあります。

これらの情報を確認しても警告の意味や対処方法が分からない場合は、安易に判断せず、専門家に相談することをおすすめします。

関連する参考情報

• axe DevToolsを使用したアクセシビリティー・チェック

グレースケール表示にするブックマークレットで表示が崩れる

最終更新：2023年12月22日

タグ：グレースケール表示

質問/問題

グレースケール表示した際の見え方を確認するためにグレースケール表示への切り替え方で紹介されているブックマークレットを使うと表示が崩れる、関連するチェックの結果はNGとすべきか。

回答/結論

• ブックマークレットが正しく動作しない場合は、OSの表示切り替え機能でグレースケール表示にして確認する。

解説

当該ブックマークレットは、簡易的にチェックを実施するために提供しているものです。簡易的なものですので、ページによっては正しく動作しない場合も考えられ、実際に正しく動作しなかったという報告もいくつかあります。そのような場合には、同じページで紹介しているOSの表示の切り替え機能を活用してください。

グレースケール表示に切り替えて実施するチェックの目的は、あくまでもグレースケール表示にした際にコンテンツが適切に利用できるかどうかを確認することで、ブックマークレットが正しく動作するかどうかを確認することではありません。

関連ガイドライン項目

• テキスト：複数の視覚的要素を用いた表現

• 画像：複数の視覚的要素を用いた表現

• リンク：複数の視覚的要素を用いた表現

• フォーム：複数の視覚的要素を用いた表現

関連チェック内容

チェックID：0031

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

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

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

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

チェックID：0051

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

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

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

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

関連する参考情報

• グレースケール表示への切り替え方

• 色を用いた表現に関する注意点

FAQタグ一覧

よくある質問と回答（FAQ）に付けられているタグの一覧です。タグをクリックすると、そのタグが付けられたFAQ記事の一覧が表示されます。

axe DevTools

axe DevToolsのタグが付けられている記事の一覧です。

• axe DevToolsの警告への対処

キーボード操作

キーボード操作のタグが付けられている記事の一覧です。

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

グレースケール表示

グレースケール表示のタグが付けられている記事の一覧です。

• グレースケール表示にするブックマークレットで表示が崩れる

スクリーン・リーダー

スクリーン・リーダーのタグが付けられている記事の一覧です。

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

• スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある

• スクリーン・リーダーによる長いテキストの読み上げが途中で止まる

• 「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか

• スラッシュ（/）を含む数字はどのように読み上げられるべきか

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

ターゲット・サイズ

ターゲット・サイズのタグが付けられている記事の一覧です。

• ラジオボタンやチェックボックスのサイズ

• テキスト・リンクのクリック可能な領域が小さい

フォーム

フォームのタグが付けられている記事の一覧です。

• ラジオボタンやチェックボックスのサイズ

マークアップ

マークアップのタグが付けられている記事の一覧です。

• 見出しレベルの指定

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

タグ一覧

• axe DevTools

• キーボード操作

• グレースケール表示

• スクリーン・リーダー

• ターゲット・サイズ

• フォーム

• マークアップ

FAQ記事一覧

• Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい（2025年3月25日更新）

• スクリーン・リーダーによる長いテキストの読み上げが途中で止まる（2025年2月14日更新）

• アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか（2024年12月2日更新）

• スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある（2024年11月21日更新）

• 「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか（2024年11月21日更新）

• スラッシュ（/）を含む数字はどのように読み上げられるべきか（2024年5月7日更新）

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか（2024年4月12日更新）

• どのような情報をスクリーン・リーダーで読み上げられないようにするべきか（2024年4月12日更新）

• テキスト・リンクのクリック可能な領域が小さい（2024年3月28日更新）

• グレースケール表示にするブックマークレットで表示が崩れる（2023年12月22日更新）

• axe DevToolsの警告への対処（2023年12月19日更新）

• ラジオボタンやチェックボックスのサイズ（2023年12月14日更新）

• 見出しレベルの指定（2023年12月5日更新）