Skip to content

Add aria-hidden to non-active header and tabindex="-1" to its focusable elements #80

@feministclickback

Description

@feministclickback

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions