本文へ移動
easeweb
ご相談

その実装が、実際に使われているスクリーンリーダーで動くか

WCAGのいうアクセシビリティ サポーテッドの意味と、試すべきスクリーンリーダーとブラウザーの組み合わせ、コードの誤りとブラウザーや支援技術の未対応の見分け方

要点:HTML、ARIA、スクリプトのある使い方がアクセシビリティ サポーテッドといえるのは、利用者の支援技術で、コンテンツの言語のまま動くことが確かめられていて、利用者が手に入れられるブラウザーで使える場合です。何種類のスクリーンリーダーで動けばよいかを、WCAGは定めていません。求めているのは、サポーテッドな使い方だけに依存すること、そしてサポーテッドでない方法で提供する情報や機能を、サポーテッドな方法でも利用できるようにすることです。

01

使う場面

ある文書エディターは、入力するそばから自動で保存します。接続が切れると、画面上部のお知らせ欄に「接続が切れました。これからの変更は保存されません。」と表示されます。この欄は role="alert" の要素で、ページを開いたときから空のまま置かれています。テスト担当者がNVDAとFirefoxで段落を読んでいる間に接続を切ると、何も読まれません。NVDAとChromeで同じことをすると、段落を読み終えてから警告が読まれます。

開発者は、コードが悪いのか、スクリーンリーダーが悪いのか、それでもWCAG 2.2のレベルAAに適合しているといえるのかを知りたがっています。答えは、WCAGのいうアクセシビリティ サポーテッドの意味で決まります。

02

アクセシビリティ サポーテッドとは

適合要件4(WCAG 2.2の5.2.4)は2文です。WAICの日本語訳では「達成基準を満たすために、技術のアクセシビリティ サポーテッドな使用方法だけに依存している。アクセシビリティ サポーテッドではない方法で提供されている情報又は機能は、アクセシビリティ サポーテッドな方法でも利用可能である」です。

用語集によれば、ある技術の使い方がアクセシビリティ サポーテッドといえるのは、次の両方を満たす場合です。

  1. 利用者の支援技術でサポートされていること。その使い方が「そのコンテンツの自然言語における利用者の支援技術との相互運用性について検証されている」ことを指します。
  2. 利用者が入手できる、アクセシビリティ サポーテッドなブラウザーがあること。次の4つのいずれかに当てはまる必要があります。
    • 広く普及した、それ自体アクセシビリティ サポーテッドなブラウザーが標準でサポートしている(HTMLやCSSなど)。
    • 広く普及した、アクセシビリティ サポーテッドなプラグインでサポートされている。
    • 社内ネットワークのような閉じた環境で使われ、その組織のブラウザーがアクセシビリティ サポーテッドである。
    • 障害のある人にとって、費用が障害のない人を上回らず、同じくらい簡単に探して入手できる。

依存している技術とは、それが無効になっている、またはサポートされていないと、コンテンツが適合しなくなる技術のことです(用語集では「その技術が無効になっている、又はサポートされていない場合、コンテンツが適合しないこと」)。そのため、問うべきは「ARIAはサポートされているか」ではなく、この使い方がサポートされているかです。読んでいる最中に書き込まれる role="alert"、span に付けた aria-label、Tabキーで入るスクロール領域、という単位で考えます。用語集の注記も、HTMLを含むほとんどの技術に、サポートが欠けている機能や使い方が少なくとも一つはあるとしています。

WCAGが決めていないことが2つあります。用語集の注記は、どの支援技術がどれだけサポートしていればよいかを、作業部会とW3Cは「定めない」としています。Understanding文書はその理由として、サポートの状況は環境や言語によって異なること、新しい技術を過去の支援技術がすべてサポートすることはありえないこと、支援技術一つでのサポートでは「通常は十分ではない」ことを挙げています。判断は、組織や調達、コミュニティの要件を決める立場の人に委ねられています。

03

どのスクリーンリーダーとブラウザーで試すか

組み合わせは、実際に使われているものから選びます。日本向けのページについて、EaseWebは次の4つで試しています。国立国会図書館の2015年の調査でよく使われていたスクリーンリーダーから選び、ブラウザーはEaseWebが決めたものです。

  • NVDAとChrome
  • JAWSとChrome
  • iPhoneのVoiceOver(Safari)
  • AndroidのTalkBack(Chrome)

