OWASP / OWASP/Nest

feat: Wrap breadcrumb in <nav> landmark for screen reader navigation

Open
#4,889 4 comments 0 reactions 2 assignees Claimed by @asim770 View on GitHub
cat-reloaded-2026 enhancement frontend good first issue
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 breadcrumb trail at the top of every page is wrapped in a `

` element. Screen reader users cannot identify it as a navigation landmark using their landmark navigation shortcuts (e.g., VoiceOver rotor, NVDA elements list). This makes it harder for assistive technology users to quickly orient themselves on the page.

**Describe the solution you'd like**

Wrap the breadcrumb component in a `` element with `aria-label="Breadcrumb"` so screen readers can identify it as a navigation region and users can jump to it directly.

The change is in `frontend/src/components/BreadCrumbs.tsx`:
- Line 13: `

` → ``
- Line 56: `
` → ``

**Describe alternatives you've considered**

- Using `role="navigation"` on the existing `

` — less semantic than ``
- Keeping the current `
` — works for sighted users but misses an opportunity for better screen reader support

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

- [x] Yes
- [ ] No

**Additional context**

The fix is already implemented on branch `feat/breadcrumb-nav-landmark`:
- `frontend/src/components/BreadCrumbs.tsx` — 2 lines changed (+2/-2)

This is part of Milestone #23 UI/UX Revamp — navigation improvements and accessibility best practices.

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.