ボタンを押すと開くナビ、非表示時フォーカスさせない!!

tabキーを連打しても何もフォーカスしない...はてな？
と思っていましたが、absoluteでマイナスをつけまくって端っこにやって見せないようにしていたナビにフォーカスしていました。機械は間違えない。

非表示メニューはフォーカスが当たらないようにする。

最初はdisplay: none;やvisibility:hiddenなどで
フォーカスさせない作戦に出ました。しかし問題が...

.target {
  display: absolute;
  top: 50%;
  left: -600px;
  transition: .3s;
}
.is-active {
 left: 0;
}

is-activeクラスをつけたり外したりすることでナビを出現するようにしています。
これにdisplay: none;やvisibility:hiddenで出し分けしてしまうと、
今まですっと出てきてすっと仕舞われるというアニメーションになっていた表示が　パっと一瞬で消えたり出てきたりしてしまいます。当然ですね..

JSでガチャガチャしたりCSSのアニメーションであれこれするのも
コードが増えてなんか嫌...と思っていましたが、もっと簡単な方法がありました。

tabIndex

tabIndex="-1"要素につけるとフォーカスされなくなります。
これを出し分けする方針で行きます。
(ちなみにマイナスの値ならなんでもOKです)

下記はreactでの例です。

<Link
  to="/"
  tabIndex={hamburgerToggle.get('flg') ? 'auto' : '-1'}
>
 HOME
</Link>

スクリーンリーダーも対応させよう

tabIndexでフォーカスを無効にしても、スクリーンリーダで読まれてしまいます。
これを読まれないように調節しましょう。属性に`aria-hidden="true"をつけるとスクリーンリーダに読まれなくなります。

非表示にしてもスクリーンリーダー利用者がアクセスしやすいように

非表示ナビへの不要なアクセスを封じ、一件落着！という風ですが、忘れてはいけないことがあると周囲の方に指摘いただきました。ありがたや...
ナビを開閉するボタンがスクリーンリーダーにとってわかりにくいものだったら、アクセスする手段が途絶えてしまいます。
開閉ボタンにaria-label属性をつけてナビをナビします。
こうすることで、aria-labelに指定したテキストがスクリーンリーダーに読み上げられます。

<button
 type="button"
 onClick={clickhandler}
 aria-label="ナビ開閉ボタン"
>×
</button>

もっと良い方法や意見等あればぜひコメントよろしくお願いします!