# Deep pages with no breadcrumb or highlighted menu section

Source: https://easeweb.dev/learn/site-location
Topics: Menus and navigation > Every page shows where it sits in the site (WCAG 2.4.8)
The fix: Show on every page which section it sits in. Either add a breadcrumb trail above the heading that ends at the page's section, or mark the section in the menu with aria-current and the menu's own current look, or name the section in the page title too, which on its own reaches mostly screen reader users.
Test with: keyboard, screen reader, zoom
References: https://www.w3.org/WAI/WCAG22/Understanding/location.html https://www.w3.org/WAI/WCAG22/Techniques/general/G65 https://www.w3.org/WAI/WCAG22/Techniques/general/G128 https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA26 https://www.w3.org/WAI/WCAG22/Techniques/general/G127 https://www.w3.org/WAI/WCAG22/Techniques/general/G63 https://shopify.dev/docs/api/liquid/objects/link https://baymard.com/blog/implementing-mobile-hierarchy-breadcrumbs

This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.

## What happens

Fernhill, a homeware shop, draws its product pages as landing pages. Most visitors arrive on one from a search engine or an ad, so the design puts nothing between them and the product: under the header comes a large photo, the name, the price and Add to basket. A breadcrumb trail was left out as clutter above the photo. The header menu, Kitchen, Table, Bath and Bedroom, has a current look, a bar under the link, drawn for the category pages: on the Table page, Table is underlined.

Someone searching for linen napkins lands on Linen napkins, set of 4. They would like to see the rest of the table linen, or to remember where they found these. Nothing on the page says the napkins belong to Table. There is no trail, no menu link has the bar, and the browser tab reads "Linen napkins, set of 4 – Fernhill". The bar is in the design, but it shows only when the page's address matches a menu link, and the product's address, /products/linen-napkins, matches none of them. A screen reader user hears the same title as the page loads, then four plain links in the menu.

## Why it fails

Success Criterion 2.4.8 Location (Level AAA) asks that information about where someone is within a set of pages be available. Its Understanding page gives the purpose as letting people orient themselves in a site, and names people with a short attention span, who can become confused, among those it helps. Its sufficient techniques are a breadcrumb trail (G65), a site map (G63), the current location shown in the navigation bar (G128), the current item marked with `aria-current` (ARIA26), and a page title that names the page's place in the larger collection (G127). Any one of them is enough. The product page has none: no trail, nothing marked in the menu, and a title that names the page and the shop but not the section between them.

The menu's current look comes from comparing addresses. Shop platforms, content systems and routers mark the link whose address is the page's own. In Shopify's templates, a link's `current` is true when the page's path matches the link's address, and `active` when the path contains it; Shopify's reference theme, Dawn, underlines a menu link and sets `aria-current="page"` from those values. A product's path, /products/linen-napkins, neither matches nor contains /collections/table, so the Table link is never marked on its products. The design file shows the state on a category page, where it works, and the product page is drawn on its own, so nobody sees that the state never appears there.

## Who is affected

Product pages, help articles, blog posts and documentation pages are the ones people most often reach from outside, through a search engine, an ad or a shared link. Baymard Institute reported in 2020 that 65% of the mobile shop sites it benchmarks had no breadcrumb on the product page, against 20% of desktop sites. On a phone the menu is folded behind a button too, so a product page on a phone often has nothing at all in view that says where it is.

## What automation and AI miss

Nothing is wrong with any element on the page. The links have names, the title is not empty and the heading is there; what is missing is something that names the section, and a scan doesn't know the site's sections. The audit sends a page below the home page to review as `ew:location-manual-check` when it has a menu of three or more links but no breadcrumb trail, no menu link marked with `aria-current` or drawn unlike the links beside it, and a title of fewer than three parts: only a person can tell whether the heading or the content already says where the page sits. Asked for a product page, AI coding tools build what the design shows, and the design shows no trail.

## Before: a product page drawn with nothing that names its section

```html
<head>
  <title>Linen napkins, set of 4 – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on. */
nav a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}
```

- No breadcrumb trail sits above the heading.
- The menu's bar shows only on a category page, whose address the menu links to, so no link has it here.
- The title names the product and the shop, but not Table.

## After: a breadcrumb trail that ends at the section

```html
<head>
  <title>Linen napkins, set of 4 – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      <ol>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
      </ol>
    </nav>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on. */
nav a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  height: 0.8em;
  margin-right: 0.5rem;
  border-right: 1px solid currentColor;
  transform: rotate(15deg);
}
```

1. Put a trail above the heading, from Home down to the section the product belongs to: Home, then Table. Everyone who lands on the page sees at once where it sits, and can go up a level in one click.
2. End it at the section and let the heading name the product, so the page's name isn't said twice, one line apart.
3. Put it in a `nav` named "Breadcrumb", as an ordered list, so a screen reader announces it as navigation, lists it among the page's landmarks and says how many steps it has.
4. Draw the separators as thin rotated lines, so there is no character between the crumbs for a screen reader to read.

This fixes the Before and passes 2.4.8. It keeps the design as drawn and adds one quiet line of small text above the heading; let it wrap on a phone rather than hide it.

## After: the section marked in the menu

```html
<head>
  <title>Linen napkins, set of 4 – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table" aria-current="true">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on, or for its section. */
nav a:is([aria-current="page"], [aria-current="true"]) {
  border-bottom: 3px solid currentColor;
}
```

1. Give the template a rule for the section a page belongs to, not only for the page whose address a link has: on a product, that is its main category.
2. Mark that section's link with `aria-current="true"`. Screen readers announce it as current when they reach it, and "page" stays for the section's own page, so the two are never confused.
3. Draw the menu's existing bar from either value, so the section's link gets the same look and the look can't mark a different link from the code.

