OWASP / OWASP/Nest

Improve header accessibility and keyboard navigation support

Open
#4,804 2 comments 0 reactions 2 assignees Claimed by @nazimmuhammed View on GitHub
enhancement
Dominant language
Python
Stars
451
Forks
707
Avg merge
22h 59m
Merged PRs (30d)
91

Description

**Is your feature request related to a problem? Please describe.**

The current header navigation can be improved for keyboard-only and screen-reader users. There is no skip-to-content mechanism, mobile navigation state is not fully exposed through ARIA attributes, and focus handling during the mobile menu open/close lifecycle could be more accessible.

**Describe the solution you'd like**

Implement the following accessibility improvements:

* Add a keyboard-accessible "Skip to main content" link.
* Add an anchor target on the main content container.
* Improve mobile menu accessibility using:

* `aria-expanded`
* `aria-controls`
* navigation roles and visibility semantics
* Add focus management for the mobile navigation:

* move focus into the menu when opened
* restore focus when closed
* Add Escape-key support to close the mobile menu.
* Add automated accessibility tests using jest-axe.

**Describe alternatives you've considered**

The current implementation works functionally but relies on users manually navigating through the page structure. Alternative approaches could include a full focus-trap implementation, but the proposed changes provide a simpler and lower-risk improvement while significantly improving accessibility.

**Are you going to work on implementing this?**

* [x] Yes

**Additional context**

A working implementation has already been prepared and tested on a fork. The changes affect:

* frontend/src/app/layout.tsx
* frontend/src/components/Header.tsx
* frontend/src/app/globals.css
* frontend/**tests**/a11y/components/Header.a11y.test.tsx

The implementation also includes accessibility-focused test coverage.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.