CSS の prefers-reduced-motion が止めるのは CSS のアニメーションだけで、framer-motion などの JavaScript のアニメーションは止まらない。既定では OS の設定を読まないため、MotionConfig や useReducedMotion で明示的に対応する必要がある。
シェアックリップ
シェアされたアックリップです。
そのほかの #React ピックアップ
読み込み中の表示でレイアウトを動かさず、次に何をすべきか、失敗したときにどうするかを伝える方法を React で示す記事。aria-busy や role の使い分けも解説する。
React と Next.js で使う WAI-ARIA のロール・状態・プロパティを、UIパターンごとの JSX の例とともに整理した記事。ネイティブのHTMLで代えられるならARIAは使わないと勧める。
React の単体テストに axe-core を組み込んで a11y を自動検査する方法を解説する記事。アイコンフォントの文字が名前とみなされて、名前の無いボタンが標準ルールで検出されないため、独自ルールで補っている。
メール送信後の状態（送信中・受付済み・期限切れなど）を、色に頼らず画面読み上げソフトにも伝わるようReactで実装する方法を解説する記事。状態を1つの値で管理し、通知の強さを使い分けることを示す。
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。