Markup Breadcrumbs for Rich Snippets and Pass Lighthouse

[MDN]

SD runs the breadcrumb list through a script that breaks the <ul> <li> list, when you markup the breadcrumb for rich snippets this then causes a fail in Lighthouse due to the list being broken so assisted touch can't follow it, I have now found a work around that maintains the markup, hides it from assisted and adds a hidden layout for the asssited to follow, this all works and passes in Lightouse.

First, take a backup!

Then navigate to "Compact Parent Section List"



1. Go into "Click here to edit list layout settings" and at "Start of List" replace all with:

<div class="text_breadcrumbs"><ol vocab="https://schema.org/" typeof="BreadcrumbList" aria-hidden="true"><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsTopLevelParentShown%22%20%2f%3e%29%20%20OR%20%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22%29" ><li property="itemListElement" typeof="ListItem" style="display:inline;">
<a property="item" typeof="WebPage" href="<actinic:variable name="HomePageURL" />" class="ajs-bc-home"><span property="name"><actinic:variable name="StoreName" /></span></a><meta property="position" content="1"></li>\</actinic:block>

2. In "End of List" replace all with:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22" ><li property="itemListElement" typeof="ListItem" style="display:inline;"><span class="ajs-bc-prod"><span property="name"><actinic:variable name="ProductName" /></span></span>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%201" ><meta property="position" content="3"></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202" ><meta property="position" content="4"></actinic:block></li></actinic:block></ol></div>

<nav aria-label="Breadcrumb" class="visually-hidden">
<ul>
<li><a href="<actinic:variable name="HomePageURL" />">Home</a></li>
<li><a href="<actinic:variable name="SectionHref" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Product%20Page%22%20AND%20%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3c%3d%20%271%27" >aria-current="page"</actinic:block>><actinic:variable name="SectionName" /></a></li>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%20%272%27" ><li><a href="<actinic:variable name="SectionHref" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Product%20Page%22%20AND%20%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%20%272%27" >aria-current="page"</actinic:block>><actinic:variable name="SectionName" /></a></li></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22"><li aria-current="page"><actinic:variable name="ProductName" /></li></actinic:block>
</ul>
</nav>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0, 0, 0, 0);
overflow: hidden;
white-space: nowrap;
}
</style>

3. Click into "Compact Parent Section Link" and replace all with:

<li property="itemListElement" typeof="ListItem" style="display:inline;"><a property="item" typeof="WebPage" href="<actinic:variable name="SectionHref" />" target="_self" class="link_breadcrumbs" itemprop="url"><span property="name"><actinic:variable encoding="html" name="SectionName" /></span></a><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%201" ><meta property="position" content="2"></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202" ><meta property="position" content="3"></actinic:block></li>\

The above will need to be adjusted if you use arrow images to separate your breadcrumb links, and the code for the assisted touch in "End of List" will correctly display section levels to 2 and a final product page, if your section levels go further you'll need to add extra lines and surround them with the correct Block if.