読み込み中の表示でレイアウトを動かさず、次に何をすべきか、失敗したときにどうするかを伝える方法を React で示す記事。aria-busy や role の使い分けも解説する。
シェアックリップ
シェアされたアックリップです。
そのほかの #React ピックアップ
React と Next.js で使う WAI-ARIA のロール・状態・プロパティを、UIパターンごとの JSX の例とともに整理した記事。ネイティブのHTMLで代えられるならARIAは使わないと勧める。
CSS の prefers-reduced-motion が止めるのは CSS のアニメーションだけで、framer-motion などの JavaScript のアニメーションは止まらない。既定では OS の設定を読まないため、MotionConfig や useReducedMotion で明示的に対応する必要がある。
React の単体テストに axe-core を組み込んで a11y を自動検査する方法を解説する記事。アイコンフォントの文字が名前とみなされて、名前の無いボタンが標準ルールで検出されないため、独自ルールで補っている。
メール送信後の状態（送信中・受付済み・期限切れなど）を、色に頼らず画面読み上げソフトにも伝わるようReactで実装する方法を解説する記事。状態を1つの値で管理し、通知の強さを使い分けることを示す。
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。
そのほかの #WAI-ARIA ピックアップ
WAI-ARIAのロールをJavaScriptで動的に変えても、スクリーンリーダーが更新を読み上げないことがある理由を解説する。アクセシビリティツリーの更新が非同期に行われる仕組みを説明し、ライブリージョンやフォーカス移動による対策を示す。
英語のサービス nakodo.app の公開76ページのHTMLを grep で集計し、見出し・スキップリンク・ナビゲーションの名前付けなどのアクセシビリティの実態を数で示した記事である。
🔗 ARIA live timing
記事 海外
キーボードで並べ替えボタンを押すとフォーカスが消える不具合を、disabled から aria-disabled に変えて直した。無効な部品の見た目は、WCAG 1.4.11 の例外に当たるかが仕様で決まっていないため、透明度ではなく色で3:1を満たす方法を選んでいる。
React と Next.js で使う WAI-ARIA のロール・状態・プロパティを、UIパターンごとの JSX の例とともに整理した記事。ネイティブのHTMLで代えられるならARIAは使わないと勧める。
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
そのほかの #フォーム ピックアップ
Liquitousが2026年10月に行ったアクセシビリティ向上の取り組みを報告する。フォーム部品をデザインシステムの部品に置き換えたこと、読み上げ用の文言の多言語対応、入稿画面にコンテンツのチェック機能を組み込んだことなどが書かれている。
フォームの入力エラーで、どの欄をどう直すかを案内する方法を、申込みフォームを例に解説している。エラー文から該当欄へ移れること、直す以外の入力を残すことを挙げ、WCAG 2.2のエラー特定と修正の提案に触れている。
JIS X 8341-3の改正でベースとなる規格がWCAG 2.2へ移る予定を受け、タップ領域やフォーム入力、フォーカス表示など追加される達成基準の要点を整理した記事。縦書きや改行、IME入力など日本語特有の配慮も扱う。
問い合わせフォームのアクセシビリティ監査で見つかった問題を、セマンティックHTMLの書き方で直した過程を記した記事である。label と input の結び付け、fieldset と legend によるグループ分け、画像の alt の付け方を扱っている。
スクリーンリーダーを使う視覚障害のある筆者が、支払い方法の登録フォームで遭う障壁をまとめた記事。有効期限の入力欄、請求先住所の選択、既定のカードの設定の3点で、読み上げが合わず操作できない例を挙げる。
Webサイトのアクセシビリティを検証する7つの観点を示した記事である。キーボード操作、セマンティックなHTML、コントラストとズーム、フォーム、代替テキスト、動的なコンポーネント、自動チェックと手動QAの併用を扱う。