WAI-ARIAのロールをJavaScriptで動的に変えても、スクリーンリーダーが更新を読み上げないことがある理由を解説する。アクセシビリティツリーの更新が非同期に行われる仕組みを説明し、ライブリージョンやフォーカス移動による対策を示す。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
読み込み中の表示でレイアウトを動かさず、次に何をすべきか、失敗したときにどうするかを伝える方法を React で示す記事。aria-busy や role の使い分けも解説する。
英語のサービス nakodo.app の公開76ページのHTMLを grep で集計し、見出し・スキップリンク・ナビゲーションの名前付けなどのアクセシビリティの実態を数で示した記事である。
🔗 ARIA live timing
記事 海外
キーボードで並べ替えボタンを押すとフォーカスが消える不具合を、disabled から aria-disabled に変えて直した。無効な部品の見た目は、WCAG 1.4.11 の例外に当たるかが仕様で決まっていないため、透明度ではなく色で3:1を満たす方法を選んでいる。
React と Next.js で使う WAI-ARIA のロール・状態・プロパティを、UIパターンごとの JSX の例とともに整理した記事。ネイティブのHTMLで代えられるならARIAは使わないと勧める。
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
そのほかの #スクリーンリーダー ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
フロントエンド入門連載の一回で、セマンティックなHTMLが支援技術に意味を伝える仕組みと、キーボードだけで操作できるかをPlaywrightで点検する方法を、Vueのコード例で解説する。
スクリーンリーダーを使う筆者が、タスクを断念させられた3つのバリアを紹介する。銀行の口座一覧で情報が読まれないこと、オンライン診療の操作ボタンが見つからないこと、チャットの入力欄が読み取り専用のまま動かないことが例に挙がる。
サイトワールド2026で行われた、NVDAと役立つアドオン・AI活用術をテーマにしたイベントの音声を公開したことを伝えている。視聴後のアンケートへの協力を呼びかけている。
Windows用の無料のスクリーンリーダーNVDAの日本語版2026.3jpのリリースを伝えている。処理速度の改善や点字ディスプレイの修正など、本家版と日本語版の主な変更点を挙げている。
全盲の筆者が、視覚障害のある人によるバイブコーディングの事例を紹介する。スクリーンリーダーで使えるターミナル「BlindTerm」などのツールや、AIで復活させたオーディオゲームを取り上げている。