[重大対応]
・自動再生はさせない
音声を自動再生することや強制的に再生させることは避けましょう。また、自動再生する音声は3秒以内に収めましょう。自動再生が3秒以上続く場合は利用者が止められるようにする必要があります。
音声の流れるページや動画広告などで自動再生する場合は、一時停止またはミュートボタンをつける
・袋小路に陥らせない
キーボード操作だけで利用しているときに、一度フォーカスしたら抜け出せないコンテンツを作らないようにしましょう。たとえばモーダルダイアログのようなフォーカスを制限するコンテンツで起きやすいです。
ダイアログ内にフォーカス可能な閉じるボタンを置くことで、キーボードで閉じられるようにする
・光の点滅は危険
光の点滅を繰り返すと、光感受性発作等を誘発しやすくなります。1秒に3回以上点滅するコンテンツを作ってはいけません。（これは適合レベルAAA達成基準2.3.2の説明ですが、非干渉の達成基準2.3.1は適合判断が難しいため、達成基準2.3.2に適合させることを推奨します）
アニメーションや映像などのコンテンツで、1秒に3回以上点滅させない
・自動でコンテンツを切り変えない
スライドショーや自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能を設置する必要があります。画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者がいるためです。
自動で切り替わるカルーセルだが、一時停止できる
[必須対応]
・ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する
「代替テキスト」とは、写真やイラスト、グラフなど主に画像で提供される情報と「同等の役割を果たすテキスト」のことです。「代替内容」なので、画像の代わりにその文字を置いてみても違和感がない内容であることが望まれます。
alt属性で代替テキストを指定し、図表を文章で説明
・キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする
キーボード操作時に、フォーカスインジケーター（選択中の要素を枠線等で囲んで示すこと）が表示されるようにしましょう
キーボード操作時に、フォーカス・入力がキャンセルされたり、フォーカス・入力した瞬間に何かが勝手に動作することがないようにしましょう
Tabキーでフォーカスを移動できる
・操作に制限時間を設けてはいけない
閲覧や入力の操作に、制限時間を設けてはいけません。設ける必要がある場合は以下のいずれかの回避手段を設けてください。
制限時間があること、またそれを延長・解除できることを利用者に事前通知する
入力フォームのセッション時間を利用者が延長するか無制限にできる
ページ上のスクリプトで制御されている入力フォームの制限時間を利用者が延長できる
自動的に進むコンテンツを利用者が一時停止できる
入力フォームに制限時間がある場合は事前に警告し、簡単に延長できるようにする
・赤字・太字・下線・拡大など単一の表現のみで情報を伝えてはいけない
赤字など、色の違いだけで情報を伝えてはいけません
太字、『右の写真』『丸いボタン』など、位置や形の違いだけで情報を伝えてはいけません
色だけで必須項目を表現しない。「必須」ラベルのように、色以外の手がかりでも必須項目を判別できるようにする
・スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている
目が見えている人はウェブサイトを斜め読みして欲しい情報を見つけることができますが、スクリーンリーダーの場合は、キーボードを使ってページの先頭から1つ1つリンクや文章をたどって内容を聞いていきます。このとき、文章の意味と読み上げ順序が整合していないと内容を正確に理解できなくなってしまいます。スクリーンリーダーは、HTMLのソースに記載されている順、視覚的には左上から右下に向かって読み上げます。この順序を考慮してコンテンツやサービスを設計してくださ
ボタンの前に同意事項が読み上げられないと何に同意するか分からない
・見出し要素だけで、セクションやブロックに含まれる要素を表現する
例えば、見出しが「リスト」だけではなんのリストかわかりません。
大見出し、中見出し、小見出し…となるように見出しレベルを適切に設定してください
NVDA （Windows 用の無料のスクリーンリーダー）でF7キーを押して見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認してください
Chromeの機能拡張のHTML5 Outlinerを使って、HTMLのアウトラインを確認してください
見出し要素を空にしないでください
強調や文字を大きくするために見出し要素を用いないでください
箇条書きの見出しが内容を表したものになっていないと、何が列挙されているかを推測するのが難しい
長い文章の途中に見出しが無いと、必要な部分だけ拾い読みすることが難しくなる。見出しがあると内容の推測をしやすくなり、スクリーンリーダーの見出し一覧機能を使って、読み飛ばすこともできる
・文字と背景の間に十分なコントラスト比を保つ
文字色と背景の間に、4.5:1以上のコントラスト比がある（チェックツールによりある程度確認できる）必要があります。配色を決めるときに合わせて検討しましょう。
4.5:1以上のコントラスト比は、太字でないテキスト22ポイント（29px）未満、太字のテキストは18ポイント（24px）未満の場合の値です
大きいテキストでは3:1以上のコントラスト比である必要があります
背景色 #AAAAAA の上に書かれた白い文字は、コントラスト比が 4.5:1 未満で、最低限のコントラストを満たしていない
・テキストの拡大縮小をしても情報が読み取れる
画面拡大ソフトなどを使わずに、ブラウザの文字拡大機能だけで文字サイズを200%まで変更できるようにしましょう。
文字サイズなどが固定になっていない
コンテンツを200%まで拡大したときに、文字が重なったり見切れないようにしましょう
・文字や文字コード、フォントに関する注意
現在のHTMLでは、文字コードとしてUTF-8を使うべきであるとされています。他の文字コード（Shift_JISなど）は避け、UTF-8を使用してください
Webフォントを使ってアイコンやUIを表現している場合、利用者がフォントの設定を変更していると、異なる文字として表示されます。注意して使いましょう
PDFから文字をコピーすると、見た目がそっくりな別の文字に置き換えられてしまう場合があります。これをそのままウェブページに掲載すると、スクリーンリーダーでは正確に読み上げられないことがあります。公開前に読み上げの確認を行うなど注意しましょう
「*（アスタリスク）」「※（こめじるし）」などの記号はスクリーンリーダーとその設定によっては読み上げられません。確認しながら使いましょう。必須項目の印に記号を使っている場合は「必須」など読み上げられる文字に変更することも検討しましょう
・ページの内容を示すタイトルを適切に表現する
「ページのタイトル|サイト名」とすると判別が容易です
複数のページでページタイトルが重複しないようにしましょう
ページタイトルとそのページの大見出し（H1）が揃っていると、利用者はより安心してページを利用できます
各ページのタイトルが同一だと、サイト内検索などでページタイトルが並んだ際に内容の判別が難しくなる
・リンクを適切に表現する
リンクがどこへのリンクなのか、単体で、または前後の文脈から簡単に理解できるようにしてください
リンク先が、PDFなのか外部ウィンドウを開くのか、事前に理解できるようにしてください
リンクの文言が同一だと、スクリーンリーダーのリンク一覧で判別が難しくなる。リンク先の内容がわかるように表現する
・ナビゲーションに一貫性をもたせる
ナビゲーション要素が、毎回同じ順序、表記で実装されているようにしてください
ページによってグローバルナビゲーションの位置が異なると、ページ切り替えの度にナビゲーションを探さなくてはならない。また、ナビゲーション内の表記がページごとに揺れていると迷わせることになる
・同じ機能には、同じラベルや説明をつける
同じ機能を複数のページで提供する場合は、同じラベル、説明で提供されているようにしてください
ボタン要素などのコンポーネント、アイコン、リンクなどに一貫性を持たせてください
同じ役割のボタンのアイコンとラベルがページによって異なるのは一貫性がない
[状況に応じて確認]
・入力フォームを様々な使い方でも使えるようにする
ラベルとフォームコントロール （テキスト入力ボックス、チェックボックス、ラジオボタンなど）は関連付けてください
入力形式（全角・半角など）、文字数、使用できる文字の制限などでエラーが起きる場合は、利用者が入力する前に説明してください
エラーが起きたときに、エラーが起きた箇所を明示して適切な説明をしてください
入力エラーはスクリーンリーダーで読み上げられるようにしてください
エラーの回避方法は具体的に示してください
必要に応じて、一連のフォームコントロールをグループ化してください
法律に関わる操作や金融取引などに関する入力フォームでは、入力エラーのチェック、入力内容の確認、送信の取り消しをできるように設計してください
・音声・映像コンテンツに代替コンテンツを付与する
前後のテキスト、プレイヤーのラベルなどから、音声、映像コンテンツの存在や種別を認知できるようにしてください
3秒以上のコンテンツでは、自動再生を行わないでください
プレイヤーを用いて、一時停止、停止することができるようにしてください
プレイヤーを操作した後でも他のコンテンツにアクセスできるようにしてください
会話の内容や重要な効果音などが伝わるようなキャプション（字幕）を提供してください
登場人物の動作や表情、場面の移り変わりなど視覚的な情報を音声で伝える「音声解説」を提供してください
・動きや点滅などがあるコンテンツをユーザーが操作できるようにする
アニメーション、スライドショーなどのコンテンツでは、一時停止、停止、非表示にすることができるようにしてください
・コンテンツの変化がスクリーンリーダーにも分かるようにする
検索結果の読み込み、ページネーションなどの画面の一部の変更がスクリーンリーダーで読み上げられるようにしてください
チェックボックス、ラジオボタンのオンオフが読み上げられるようにしてください
タブが操作できる箇所であることがわかって操作できるようにしてください
モーダルウィンドウを開く場合、当該モーダルウィンドウの内容にフォーカスしてください
モーダルウィンドウを閉じて戻るという挙動が、読み上げたときに自然と理解できるようにしてください
モーダルウィンドウを閉じる場合、元のコンテンツの位置にフォーカスが戻してください
トースト、スナックバーなど画面にロックしないポップアップも読み上げを行ってください（「入力内容を送信しました」など）
フォーカスされている場合、ポップアップを自動的に閉じないでください
モーダルウィンドウを開くと、キーボード操作のフォーカスはモーダルウィンドウに移り、モーダルウィンドウを閉じるとフォーカスは元のコンテンツに戻る
[導入に慎重な検討が必要] 非推奨
・アクセシビリティ・オーバーレイなどのプラグインは支援技術の機能と重複させない
アクセシビリティ・オーバーレイは、ウェブサイトやウェブシステムにスクリプトを追加することで、アクセシビリティを向上しようとする仕組みです。JavaScriptで実装されていることがほとんどです。
ただ、これらのプラグインやソフトウェアで実現できると謳われている機能は、OSの支援技術、アプリの支援技術、ブラウザの機能拡張で実現可能な機能が多いため、必要な機能に限定して使いましょう。また、次のような最も重要な課題に対応することができない場合が多いため、機能と用途をよく吟味し、コンテンツ側での対応も併せて行いましょう。
・文字サイズの変更、読み上げプラグインの利用は非推奨
支援技術が必要な利用者は、既にOSの支援技術、アプリの支援技術、ブラウザの機能拡張を使っていることが多いため、サイトで支援技術を提供すると過剰対応になってしまいます。また、利用者がサイトを閲覧するときに、サイトに支援技術の機能を実装してアクセシビリティを高めても、他のサイトでは使えないので効果は極めて限定的です。どのサイトも同様の支援技術を用いて閲覧できることを目指すべきです。
文字サイズ変更、配色変更、読み上げなどの、ウェブページに埋め込むプラグインは非推奨
【チェックツール】
[パソコンで読み上げ確認をしてみる]
実際に読み上げ確認をしましょう。チェックツールで100点でも、モーダルウィンドウの開閉やコンテンツの入替、代替テキストの設定などは手動で確認する必要があります。主なスクリーンリーダーは以下の通りです。Macをお使いの場合はVoiceOverなどを使ってみることもできますが、NVDA等に比べ機能が貧弱です。これらのスクリーンリーダーの中で、多くの利用者に利用されているのはPC-TalkerとNVDAです。
NVDA 日本語版
https://www.nvda.jp/
PC-Talker
https://www.aok-net.com/screenreader/
NetReader Neo（PC-Talker に最適化されたブラウザ）
https://www.aok-net.com/products/netreaderneo.html
[スマートフォンでの読み上げ確認]
基本的にはPCと同じ項目を確認しますが、操作方法が異なります。freee株式会社が公開している、freee アクセシビリティ・ガイドライン
には、操作方法も非常にわかりやすくまとめられています。デジタル庁で想定しているスマートフォン向けのスクリーンリーダー環境は以下の通りです。
VoiceOver（iOS）
https://support.apple.com/ja-jp/guide/iphone/iph3e2e415f/ios
Talkback（Android）
https://support.google.com/accessibility/android/answer/6283677?hl=ja
[チェックツール]
axe-core（axe-coreは、Deque Systemsが開発したアクセシビリティチェックのエンジンです。様々な製品に使われています。）
https://github.com/dequelabs/axe-core
Lighthouse
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
axe-dev
https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
PowerCMS X
https://powercmsx.jp/press_release/release_ver3_08.html
WAVE
https://wave.webaim.org/
WAIV
https://www.ueyesdesign.co.jp/waiv/
miChecker
https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html
・ブラウザの機能拡張
HTML5Outliner
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja
Alt & Meta viewer
https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja
HeadingsMap
https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ja
・コントラストチェッカー
Contrast（Mac）
https://apps.apple.com/jp/app/contrast-color-accessibility/id1254981365?mt=12
Colour Contrast Analyser（Windows/Mac）
https://www.tpgi.com/color-contrast-checker/
・色覚シミュレーション
Sim Daltonism（Mac）
https://apps.apple.com/jp/app/sim-daltonism/id693112260?mt=12