Add aria-hidden to non-active header and tabindex="-1" to its focusable elements
Opened this issue · 0 comments
feministclickback commented
This is a suggestion for an A11Y improvement to comply with WCAG 2.2 AA.
The issue: the header is duplicate for non-sighted users because it is visually hidden, but not taken out of the accessibility tree. If it contains focusable elements such as a link, you can tab to them, but you can't see them, which is a problem for keyboard users.
Proposed fix:
- Add aria-hidden="true" to non-active header
- Add tabindex="-1" to any focusable elements in the non-active header
More information here: https://dequeuniversity.com/rules/axe/4.1/aria-hidden-focus
If you point me to where in the code this would be added, I can try and see if I can write a fix myself, but I'm a beginner so bear with me!