CivicTechTO / CivicTechTO/civictech.ca

Desktop nav uses <button onclick> instead of <a> for navigation links

Open Beginner friendly
#94 0 comments 0 reactions 0 assignees View on GitHub
accessibility
Dominant language
HTML
Stars
1
Forks
6
Avg merge
9h 45m
Merged PRs (30d)
6

Description

## Summary

The desktop navigation utility items (e.g. the "Sign Up" button) are rendered as `` elements with `onclick="window.location='...'"` or `onclick="window.open('...')"`. Buttons are semantically for actions, not navigation. This causes several problems:

- Screen readers announce these as "button" rather than "link", giving users incorrect expectations
- They cannot be middle-clicked to open in a new tab
- They do not support browser history navigation correctly
- `window.open()` can be blocked by popup blockers

## Affected location

`_includes/header.html:41–52`

```liquid
{% for item in site.data.navigation.utility %}



  • {{ item.label }}{% if item.external %} ↗{% endif %}


    {% endfor %}
    ```

    Note: the mobile menu already correctly uses `` for these same items — the desktop nav should match.

    ## Fix

    Replace the `` pattern with `` elements styled to look like buttons, matching the mobile menu implementation:

    ```liquid
    {% for item in site.data.navigation.utility %}



  • {{ item.label }}{% if item.external %} ↗{% endif %}


  • {% endfor %}
    ```

    ## WCAG criterion

    4.1.2 Name, Role, Value (Level A), 2.1.1 Keyboard (Level A)

    Contributor guide

    Open the contributing guide

    Research direction

    Start in _includes/header.html:41–52 and compare the desktop utility-item markup with the mobile menu implementation. Replace the desktop onclick navigation pattern with the requested anchor markup, preserving labels, styling, external-link behavior, and the indicator; done means navigation has link semantics and supports normal browser link interactions.

    Written by the indexing model from the issue text.

    Assessment

    Tech stack
    html, jekyll
    Domain
    accessibility, frontend, web-dev
    Issue type
    Bug
    Difficulty
    1/5
    Estimated time
    Under an hour
    Activity status
    Stale
    Clarity
    Clearly specified
    Newbie friendliness
    62/100

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.