Skip to content

fix(a11y): duplicate un-landmarked brand link stays keyboard-focusable while invisible #1865

Description

@davidsneighbour

Current behaviour

The accessibility tree (desktop and mobile) shows two links named "KOLLITSCH.dev*", both pointing at the homepage: one correctly inside the banner "Site title" landmark (SiteTitle.astro), and a second (#navbar-brand, src/components/layout/header/Header.astro:50-58) sitting as a bare sibling with no landmark wrapper at all. It's toggled via opacity-0/opacity-100 for its scroll-linked reveal, not hidden/aria-hidden, so it stays in the tab order and screen-reader tree at all times — including while fully transparent at page-top.

Why it matters

A keyboard or screen-reader user tabbing through the header hits an invisible, redundant "KOLLITSCH.dev*" stop before ever reaching visible content.

Suggested fix

Toggle tabindex="-1"/aria-hidden="true" on #navbar-brand alongside its opacity classes (so it's out of the tab order and a11y tree while invisible), or wrap it in the same landmark region as the primary title link with a distinguishing accessible name (e.g. "KOLLITSCH.dev* (scroll to top)").

Source

Found during a design critique of src/components/layout/header/Header.astro (/impeccable critique), verified via the browser accessibility tree in Chrome (desktop and mobile). Persisted critique snapshot: .impeccable/critique/2026-08-10T15-06-59Z__src-components-layout-header-header-astro.md.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    prio:highHigh priority.status:unconfirmedReported but not yet confirmed.type:accessibilityAccessibility compliance, semantics, contrast, keyboard, or assistive-technology support.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions