コンポーネントライブラリの実装複雑性を指摘。Shadcn/uiのラジオボタン実装を例に、なぜそうなるのか、より簡潔な設計の可能性を検討する記事。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
color-schemeプロパティでダークモードにおけるブラウザのネイティブUI（日付入力、セレクト、スクロールバー）の自動対応が可能。カスタムコンポーネント制作なしで実装できるテクニック。
ネイティブ<input type="checkbox">を保ちながらカスタムスタイリングする方法。キーボード操作とスクリーンリーダー対応をデフォルトで獲得し、複数の支援技術に対応する責任あるチェックボックスの実装パターンを解説。
HTMLの input type="number" が金額入力に不適切な理由と、type="text" + inputmode="numeric" での実装方法を詳説する。カンマが入力できない、マウスホイールで値が変わるなどの問題を指摘し、Reactコード例を示す。
Cookie肥大化により発生するHTTP 431エラーがフォーム送信をサイレント障害にする問題と、スクリーンリーダー対応を含むアクセシブルなエラーハンドリング実装を解説する。
そのほかの #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コード例を示す。