Reactのフォーム部品の設計を、ラベルやメッセージ行などの共通の構造、react-hook-form と zod への接続、スマートフォンでの操作の3点から解説する。例には作者が開発するUIライブラリを使っている。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5（入力目的の特定）の解説をもとに示す。
スクリーンリーダーを使う視覚障害のある筆者が、ウェブサイトのログイン画面で遭遇する障壁を解説した記事である。ラベルのないサインインアイコン、パスワード表示の切り替え、チェックボックス、分割された二段階認証の入力欄などを取り上げる。
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
WCAG 2.2の「ターゲットのサイズ（最低限）」と「重複入力」の基準を、イベントの申し込み画面を例に解説する記事。操作対象の大きさと間隔を確保すること、同じ手続きで入力を繰り返させないことを求める基準だと説明する。
会員登録フォームの入力欄に autocomplete 属性を付けて、入力の目的を伝える方法を解説する記事。名前・メールアドレス・郵便番号などをブラウザが自動入力できるようにし、WCAG 1.3.5 と認知の困りごとのある人の入力の負担に結びつける。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。
そのほかの #React ピックアップ
自分のアプリの紹介サイトに置いた四つのアニメーション付きデモのコードを振り返り、同じ遅延処理が繰り返されている点や、動きを減らす設定（reduced motion）の確認を行っていない点を解説している。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
Reactでアイコンだけのボタンやリンクに名前がないと、スクリーンリーダーが「button」とだけ読み上げる問題を扱う。aria-labelや視覚的に隠したテキストで名前を付ける方法を、axeの検査結果とともに示す。
リンクプレビュー画像に代替テキストを付けるための og:image:alt と twitter:image:alt の書き方を解説する記事。カードの画像で伝えるべき内容の書き方と、Next.js App Router での設定方法も扱う。
React のモーダルダイアログを、役割の指定・初期フォーカス・フォーカストラップなどの要件から解説する記事。oks-ui の Modal を Chromium・Firefox・WebKit で検証した結果も載る。
React アプリのアクセシビリティで見落とされやすい課題。モーダルとルート変更時の focus management、キーボード操作、ARIA live regions による動的コンテンツの告知がスクリーンリーダーユーザーに必須。テスト方法と実装例を TypeScript で解説。
そのほかの #モバイル ピックアップ
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
Android と iOS で .NET MAUI アプリを試して見つかった、アクセシビリティの問題8件と対処法を紹介する。AutomationId が ID のまま読み上げられることや、見出しが設定されないことなど、実行して初めて表れる問題を挙げる。
ناحیههای لمسی و بزرگنمایی (Touch Target & Zoom): چرا اندازه و مقیاسپذیری در موبایل حیاتی است؟ 📱
記事 海外
モバイルでタッチ領域を十分な大きさにすることと、拡大縮小を妨げないことを、コード例つきで解説する。タッチ領域の下限は WCAG 2.2 の AA 基準にあたる 24×24px とする。
視覚障害者が屋外でスイフトアイを使用する際の課題を述べ、手帳型ケースにスマホを入れて首から吊し右手の親指で物理スイッチを押す操作方法を提案。中高齢の視覚障害者でも使いこなせるよう基本機能に限定した設計を解説している。
Web Accessibility Directive に基づく大規模監査「世界最大級のアクセシビリティ監査」の第2ラウンドの結果報告。EU 加盟国の公共セクター Web サイトとモバイルアプリのアクセシビリティの現状、改善傾向、各国比較を提示する。
移動支援アプリ『TOBIRA』の開発者が、PC版では問題なくても、スマホでは使いづらい点に気づいた経験を記録。情報の『どこに置くか』がアクセシビリティを大きく左右することについて述べている。