This fixes the Before and passes 2.4.8. The design is unchanged, since it is the bar already drawn for the category pages; it now shows on every page inside the section. On a phone it is behind the menu button until the menu opens, so the open phone menu has to draw it too.

## After: the section named in the title

```html
<head>
  <title>Linen napkins, set of 4 – Table – Fernhill</title>
</head>
<body>
  <header>
    <a href="/">Fernhill</a>
    <nav aria-label="Main">
      <ul>
        <li>
          <a href="/collections/kitchen">Kitchen</a>
        </li>
        <li>
          <a href="/collections/table">Table</a>
        </li>
        <li>
          <a href="/collections/bath">Bath</a>
        </li>
        <li>
          <a href="/collections/bedroom">Bedroom</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Linen napkins, set of 4</h1>
    …
  </main>
</body>
```

```css
/* The bar under the menu link for the page you are on. */
nav a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}
```

1. Write the title from the most specific part to the most general: the product, then its section, then the shop. Screen readers read the title as the page loads, so the section is said before anything else on the page.

This passes 2.4.8, through G127, but on its own it is not enough. The title shows only in the browser tab, where it is often cut short after a few words, and phone browsers usually don't show it while the page is open, so sighted visitors rarely see it. It is still worth doing beside either of the other fixes: it costs nothing to the design, and bookmarks and the history list carry it too.

## Which option to use

All three pass 2.4.8. Use the breadcrumb: it is the only one that names every level, sits beside the heading where people are already looking, and stays in view at every width and zoom, while the menu mark names only the top section and is folded away on a phone, and the title is not enough on its own. Marking the section in the menu suits a site with one level of sections, whose design already has a current look; it costs no space at all. Name the section in the title whichever you choose.

## Implementation decisions

**Which section a product is in.** A product can sit in several collections: napkins in Table and in Sale. Give each product one main section, kept in one field, such as a product type or a category set in the shop's admin, and build the trail, the menu mark and the title from that field. Don't build the trail from the way someone happened to arrive. G65 accepts a trail of the path taken, but someone who comes from a search engine has taken none, so it names no section for them, and the same product names a different section for each visitor who browsed.

**The address bar isn't the answer.** An address such as /table/napkins/linen-napkins does say where the page sits, but none of the techniques for 2.4.8 uses it, few people read it, and phone browsers usually show only the domain. Platforms that give products a flat address, such as /products/linen-napkins, show even less.

**Structured data isn't seen.** Breadcrumb markup for search engines, such as a BreadcrumbList in JSON-LD, can show a trail in Google's desktop search results, not on the page. Add it beside the visible trail if you like; it doesn't replace it.

**The phone layout.** Keep the trail on a phone. When it is long, shorten it to a single link to the section above rather than hiding it, as one of the design ideas below draws it: one link that names the section still says where the page sits. In a phone menu, draw the section's mark in the open menu as well.

**Getting the code right.** The trail needs its own name and no separators that are read out, and a menu link marked by a class alone shows the location only to sighted people. [Breadcrumbs that mark the current page only by its look](/learn/breadcrumbs) and [navigation that marks the current page only by its look](/learn/current-page) cover both. A title that is the same on every page fails at Level A first; see [page titles that are the same on every page](/learn/page-title).

**A site map.** G63 lists a site map as another way to meet 2.4.8. It shows the whole site on a page of its own, so people still have to leave the page and find it there; it is better as a second way to find pages, as [menu-only sites with no search or site map](/learn/multiple-ways) describes.

## Verify the fix

1. List every page template, product, article, search result and help page included, and open one page of each: each shows which section it sits in, with a trail, a marked menu link or both.
2. Open a product or article page straight from a search engine or a shared link, and say which section it is in from what the page shows, without opening the menu or reading the address.
3. With a screen reader, open the same page and find the section: from the title read as it loads, the trail, or the menu link announced as current.
4. At a phone's width and at 400% zoom, check that the trail is still shown, or that one press of the menu button shows the section marked.
5. Open a product that sits in two collections, from each of them: the trail, the menu mark and the title name the same section each time.

Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after a page template or the menu changes.

## Limits

This is a starting pattern, not a guarantee for every site. It covers a page that shows nothing of where it sits. A location cue only helps when the site's sections make sense to the people using it: a trail through categories nobody would guess still leaves them lost, and that is a matter of the site's structure, which no markup fixes. A trail or menu that changes order or wording from page to page has its own failure; see [navigation menus that change order or names between pages](/learn/consistent-navigation). Screen readers word `aria-current="true"` differently, and some say only "current": test with the ones your visitors use.

## What screen readers do (tested by hand by EaseWeb)

`aria-current="page"`: Marks the link to the page you are on, in a menu, breadcrumbs or pagination.

| Screen reader | Browser and system | Tab to it | Down Arrow |
| --- | --- | --- | --- |
| JAWS | Chrome, Windows 11 | Not tested | Not tested |
| NVDA | Chrome, Windows 11 | Not tested | Not tested |
| JAWS | Edge, Windows 11 | Not tested | Not tested |
| NVDA | Firefox, Windows 11 | Not tested | Not tested |
| NVDA | Edge, Windows 11 | Not tested | Not tested |
| JAWS | Firefox, Windows 11 | Not tested | Not tested |
| VoiceOver | Safari, macOS | Not tested | Not tested |
| VoiceOver | Safari, iOS | Not tested | Not tested |
| TalkBack | Chrome, Android | Not tested | Not tested |

https://easeweb.dev/learn/screen-reader-support

---

Get this guide in your coding agent: MCP https://easeweb.dev/mcp (setup at https://easeweb.dev/services/developers)