React開発者による aria-label の誤用パターンを指摘し、スクリーンリーダーユーザーに正しく伝わるWAI-ARIA属性の使用方法を解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
スクリーンリーダーユーザーの実際の使用経験に基づき、デザイン選択がアクセシビリティにどう影響するかを解説。フォーカストラップやARIAの不適切な使用が視覚障害のあるユーザーの日常にもたらす課題を取り上げるウェビナー。
そのほかの #React ピックアップ
Playwrightを使ったE2Eテストで、ブラウザ（Chromium/WebKit）、端末（iPhone実機/Android Emulator）、画面幅、アクセシビリティなど複数軸での動作確認。Chrome環境のみでなく、Safari系やスマートフォン環境での検証の重要性を解説する。
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
ブラウザゲームにおいて、複数の操作方法と状態表現を組み合わせてアクセシビリティを確保する方法を、Astro と React Islands で実装。
ブラウザゲーム開発の実装事例。視覚的スケーリングゲームをAstro（静的）とReact Island（インタラクティブ）で構築し、キーボード・ポインタ・タッチに対応。テスト可能な設計を解説。
チャットUIのストリーミング完了時のアクセシビリティバグの詳細解説。完了時にUIがリマウントされるとキーボードフォーカスが消える問題を状態遷移設計で防ぐ方法を提案。VoiceOver等スクリーンリーダー利用時の課題と再現コード付き。
HTMLの input type="number" が金額入力に不適切な理由と、type="text" + inputmode="numeric" での実装方法を詳説する。カンマが入力できない、マウスホイールで値が変わるなどの問題を指摘し、Reactコード例を示す。