# aria-hiddenが指定されている要素は、フォーカス可能であったり、フォーカス可能な要素を含んでいたりしてはなりません

<https://www.fixreports.com/ja/issues/aria-hidden-focus>

WCAG 4.1.2 名前・役割・値・レベルA

フォーカス可能な要素がスクリーンリーダーからは隠されていますが、キーボードではたどり着けてしまいます。

## このルールがチェックする内容
aria-hiddenが指定されている要素にフォーカスできないこと、その要素にフォーカス可能な要素が含まれていないことを確認してください.

## なぜ重要なのか
キーボード利用者が、スクリーンリーダーで読み上げられない要素にフォーカスしてしまいます（WCAG 4.1.2）。

## 修正方法
### あらゆるウェブサイトの場合
1. フォーカス可能な要素を含むコンテナからaria-hiddenを削除するか、非表示のオフキャンバスメニューやスライドにtabindex="-1"とinert属性を追加します。

### Shopifyの場合
1. フォーカス可能な要素を含むコンテナからaria-hiddenを削除するか、非表示のオフキャンバスメニューやスライドにtabindex="-1"とinert属性を追加します。

### WooCommerceとWordPressの場合
1. フォーカス可能な要素を含むコンテナからaria-hiddenを削除するか、非表示のオフキャンバスメニューやスライドにtabindex="-1"とinert属性を追加します。

## 修正の確認方法
- スクリーンリーダーを起動した状態で、Tabキーでページ内を移動して確認します。

## 出典
- axe-coreのルールのドキュメント（Deque）: https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus
- WCAG 4.1.2の解説（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/name-role-value