この調査でよく使われていたPC-Talkerは、Windows用の日本語スクリーンリーダーです。無料版がないため、EaseWebは試していません。試していない組み合わせは、そのことも記録に書いておきます。日本で使われるNVDAは、NVDA日本語チームが配布するNVDA日本語版です。初期設定では、Insertキーに加えて無変換キーもNVDA制御キーになります。

英語圏の数字はWebAIMの調査#11(2026年7月から8月、有効回答1,780件)にあります。パソコンでのスクリーンリーダーとブラウザーの組み合わせは次のとおりで、英語のページについてEaseWebは4%を超えるものをすべて試しています。

スクリーンリーダーとブラウザー 回答者の割合
JAWSとChrome 31.2%
NVDAとChrome 17.3%
JAWSとEdge 17.0%
NVDAとFirefox 9.1%
NVDAとEdge 5.4%
JAWSとFirefox 5.0%
VoiceOverとSafari 4.3%

WebAIMは、標本を管理しておらず、スクリーンリーダー利用者全体を代表しない可能性があるとしています。地域による差も大きく、アジアの回答者が主に使うスクリーンリーダーはNVDAが77.4%、JAWSが17%でした。英語圏の数字を、そのまま日本の利用者に当てはめないでください。組み合わせごとの記録は、ARIAのスクリーンリーダー対応状況にあります。

テストの方法によって、選ぶ組み合わせは異なります。英国政府のService Manualは、JAWS、NVDA、iOSのVoiceOver、TalkBackに加えて、画面拡大ソフトとDragonでのテストを求めています。スコットランド政府のService Manualは、職員のパソコンに入っているナレーターでページを確かめる方法を説明しており、ナレーターと一緒に使うブラウザーとしてEdgeを推奨しています。EaseWebはナレーターで試しておらず、その結果はありません。

もう一つ、定義にある「コンテンツの自然言語における」という条件があります。日本語のページは、日本語の音声で確かめます。

パソコンとスマートフォン

WebAIMの調査では、回答者の多くがスマートフォンやタブレットでもスクリーンリーダーを使っています。

WebAIMの調査#11 回答者の割合
モバイル端末でスクリーンリーダーを使う 91.8%
モバイルでVoiceOverをよく使う 72.2%
モバイルでTalkBackをよく使う 29.5%
パソコンで使うことが多い 42.6%
モバイルとパソコンを同じくらい使う 49.0%
モバイルで使うことが多い 8.3%

スマートフォンは、小さなパソコンではありません。AppleのガイドはVoiceOverがオンのとき、標準のタッチスクリーンジェスチャの効果が変わると説明しています。タップで項目を選んで読み上げ、ダブルタップで実行し、3本指のスワイプでスクロールします。GoogleのTalkBackのガイドも、スクロールは1本指ではなく2本指で行うとしています。どちらも、1本指で画面をなぞると、ページを動かす代わりに指の下にあるものを読み上げます。そのためタッチ操作は2回試します。スクリーンリーダーをオフにして、1本指での操作、ページ独自のジェスチャー、タップする対象の大きさを確かめ、オンにして、すべての操作に届くかを確かめます。ジェスチャーでしか操作できない場合に起きる問題は、ボタンで代われないピンチ・ドラッグ・傾きのジェスチャーで扱っています。

道具ごとにどうページを使うかは、支援技術を使って、人はどうウェブを使うかにあります。

04

進め方

スクリーンリーダーが思ったとおりに読まないときは、何かを変える前に、どこに原因があるかを確かめます。

  1. 仕様と照らし合わせる。 HTMLやARIAを、仕様が認める使い方で使っているかを確かめます。ロールのない span への aria-label はARIAが禁止しているため、読み上げるスクリーンリーダーがあっても、コードの誤りです。メッセージごと作られるライブリージョンは、ブラウザーから見て変化が起きないため、属性があってもコードの誤りです。
  2. 最小の例にする。 要素だけをページから取り出し、ほかに何もない状態で試します。最小の例で動いてページで動かないなら、原因はスクリプト、タイミング、非表示の親要素など、ページの側にあります。
  3. 組み合わせを比べる。 同じ例を、一覧のすべての組み合わせで、初期設定のまま、同じ方法(下矢印キー、連続読み上げ、Tabキー)でたどって試します。そのうえで、聞こえた内容を仕様が認める範囲と比べます。ARIAは読み上げの優先度を「強い提案」とし、ブラウザーや支援技術、利用者が上書きしてよいとしています。段落を読み終えるまで待つスクリーンリーダーは、仕様に反していません。
  4. コードの誤りか未対応かを見分ける。 コードの誤りは、コードで直します。未対応は、コードが仕様どおりなのに、ある組み合わせがそれを伝えない状態です。開発元の不具合報告を探し(NVDAならNV AccessのGitHub、SafariならWebKitのBugzilla)、なければ最小の例を添えて報告します。
  5. 対応を決めて記録する。 未対応をどう扱うかは、適合要件4の2文目で決まります。サポーテッドでない使い方で伝えている内容は、サポーテッドな方法でも届かなければなりません。別の実装を使うか、サポーテッドなものを足すか、回避策を加えるかを決め、組み合わせ、バージョン、日付、不具合報告へのリンクを記録します。

