Search topics
Deep pages with no breadcrumb or highlighted menu section
A shop's product pages have no breadcrumb, the menu marks no section and the title names only the product and shop, so nothing says where the page sits.
<title>Linen napkins, set of 4 – Fernhill</title> The problem
Someone who lands on a product page from a search engine can't tell which part of the shop it is in, or where to look for more like it.
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.
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.
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.
3 of 10 groups affected
- No vision (affected)
- Low vision (affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Limited language, cognitive and learning abilities Someone who wants other napkins, or wants to find this page again later, has to guess from the menu which section holds it. People with attention or memory limitations lose their way most easily, and the page gives them nothing to hold on to.
- Without vision As the page loads, a screen reader reads its title, "Linen napkins, set of 4 – Fernhill", and the menu reads as four plain links, so nothing a screen reader user hears says the napkins are under Table.
- Limited vision Under a magnifier only the photo and the heading are in view. The menu is out of sight above them, and it marks nothing anyway, so panning around the page turns up no answer.
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.
Try it
You came to these napkins from a search engine. Which part of the shop are they in?
Look at the page and its tab, then Tab through the menu and listen. Open Table from the menu, where its link gets a bar, and open the napkins again from there: does anything still say Table?
The fix
Show which section every page sits in.
<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>What is wrong3 points
- 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.
A breadcrumb trail that ends at the section
<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>How it is fixed4 steps
- 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.
- End it at the section and let the heading name the product, so the page's name isn't said twice, one line apart.
- Put it in a
navnamed "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. - 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.
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.
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 and navigation that marks the current page only by its look 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.
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 describes.
Design ideas
A page can say where it sits without a row of crumbs.
Three ways to show that the napkins are in Table. Point at each and Tab through them: two name the section, and one only goes back to wherever you came from.
In the design file
- Draw where the page sits on every template, product and article pages included, not only on the pages the menu links to.
- Draw the menu’s current look on a section’s own page and on a page inside it, so the developer builds both.
- Draw the phone layout with the section’s name still in view, and in the open menu too.
- Write each template’s page title as the page, then its section, then the site’s name.
Passes
- Section name as an eyebrow over the heading Table and Napkins in small, spaced capitals in the shop’s green #2f5d46, 7.57:1 on white, each a link. It reads as part of the heading’s design rather than a row of crumbs, yet still names each level above the product; underline them on hover and focus, so they read as links.
Linen napkins, set of 4
The section’s categories as chips, its own filled Napkins, Runners and Tablecloths as pills over the heading, with Napkins filled in #2f5d46 and set in bold white, 7.57:1. It shows where the product sits and the way across to the rest of Table; the bold and the fill both carry the mark, since a fill alone is lost in a Windows contrast theme.
Fails
- Round back arrow with no wordsWCAG 2.4.8 The app-style 40px white circle with an arrow, on the photo’s corner. It names nothing, and it goes back to wherever the browser came from: for someone who arrived from a search engine, that is the search results, and the page still has nothing that says Table.
Verify the fix
5 checks, no mouse.
Test with: Keyboard, Screen reader, Zoom
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.
How screen readers handle aria-current="page"
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. Screen readers word aria-current="true" differently, and some say only "current": test with the ones your visitors use.
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.
References
- WCAG Understanding: location (opens in a new tab)
- WCAG Technique G65 (opens in a new tab)
- WCAG Technique G128 (opens in a new tab)
- WCAG Technique ARIA26 (opens in a new tab)
- WCAG Technique G127 (opens in a new tab)
- WCAG Technique G63 (opens in a new tab)
- shopify.dev: link (opens in a new tab)
- baymard.com: implementing-mobile-hierarchy-breadcrumbs (opens in a new tab)
EaseWeb service
Fixed it? Keep it from coming back.
I turn guides like this one into rules your coding agents follow and checks your CI runs. Then I retest by hand with a keyboard and screen readers, periodically.