CivicTechTO / CivicTechTO/civictech.ca

No aria-current="page" on active navigation items

Open Beginner friendly
#96 0 comments 0 reactions 0 assignees View on GitHub
accessibility good first issue
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

    Open the contributing 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

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.