4つのガイドで、違いを確かめられます。

聞こえたこと 誤りか未対応か ガイド
span の aria-label の評価が、あるスクリーンリーダーでは読まれ、別のものでは読まれない 誤り:ロールのない要素に名前を付けることをARIAが禁止している 読み上げられないことが多い、divやspanのaria-label
「下書きを保存しました」のトーストが表示されても読まれない 誤り:ライブリージョンがメッセージと一緒に作られている 画面に出ても読み上げられないステータスメッセージ
role="alert" の定型の通知が、VoiceOverの読み上げを途中で遮る 誤り:アラートは重要で急を要する情報のためのもの 定型の通知でもVoiceOverの読み上げを遮るアラート
ChromeとFirefoxではTabキーでスクロールする規約の枠に入れるが、Safariでは入れない 未対応:Safariが枠をTabの移動先にしないため、ページ側で加える キーボードでスクロールできないスクロール領域

05

回避策、ポリフィル、スクリプトなしのページ

回避策を入れてよいのは、次のすべてに「はい」と答えられるときです。

  • 仕様に沿っている。あるスクリーンリーダーのために仕様を破る回避策(ARIAが禁止する場所への aria-label など)は、未対応をほかの組み合わせに移すだけです。
  • 未対応のある組み合わせだけでなく、一覧のすべての組み合わせで試してある。
  • 後で外せる。何を回避しているのかを不具合報告とあわせて記録しておけば、未対応が解消したかを後から確かめられます。
  • 余分なコードを足す価値があるほど、その未対応が多くの人に関わる。上の利用状況の表は出発点で、サイト自身の利用者とは異なることがあります。

スクロール領域への tabindex="0" は、4つとも満たします。普通のHTMLで、すでに枠で止まるブラウザーでは何も変わらず、Safariが変わった後も残しておけます。

ポリフィルは読み込んだページのすべてで動くコードなので、アクセシビリティに加えてセキュリティの問題も持ち込みます。Sansecは2024年6月25日、cdn.polyfill.io のドメインが同年2月にプロジェクトのGitHubアカウントとともに買い取られ、それを読み込むすべてのサイトを通じて、モバイルの訪問者にマルウェアを送り込んでいたと報告しました。Sansecの数えでは、このドメインを埋め込んでいたサイトは10万を超えます。ポリフィルの作者自身は、最近のブラウザーにはもう必要ないとして、使わないよう勧めていました。それでもポリフィルが必要なときは、バージョンを固定して自分のサイトから配信します。機能をスクリプトでまねているため、スクリーンリーダーに何が伝わるかも同じ組み合わせで試し、対象のブラウザーがその機能を備えたら外します。

プログレッシブエンハンスメントは、スクリプトが届かない場合に備える作り方です。英国政府のService Manualは、JavaScriptが読み込まれない、動かない理由として、ネットワークの一時的なエラー、広告ブロッカー、コンテンツ配信ネットワークの停止、DNSの失敗、ブラウザーの更新で入った不具合、通信を遮断したり書き換えたりするファイアウォールやウイルス対策ソフトを挙げています。WebAIMの調査では99.7%の回答でJavaScriptが有効だったので、スクリーンリーダー利用者がスクリプトを切っているという話ではありません。誰にとってもスクリプトは失敗しうる、という話です。この作り方では、内容、リンク、フォームを、サーバーが応答するHTMLのまま保ちます。適合の考え方も簡単になります。ページを強化するだけのスクリプトには依存していないので、WCAGの5.2.5が求めるのは、そのスクリプトが有効でも、無効でも、サポートされていなくても、ページが適合要件を満たし続けることと、すべてのコンテンツに適用される1.4.2、2.1.2、2.2.2、2.3.1を満たすことです。

