Reactのナビゲーションコンポーネントをアクセシブルに設計するための初期要件整理。WAI-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コード例を示す。
そのほかの #WAI-ARIA ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
スクリーンリーダーユーザーの実際の使用経験に基づき、デザイン選択がアクセシビリティにどう影響するかを解説。フォーカストラップやARIAの不適切な使用が視覚障害のあるユーザーの日常にもたらす課題を取り上げるウェビナー。
そのほかの #キーボード操作 ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
AIチャットの応答遅延時に、何も起きていない状態がキーボード・スクリーンリーダーユーザーに伝わらない問題を指摘。フォーカス消失や live region 更新の不備を具体的に説明し、待機・ストリーミング・スタール等の状態遷移を accessible name と live region で通知する実装例を解説。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。