A11y demos

スクリーンリーダー体験ラボ Screen-Reader Hands-On Lab

VoiceOver（iOS / macOS）、TalkBack（Android）、NVDA（Windows）を使って、 実際の画面を耳で操作する体験ができる8つのシナリオです。 各シナリオで「悪い実装」と「良い実装」を聴き比べることで、 セマンティクスがUXにどう影響するかを体感できます。

Eight hands-on scenarios for VoiceOver (iOS/macOS), TalkBack (Android), and NVDA (Windows). Each scenario contrasts a broken implementation with a fixed one so you can hear the difference markup makes. Inspired by Freee's Screen-Reader Workshop (Tech Day 2025).

はじめに Getting started

  1. お使いのデバイスのスクリーンリーダーをオンにします。 iOS VoiceOver ／ macOS VoiceOver ／ TalkBack ／ NVDA
  2. 下のシナリオ一覧から好きなものを選びます。
  3. 「やってみよう」エリアを実機で操作し、想定読み上げと聴き比べます。
  4. 「悪い例」では何が起きるか／「良い例」で何が改善されたかを確認します。

8つのシナリオ Eight scenarios

  1. 01. 見出しジャンプで「商品」へ移動 — Heading jump
  2. 02. 商品を購入する（ボタン） — Buy a product
  3. 03. フォームを入力する — Fill out a form
  4. 04. モーダルダイアログを開く — Open a modal
  5. 05. タブ（カンバン）を切り替える — Tab list
  6. 06. トーストでライブリージョン — Live region
  7. 07. テーブルの列をソートする — Sortable table
  8. 08. スキップリンクの確認 — Skip link

ワークショップで使う Run as a workshop

社内ワークショップで実施する場合は INSTRUCTIONS.md をご覧ください。