06

結果は古くなる

スクリーンリーダーもブラウザーも、リリースのたびに変わります。この記事の日付の時点で、NV Accessのユーザーガイドは NVDA 2026.3 のもの、NVDA日本語版の最新は 2026.3jp です。結果からいえるのは、その時点のリリースで何が聞こえたかだけです。結果ごとに、次を記録します。

  • 何を試したか:ページやコンポーネントと、そのビルド
  • 組み合わせ:OS、ブラウザー、スクリーンリーダーのバージョン(日本語版なら「jp」の付いた版まで)
  • 設定と、それが初期設定かどうか
  • どうたどったか:下矢印キー、連続読み上げ、Tabキー、スワイプ
  • 何が聞こえたか:判定ではなく、聞こえた言葉
  • 日付

WCAGの用語集の注記は、複数のバージョンがあるウェブコンテンツ技術を挙げるときは、サポートされているバージョンを明記するのがよいとしています。5.3.2も、適合表明に試験で使った支援技術を含むユーザーエージェントの一覧を載せるよう勧めています。EaseWebの記録は結果ごとに年月を持ち、12か月以上たった結果を再テストの時期として表示します。

07

実例

チームは、使う場面のエディターの警告を進め方どおりに確かめます。

  1. 仕様と照らし合わせる。 お知らせ欄はページを開いたときから空のまま置かれ、スクリプトが文字を書き込んでいます。「接続が切れました」は重要で急を要する情報で、ARIAが role="alert" の用途とするものです。コードの誤りではありません。
  2. 最小の例にする。 同じ role="alert" だけを置いた例が、EaseWebのARIAのテストページにあります。
  3. 組み合わせを比べる。 EaseWebが2026年10月に初期設定で試した role="alert" の記録です。
組み合わせ 下矢印キーで読み進める 連続読み上げ
JAWSとChrome 読んでいるまとまりが終わってから読む 読まれない
NVDAとChrome 段落を読み終えてから読む 段落を読み終えてから読む
NVDAとEdge 段落を読み終えてから読む 段落を読み終えてから読む
NVDAとFirefox 読まれない 読まれない
JAWSとEdge このテストでは、毎回Edgeが固まった このテストでは、毎回Edgeが固まった

一覧のほかの組み合わせには、まだ結果がありません。

  1. コードの誤りか未対応かを見分ける。 段落の終わりまで待つのは、ARIAが認める範囲です。NVDAとFirefox、そしてJAWSとChromeの連続読み上げで「読まれない」のは未対応です。コードは仕様どおりで、これらの組み合わせが変化を伝えていません。
  2. 対応を決めて記録する。 チームは role="alert" を残します。仕様どおりで、ほかの組み合わせでは読まれるためです。ただ、試した方法のうち2つで警告が読まれないので、サポーテッドな方法でも届ける必要があります。そこで警告を数秒で消すのをやめ、接続が戻るまで、ページの先頭にあるお知らせ欄にふつうのテキストとして残します。スクリーンリーダーが何も言わなかった人も、読めば見つけられます。未対応、組み合わせ、バージョン、日付を記録し、次のリリースの前に不具合報告を確かめます。

結果として、警告はページ上のふつうのテキストとして利用でき、読み上げる組み合わせでは role="alert" がそれを知らせます。これはチームの判断で、テストの結果ではありません。契約上それで足りるかを決めるのは、続く節のとおり発注者です。

08

