スクリーンリーダー環境で正しく機能するエラーメッセージの実装パターンを解説。JAWS・NVDA・VoiceOverで検証したaria-liveとaria-invalidの活用法。
シェアックリップ
シェアされたアックリップです。
そのほかの #スクリーンリーダー ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
スクリーンリーダーがHTMLを読み上げるまでのプロセスとAccessibility API Mappingについて、実技を交えて学ぶウェブ開発者向けのウェビナー。
アクセサリー販売サイトのレイアウト変更を通じた、音声読み上げ対応とリーダー機能への適合事例。色別カテゴリー追加によるUX向上と、iPad・iPhone での検証プロセスを記載する。
視覚障害のある点訳者が、点字データをカナ変換してスクリーンリーダーで音声読み上げするウェブツールを開発。点訳と音声読み上げの相互利用を実現した取り組みを紹介する。
Apple で 20 年間 Mac 開発に携わったエンジニアが 2015 年に完全に失明。VoiceOver 学習をビデオゲームのように攻略した経験、Apple 内のアクセシビリティの位置づけ、エンジニアへのバグ報告の重要性について語る。
スクリーンリーダーユーザーや検索エンジン、低速接続ユーザーのための代替テキスト（alt属性）の書き方。何を含めるべきか、何を避けるべきかを具体例で示している。
そのほかの #JAWS ピックアップ
WebAIM によるスクリーンリーダー利用者調査（第11回）の結果分析。JAWS と NVDA の利用傾向の変化、地域による差、ブラウザ利用状況、AI 利用、スキップリンク利用率の報告。
20年のJAWS利用経験から、開発者が見落とすアクセシビリティ問題を指摘。ボタン・フィールド無名化、CAPTCHA、再設計による喪失など、実際のバリアと修正方法を解説。
自動チェックよりもスクリーンリーダーテストが実際の使用可能性を確保する。視覚障害・ロービジョンのある人がアクセスするためのPDFのタグ付けと、NVDAやJAWSでのテスト方法を動画で解説。
スクリーンリーダーテストの7つの実践スキル解説。BrowseモードvsFocusMode、ページ構造、コンポーネント状態、フォーストラッキング、動的更新、不具合報告、ユーザージャーニーテスト。
AI 業界の警告・懸念の真意に関する議論と分析。また iOS 27 ベータの Siri AI の初期体験、Windows/Mac 環境でのスクリーンリーダー（JAWS/NVDA）の操作性比較。
視覚障害がある経営者やエンジニアが直面するアクセシビリティ課題と、AIを活用した解決策を議論。遠隔アクセス・PDF修復・製品設計における視覚障害者の人的資本と、雇用・起業の機会を中心に扱う。
そのほかの #NVDA ピックアップ
WebAIM によるスクリーンリーダー利用者調査（第11回）の結果分析。JAWS と NVDA の利用傾向の変化、地域による差、ブラウザ利用状況、AI 利用、スキップリンク利用率の報告。
NVDAアドオン『Free Audio』を使い、視覚障害のある人がラジオリスナー・録音・リマインダー・オーディオブックを利用する方法を実演。
視覚障害のあるテック愛好家Steven ScottとShaun Preeceが、NVDAスクリーンリーダー、iOS Siri AI、Android Geminiなどについて率直に評価し、リスナーのメールに応答する。
自動チェックよりもスクリーンリーダーテストが実際の使用可能性を確保する。視覚障害・ロービジョンのある人がアクセスするためのPDFのタグ付けと、NVDAやJAWSでのテスト方法を動画で解説。
スクリーンリーダーテストの7つの実践スキル解説。BrowseモードvsFocusMode、ページ構造、コンポーネント状態、フォーストラッキング、動的更新、不具合報告、ユーザージャーニーテスト。
PDFアクセシビリティチェッカー（PAC、veraPDF、Acrobat）の検出精度を測定する手法。スクリーンリーダーNVDAとの実際の相互作用も検証した研究。
そのほかの #VoiceOver ピックアップ
VoiceOverを使用したeSIM移行手続きの操作ガイド動画。新端末へのeSIM再発行、EIDコピー、アクティベーションまでの手順を、スクリーンリーダー利用者向けに解説する。
アクセサリー販売サイトのレイアウト変更を通じた、音声読み上げ対応とリーダー機能への適合事例。色別カテゴリー追加によるUX向上と、iPad・iPhone での検証プロセスを記載する。
Apple で 20 年間 Mac 開発に携わったエンジニアが 2015 年に完全に失明。VoiceOver 学習をビデオゲームのように攻略した経験、Apple 内のアクセシビリティの位置づけ、エンジニアへのバグ報告の重要性について語る。
VoiceOverを使う視覚障害のある人向けに、iPhone用のアイガイドフィルムについて紹介および使い方を解説する動画。
生成AI（Claude）が撮影画像やPDFの内容を読み取り・解析する機能を活用し、視覚障害のある人の日常的な困りごと（テキスト認識・情報抽出・細部確認）を解決する方法をデモンストレーション。VoiceOver（iOSスクリーンリーダー）の初級ガイド。
iPhone用の視覚支援ツール「アイガイドフィルム」の紹介動画。
そのほかの #WAI-ARIA ピックアップ
AI チャット UI で token stream を実装する際、各チャンク到着時に assertive live region を更新するとスクリーンリーダーが頻繁に割り込み、ユーザーの操作フォーカスが混乱される問題を、デバッグ手法とともに解説。
Five tour notes that are always in the DOM, and a tour that will not start until you scroll to it
記事 海外
Webアプリケーションのツールチップツアーのアクセシブルな実装。DOMに常に存在させることでスクロール時の位置ずれを回避し、スクリーンリーダー対応する手法を解説。
Interop 2027でのアクセシビリティ関連の機能優先順位付け。focusgroup属性、ariaNotify() APIなどの提案機能を紹介。
ブレッドクラムコンポーネントの実装例を紹介。型定義で最後の項目の href を省き、HTML では aria-current="page" と aria-hidden を使い分け、JSON-LD では position を 1 から始めてリンクのない項目の item を省く設計。
React で一時メール確認フローを実装する際、ステートマシンで状態を明示的に管理し、aria-live で状態変化を通知。ポーリング時に cancelled フラグで不要なレンダリングを避け、アクセシビリティと性能の両立を実現する。
メール検証フォームの実装で、状態管理で各段階を明確にし、aria-invalid で無効状態を示し、CSS で空間を予約することで、フォーカス移動とレイアウトシフトを避け、アクセシビリティと UX の両立を実現する。