スマートフォンのフォーム設計における4つの実践的改善テクニック：input type の最適化、選択式への転換、ページ分割、エラー後の焦点戻しを解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
同じ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エラーがフォーム送信をサイレント障害にする問題と、スクリーンリーダー対応を含むアクセシブルなエラーハンドリング実装を解説する。
そのほかの #UXデザイン ピックアップ
The Design + Accessibility Summit
イベント 海外 開催予定
デザイン専門家向けのオンラインサミット（第7回）。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
エシカルデザインの手法をインクルーシブ・アクティビティ・カードを使ったワークショップ。
非エンジニアがClaudeとGeminiを併用してWebアプリ開発した実践プロンプト集。アクセシビリティ要件の初期組み込みから、UI/UX調整、視認性強化、トラブル対処まで、実装プロセスと試行錯誤を解説。
CSS のネイティブ相対色構文（oklch、color-mix）を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
親が1人で車椅子ユーザーの子どもを雨の中で乗せるときの身体的負担を7場面に分けて可視化。カバーの着脱と安全な乗せ下ろしが同時に必要な課題を指摘し、設計改善の方向を提案。
そのほかの #モバイル ピックアップ
M-Enabling Summit
イベント 海外 開催予定
モバイルアクセシビリティと支援技術の推進を目的とした国際サミット。政府・産業・教育・アドボカシー組織の指導者層や専門家が世界中から参加し、グローバルなネットワーキングの場。
折りたたみ式スマートフォンのアクセシビリティ面での利点と障壁を詳細に分析。ロービジョンユーザー向けの大画面、ろう者向けのハンズフリーポジション、AAC利用者向けの操作性など、利点と同時に手指の器用性要求などの課題も実装面から解説。
Web RPGのスマートフォン縦持ちUI実機検証。小画面・タップ操作・フォーカス・ARIA・コントラストなどアクセシビリティを組み込んだ開発プロセス。
Androidのホームスクリーン設定で大きなサイズの時計ウィジェットを配置するテクニック。
モバイルファーストで開発するとhover状態が見落とされやすく、同時にフォーカスリングも実装忘れになりやすいという経験記。確認デバイスが片方だけでは、存在しない状態を発見できないリスク、および:focus-visibleなど最新CSSの活用を示す。
スクリーンリーダー対応やキーボード操作支援など、モバイルアプリのアクセシビリティをAIが自動化する現状。生成AIによる代替テキストとアクセシビリティ対応コード生成の実績を紹介。