Skip to content

Breadcrumb is cut off at narrow widths and high zoom #280

Open

Description

@accesswatch

Found during the manual visual check of core tasks 1 to 4 on 29 October 2026, recorded in admin/ACCESSIBILITY_CORE_FLOWS.md.

Where: the header of every site page, for example Chapter 05. The breadcrumb is nav.breadcrumb in scripts/build-html.js, styled in html/styles/custom.css.

What: the breadcrumb ("Home > Working with Issues") shares one row with the Wiki link and the search box. It is set to white-space: nowrap; overflow: hidden; text-overflow: ellipsis, so as the window narrows it is squeezed rather than wrapped. Measured widths of the breadcrumb, which needs 172 CSS pixels:

  • 640 pixels wide (200% zoom on a 1280 pixel window): 328 pixels, shown in full.
  • 480 pixels: 168 pixels, just cut.
  • 400 pixels: 88 pixels.
  • 320 pixels (400% zoom): 8 pixels; only the "H" of "Home" shows, and the rest of the link is hidden behind the Wiki button.

At 320 CSS pixels this loses information, which WCAG 2.2 success criterion 1.4.10 Reflow does not allow. There is no horizontal page scroll, so the page-level reflow check in the 28 October agent run did not catch it.

Workaround: the same Home link is in the sidebar as "Workshop Home", and the page title and heading name the current page.

Severity: medium for people who use high zoom or a narrow window; nothing is blocked.

Done when: at a 320 CSS pixel wide window the whole breadcrumb is visible, for example by letting the header row wrap, or moving the breadcrumb onto its own line below a breakpoint, with the Home link fully visible and not overlapped.

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

    accessibilityAccessibility barriers, reports and improvements

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions