CivicTechTO / CivicTechTO/civictech.ca
No aria-current="page" on active navigation items
- Dominant language
- HTML
- Stars
- 1
- Forks
- 6
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 6
Description
## Summary
Navigation links do not indicate which page is currently active. Screen reader users navigating by landmarks have no programmatic way to identify their current location within the site's navigation structure.
## Affected location
`_includes/header.html:31–37` — the main nav loop:
```liquid
{% for item in site.data.navigation.main %}
{{ item.label }}
{% endfor %}
```
## Fix
Add `aria-current="page"` to the link whose URL matches the current page:
```liquid
{% for item in site.data.navigation.main %}
{{ item.label }}
{% endfor %}
```
The same should be applied to the mobile menu nav loop at `header.html:72–77`.
## WCAG criterion
2.4.8 Location (Level AAA) — while AAA, this is considered a best practice for navigation usability and is straightforward to implement.
Contributor guide
Research direction
Start in _includes/header.html at lines 31–37 and 72–77, then inspect the navigation data used by the Jekyll site. Build or preview the site and check representative desktop and mobile pages with a browser accessibility inspector. Done means the current navigation item exposes aria-current="page" and inactive items do not.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, jekyll
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100