フォーカスマネジメント とは？

そうだよ。Tabキーでページ内を移動する人にとって、フォーカスが今どこにあるかは命綱なんだ。目が見える人はマウスで好きな場所をクリックできるけど、キーボードユーザーやスクリーンリーダー利用者はフォーカスの位置がすべてなんだよ

モーダルダイアログを開いたとき、フォーカスがモーダルの外に出ないように閉じ込める仕組みだよ。Tabキーを連打してもモーダル内の要素だけを巡回する。もし閉じ込めないと、モーダルの裏にあるボタンにフォーカスが飛んでしまって、スクリーンリーダーのユーザーは混乱してしまうんだ

tabindex="0"は通常のTab順序に参加させる、tabindex="-1"はTabでは飛ばすけどJavaScriptでfocusできるようにする、という2つが基本だよ。tabindex="1"以上の正の値は使わないのが鉄則。無理やり順序を変えるとHTMLの構造と食い違ってカオスになるんだ

本当だよ。従来のページ遷移ではブラウザがフォーカスをリセットしてくれるけど、SPAではJavaScriptで画面を書き換えるからフォーカスはそのまま残る。ページ遷移後にフォーカスを新しいコンテンツの先頭や見出しに移動させないと、スクリーンリーダーのユーザーは「画面が変わった」ことすら分からないんだ

outline: noneでフォーカスリングを消すのは、アクセシビリティ的にはアウトだよ。代わりに:focus-visibleを使えば、キーボード操作のときだけフォーカスリングを表示して、マウスクリック時は非表示にできる。デザインとアクセシビリティの両立はこのセレクターで解決する時代になったね