Tabで届くのに読み上げられない、aria-hiddenの要素

transform は閉じたメニューを目から隠し、aria-hidden はスクリーンリーダーから隠しますが、キーボードからは何も隠していません。リンクはすべてTabの移動先に残り、画面の外で、スクリーンリーダーが読む名前も持たないままです。

visibility: hidden は、閉じたメニューを画面、キーボード、ポインター、スクリーンリーダーから一度に隠すため、aria-hidden は要らなくなります。visibility の遅延で、メニューが滑り出てから隠れ、開くときはすぐに表示されます。アニメーションがないメニューなら、hidden 属性（menu.hidden = !open）でも同じ結果になります。

どの方法も基準を満たします。閉じたメニューが完全に画面の外にある、よくある場合は、CSSで隠す方法がいちばん簡単です。ルールが一つで、どのブラウザーでも動き、スクリプトが忘れるものもありません。inert は、描画を残したまま同じ働きをするため、次のカルーセルのスライドの端や独自ダイアログの背後のページのように、使わない部分の一部を見せておく必要があるときに選びます。aria-hidden を残して操作要素ごとに tabindex="-1" を付ける方法は、既存のコンポーネントへの変更がいちばん小さい反面、操作要素ごとに付け、開閉のたびに戻す必要があるため、ほかの方法に移るまでの一時的な対応と考えてください。

フォーカスがある部分は、隠す前にフォーカスを移します。Escapeやメニュー内の閉じるボタンのように、フォーカスがメニュー内のリンクにある状態で閉じるとき、先にメニューを隠すと、フォーカスは誰も届かない要素に残り、ブラウザーはページの先頭に戻します。メニューボタンにフォーカスを移してから、メニューを隠してください。開くときは逆に、visibility: hidden や inert を外して表示してから、フォーカスを中に移します。

開いたメニューがページの一部を覆う場合も注意が必要です。Tabでメニューから下に隠れたリンクへ移れると、フォーカスは誰にも見えない場所に移ります。開いたメニューでページを横に押し出して後ろの要素を覆わないようにするか、モーダルにします。モーダルにする場合は、modal-focus-management のガイドのとおり、フォーカスを中に移し、ほかのページを inert にし、Escapeでメニューを閉じます。

同じ問題でも、隠しているものによって修正方法が変わります。

• 画面の外にあるカルーセルのスライド：表示していないスライドに inert を付けるか、移動し終わってから visibility: hidden にする。マークアップを直す前に、カルーセルのライブラリーの設定を確認する。
• 選ばれていないタブのパネル：選ばれていないパネルに hidden 属性を付ける。
• 独自ダイアログの背後のページ：modal-focus-management のガイドのとおり、ページに inert を付ける。
• 商品カードで、タイトルのリンクと同じページを指す写真のリンク：ほかの操作要素を含まないため、そのリンクだけに aria-hidden="true" と tabindex="-1" を付けてかまわない。写真とタイトルを一つのリンクにまとめる方法もある。

隠している部分が画面に表示され、使われるものなら、修正は逆です。aria-hidden を外して、全員に届くようにします。また、テンプレートだけでなく表示されたページを確認してください。外部スクリプトのメニュー、カルーセル、Cookieツールは、自分で aria-hidden を付けることがよくあります。