フォームのテキスト入力欄におけるIME(日本語入力などの漢字変換)対応の実装上の課題を指摘。主入力欄と副入力欄の動作の違いについて論じた技術記事。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
メール検証フォームの実装で、状態管理で各段階を明確にし、aria-invalid で無効状態を示し、CSS で空間を予約することで、フォーカス移動とレイアウトシフトを避け、アクセシビリティと UX の両立を実現する。
セマンティック HTML 要素がスクリーンリーダーなどの支援技術による情報理解をどのように改善するかを解説。代替テキスト、フォームラベル、見出し構造の3つの実装課題を実例とともに説明している。
CAPTCHA の代わりにハニーポットを使って、スクリーンリーダー利用者に負担をかけずにスパムボットを検出する実装方法。フロントエンドとサーバー側の検証を解説。
React でメールフォームを実装する際に、フォーカス管理とアクセシビリティを両立させる方法。フォーム状態(読み込み中、成功、エラー)の変化を WAI-ARIA で通知しながら、キーボード操作とスクリーンリーダーに対応。エラー時のフォーカス復帰の実装方法を解説。
VIN入力フォームのアクセシビリティ実装について。ラベル、エラーメッセージの表示、live regionsによるスクリーンリーダー対応、フォーカス管理の具体的なコードパターンを解説している。
メールアドレス入力フィールドの目的を明示する方法について。type属性は形式を、autocomplete属性は具体的な目的を示すことで、フィールドの見た目と実際の機能の一貫性を保つ実装パターンを解説している。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
リソースカード内のリンクは『Open』だけでなく、各リンク先の内容を示すテキストを使うべき。MDNの推奨に基づく実装と手動テスト手順。
HTML/CSS/JavaScript でアコーディオン UI を実装する 6 種類の方法をアクセシビリティの観点から比較。button + ARIA や details + summary における、キーボード操作やスクリーンリーダー対応の具体的な違いを検証。
TestFly Part 12: Playwright-Style Assertions in Selenium — not(), ARIA Snapshots & Strict Mode
JavaのセレニウムテストフレームワークTestFlyに、アクセシビリティツリーを検証する機能が追加された。ARIA ロール、アクセシブル名、アクセシブル説明をスクリーンリーダーと同じ方法で読み出してテストできる。