サロンなどサービス業の予約サイトを、情報設計・モバイル対応・予約フォーム・アクセシビリティなどの観点から解説する記事。アクセシビリティでは、セマンティックなHTMLとキーボードで操作できる部品を取り上げている。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
メール送信後の状態（送信中・受付済み・期限切れなど）を、色に頼らず画面読み上げソフトにも伝わるようReactで実装する方法を解説する記事。状態を1つの値で管理し、通知の強さを使い分けることを示す。
生成AIが作るフォーム部品のアクセシビリティを、モデル・指示文・評価の測り方の違いで比べた研究（PACE）を、著者が紹介する。自動チェックでは分からない、ラベルの意味やキーボード操作、エラーからの回復を確かめる必要を論じる。
Four form components hold every form in our app, and writing this post found the one bug in them
記事 海外
アプリ「Nakodo」のフォーム部品の設計を解説する記事。失敗の通知と成功の通知で role を使い分ける理由と、入力欄の補足（ヒント）が入力欄に関連付けられておらず、スクリーンリーダーで読まれない不具合を扱う。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5（入力目的の特定）の解説をもとに示す。
スクリーンリーダーを使う視覚障害のある筆者が、ウェブサイトのログイン画面で遭遇する障壁を解説した記事である。ラベルのないサインインアイコン、パスワード表示の切り替え、チェックボックス、分割された二段階認証の入力欄などを取り上げる。
そのほかの #キーボード操作 ピックアップ
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
ホームページのトップで自動的に切り替わる画像について、読む人が止めたり前の案内に戻ったりできるように見直す方法を解説する。停止やキーボード操作の確認手順、見学会などの重要な案内をスライドの外にも置く考え方を含む。
テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。
視神経萎縮などで見えにくさのある人がスクリーンリーダー・拡大表示・キーボード操作を使う前提で、開発者が最初に押さえたい基本をまとめた記事である。意味のあるHTML、ラベル、フォーカス管理、変化の知らせ方、テストの方法を扱う。
マウスでは問題なく操作できるWebページが、キーボードでは使えなくなる典型的な箇所を解説する記事。クリックにしか反応しないdiv、フォーカスの枠の削除、固定ヘッダーの陰に隠れるフォーカス、ダイアログのフォーカス管理を扱う。
クリックできる要素が <button> で作られているか、<div> などで代わりに作られていないかを確かめる方法を解説する記事である。<div> は、自分で補わない限り、Tab キーで移動できず、スクリーンリーダーにもボタンとして伝わらない。