よくある間違い

  • 一つのスクリーンリーダーで試して、サポートされていると判断する。 読み上げられないことが多い、divやspanのaria-labelの開発者は、あるスクリーンリーダーでラベルが読まれたので公開しましたが、ほかのものでは読まれません。一覧のすべての組み合わせで試します。
  • コードの誤りを、スクリーンリーダーの不具合と考える。 自分で aria-live を持つトーストが多くのスクリーンリーダーで読まれないのは、コードのせいです。画面に出ても読み上げられないステータスメッセージのように、先に仕様を確かめます。
  • 「確実に読まれる」ロールに頼る。 どれかの組み合わせで読ませるために通知をすべてアラートにすると、別の組み合わせで読み上げを遮ります。直し方は定型の通知でもVoiceOverの読み上げを遮るアラートにあります。
  • ブラウザーが変わるのを待つ。 未対応でも、今そのブラウザーを使っている人にとっては使えないページです。キーボードでスクロールできないスクロール領域は、ページの側で直します。
  • ほかの組織のドメインからポリフィルを読み込む。 ドメインを持つ人が、自分のページで動くコードを決めることになります。上のとおり、自分のサイトから配信します。
  • バージョンや日付のない結果。 昨年のリリースでの結果は、今年のリリースについて確かなことを何もいえません。上のとおり記録し、ARIAのスクリーンリーダー対応状況のように一か所にまとめます。

09

規格の定め

  • WCAG 2.2の5.2.4(要件):達成基準を満たすために依存するのは、アクセシビリティ サポーテッドな使い方だけで、サポーテッドでない方法で提供する情報や機能は、サポーテッドな方法でも利用できる。
  • WCAG 2.2の用語集「アクセシビリティ サポーテッド」(要件):上の2つの条件と4つの方法。どれだけのサポートが必要かを定めないという部分を含め、注記は参考情報です。5.1は、注記が要件を作らないとしています。
  • WCAG 2.2の5.2.5(要件):サポーテッドでない使い方の技術が、ページの残りの部分へのアクセスを妨げない。依存していない技術が有効でも、無効でも、サポートされていなくても、ページは適合要件を満たし続ける。
  • WCAG 2.2の5.3.2(助言):適合表明に、試験に使った支援技術を含むユーザーエージェントの一覧を載せることを勧めています。
  • Understanding Conformance(助言):どの支援技術をいくつ、という判断は、それぞれの状況に近い立場の人に委ねています。
  • EN 301 549 V3.2.1の9.6(この規格が適用される場合の要件):ウェブページは、WCAG 2.1の5つの適合要件をレベルAAで満たす。適合要件4もその一つで、C.9.6の試験は、各要件を満たすかを点検(inspection)で確かめます。この記事が引用しているのはV3.2.1(2021-03)です。ETSIは2026年9月にV4.1.1を発行しました。その9.6はWCAG 2.2の同じ5つの適合要件を求め、C.9.6で点検により確かめます。どの版によるかは、法令や契約が引用している版で確かめてください。
  • Section 508のE205.4(米国連邦政府機関の要件):電子コンテンツは、WCAG 2.0のレベルAとAAの達成基準と適合要件に適合する。
  • JIS X 8341-3:2016:規格本文はWCAG 2.0(ISO/IEC 40500:2012)と一致しているため、同じ定義が当てはまります。WAICの「試験実施ガイドライン」は、ブラウザーや支援技術などの試験環境を決め、ウェブアクセシビリティ方針があればそこに書かれた環境を使うこと、そしてアクセシビリティ サポーテッド情報を参照して、その環境で使えない達成方法を実装チェックリストから除外することを示しています。

10

制限

WCAGが定めていないため、この記事も、スクリーンリーダーがいくつあれば十分かは答えません。どの組み合わせを数に入れるかは発注者、方針、契約が決め、法律がそれをどう読むかは弁護士が答えます。EaseWebの結果は、一人のテスト担当者が初期設定で、表示した月のリリースについて記録したものです。Understanding文書のいう公開された一覧ではなく、ナレーターとPC-Talkerは含みません。ほかの適合要件はページがWCAGに適合するための条件に、テストの結果そのものはARIAのスクリーンリーダー対応状況にあります。

11

用語

アクセシビリティ サポーテッド
利用者の支援技術で、コンテンツの言語のまま動くことが確かめられていて、利用者が手に入れられるブラウザーで使える、ウェブ技術の使い方。
依存している技術
その技術が無効になっている、またはサポートされていないと、コンテンツが適合しなくなる技術。
未対応
コードは仕様どおりなのに、ブラウザーや支援技術が仕様の求めるとおりに伝えないこと。
ポリフィル
ブラウザーにない機能を、JavaScriptでまねて補うスクリプト。
プログレッシブエンハンスメント
まずHTMLだけで動くページを作り、その上にCSSとスクリプトを重ねる作り方。

12

出典とガイド

関連するガイド

この記事は実務の進め方を、再現した例で説明するものです。法的な助言ではなく、特定の顧客についての指摘でもありません。