HTML Academy · レッスン

スクリーンリーダーでのテスト

Q: 「スクリーンリーダーでのテスト」で何を学びますか？

VoiceOverとNVDAでARIAの実装を検証します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

VoiceOverとNVDAでARIAの実装を検証します

「スクリーンリーダーでのテスト」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

スクリーンリーダーでテストする理由

自動化ツールで検出できるアクセシビリティの問題は30〜40%にすぎません。実際にスクリーンリーダーでテストすると、自動チェックでは見落とされる問題が明らかになります：

わかりにくい読み上げ順序
役に立たないARIAの読み上げ
フォーカス管理の不足
わかりにくいインタラクティブパターン

MacのVoiceOver

VoiceOverはmacOSに組み込まれているため、インストールは必要ありません：

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

iOSのVoiceOver

iPhone/iPadのVoiceOverを使用して、モバイルのスクリーンリーダー体験をテストします：

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

WindowsのNVDA

NVDAはWindows向けの無料のオープンソーススクリーンリーダーです：

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

スクリーンリーダーテストのチェックリスト

スクリーンリーダーで確認する項目：

読み込み時にページタイトルが読み上げられる
見出しによって論理的なナビゲーション構造が作られている
すべての画像に意味のある、または空のaltテキストがある
すべてのフォームフィールドにラベルがある
ボタンとリンクに説明的な名前がある
モーダルのフォーカストラップが正しく機能する
動的なコンテンツの更新が読み上げられる

よくあるスクリーンリーダーのバグ

自動テストでは見落とされる問題：

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

キーボード優先のテスト

スクリーンリーダーを使用する前に、まずキーボードだけでテストします：

マウスまたはトラックパッドを取り外します
Tabだけを使ってページ全体を移動します
すべてのインタラクティブ要素に到達できることを確認します
すべての操作をキーボードで実行できることを確認します

自動アクセシビリティテストツール

手動テストを自動化ツールで補完します：

axe DevTools — Chrome拡張機能。最も精度の高い自動チェックツール
WAVE — wavebooth.com。ページ上に視覚的なオーバーレイを表示
Lighthouse — Chrome DevTools。パフォーマンスとアクセシビリティを監査
pa11y — CLIツール。CI/CDパイプラインに適しています

ARIAパターンリファレンス

W3CのARIA Authoring Practices Guide（APG）には、実装例が掲載されています：

アコーディオン、アラート、アラートダイアログ
パンくずリスト、ボタン、カルーセル
チェックボックス、コンボボックス、ダイアログ
ディスクロージャー、フィード、グリッド
リストボックス、メニュー、メニューバー
タブ、ツールチップ、ツリービュー

URL：w3.org/WAI/ARIA/apg/

継続的なアクセシビリティ統合

アクセシビリティテストをワークフローに組み込みます：

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

テストのまとめ

アクセシビリティテストの完全な戦略：

設計 — 色のコントラストとタッチターゲットのサイズを確認します
開発 — キーボードテストとaxeによる自動スキャンを実施します
レビュー — スクリーンリーダー（VoiceOverとNVDA）でテストします
CI/CD — 自動パイプラインでpa11yまたはaxeを実行します
本番 — Lighthouseと手動の抜き取りチェックを実施します

確認問題

アクセシビリティの問題のうち、自動化ツールが確実に検出できるのは何パーセントですか？

まとめ：スクリーンリーダーのテスト

テストの要点：

VoiceOver（Mac/iOS）とNVDA（Windows）は無料で、不可欠なツールです
まずキーボードだけでテストし、その後スクリーンリーダーを追加します
自動化ツール：axe、WAVE、Lighthouse、pa11y
自動テストで検出できる問題は約30〜40%にすぎません
正しいARIA実装にはAPGのパターンを参照します

よくある質問

「スクリーンリーダーでのテスト」レッスンは無料ですか？

はい。「スクリーンリーダーでのテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「スクリーンリーダーでのテスト」で何を学びますか？

VoiceOverとNVDAでARIAの実装を検証しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「スクリーンリーダーでのテスト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

トグルのaria-expandedとaria-controls
aria-selectedとタブパターン
ライブリージョン aria-live aria-atomic aria-relevant
スクリーンリーダーでのテスト

← HTML Academyに戻る