テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。
シェアックリップ
シェアされたアックリップです。
そのほかの #React ピックアップ
自分のアプリの紹介サイトに置いた四つのアニメーション付きデモのコードを振り返り、同じ遅延処理が繰り返されている点や、動きを減らす設定（reduced motion）の確認を行っていない点を解説している。
Reactのフォーム部品の設計を、ラベルやメッセージ行などの共通の構造、react-hook-form と zod への接続、スマートフォンでの操作の3点から解説する。例には作者が開発するUIライブラリを使っている。
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 で検証した結果も載る。
そのほかの #キーボード操作 ピックアップ
ホームページのトップで自動的に切り替わる画像について、読む人が止めたり前の案内に戻ったりできるように見直す方法を解説する。停止やキーボード操作の確認手順、見学会などの重要な案内をスライドの外にも置く考え方を含む。
視神経萎縮などで見えにくさのある人がスクリーンリーダー・拡大表示・キーボード操作を使う前提で、開発者が最初に押さえたい基本をまとめた記事である。意味のあるHTML、ラベル、フォーカス管理、変化の知らせ方、テストの方法を扱う。
マウスでは問題なく操作できるWebページが、キーボードでは使えなくなる典型的な箇所を解説する記事。クリックにしか反応しないdiv、フォーカスの枠の削除、固定ヘッダーの陰に隠れるフォーカス、ダイアログのフォーカス管理を扱う。
クリックできる要素が <button> で作られているか、<div> などで代わりに作られていないかを確かめる方法を解説する記事である。<div> は、自分で補わない限り、Tab キーで移動できず、スクリーンリーダーにもボタンとして伝わらない。
レスポンシブなレイアウトで CSS の order や column-reverse によって見た目の順番だけを変えると、キーボード操作と読み上げの順番が見た目と食い違うことを解説する。HTML の論理的な読み順を保つべきだと論じる。
開発中のプロダクトの作業を公開するとき、1つの操作をキーボードだけで試し、開始状態・フォーカスの移動・結果を記録して共有する方法を解説する。確認した範囲と確認しなかった範囲も明記する。