Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
WordPressのヒーロースライダーで、画像をWebPに変換するだけでなく、優先読み込み・遅延読み込み・レイアウト確保を組み合わせ、表示されていないスライドをaria-hiddenで読み上げ対象から外す手法を解説する記事。
WordPressのヒーロースライダーの画像を、PNGからWebPに変えて合計約7.8MBから約316KBへ軽くした手順を解説する。あわせて、非表示のスライドを aria-hidden で読み上げの対象から外す方法と、Playwright による自動確認を紹介する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Shadow DOM の内側にあるボタンなどの要素が、支援技術にどう伝わるかを扱う記事である。DOM・Accessibility Tree・プラットフォーム API の関係を仕様と Chrome での観察から整理し、カスタム要素に意味を持たせる設計の選択肢を示している。
管理画面の共通シェルに、キーボードや読み上げ利用者が本文へ直接移動できるスキップリンクを追加した修正の解説である。クリック時だけ main に一時的に tabindex を付ける手法と、装飾アイコンを支援技術から隠す設定を扱う。
エージェントの実行中を示すフッターで、ステータスを示す領域（role=status）の範囲を作業の段階を示す文だけに限定する試作を報告している。経過時間の表示や停止ボタンは領域の外に出している。読み上げの実際の挙動は確かめていない。
そのほかの #キーボード操作 ピックアップ
レスポンシブなレイアウトで CSS の order や column-reverse によって見た目の順番だけを変えると、キーボード操作と読み上げの順番が見た目と食い違うことを解説する。HTML の論理的な読み順を保つべきだと論じる。
開発中のプロダクトの作業を公開するとき、1つの操作をキーボードだけで試し、開始状態・フォーカスの移動・結果を記録して共有する方法を解説する。確認した範囲と確認しなかった範囲も明記する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
管理画面の共通シェルに、キーボードや読み上げ利用者が本文へ直接移動できるスキップリンクを追加した修正の解説である。クリック時だけ main に一時的に tabindex を付ける手法と、装飾アイコンを支援技術から隠す設定を扱う。
AIで作ったWordPressのページを公開前に確認する項目を紹介する記事。文字と背景の差、代替テキスト、見出しの順序、キーボード操作、エラーの伝え方の5項目を挙げ、自動ツールに任せる検査と人が操作する検査を分ける方法を示す。
そのほかの #React ピックアップ
自分のアプリの紹介サイトに置いた四つのアニメーション付きデモのコードを振り返り、同じ遅延処理が繰り返されている点や、動きを減らす設定（reduced motion）の確認を行っていない点を解説している。
Reactのフォーム部品の設計を、ラベルやメッセージ行などの共通の構造、react-hook-form と zod への接続、スマートフォンでの操作の3点から解説する。例には作者が開発する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 で解説。