Breadcrumbs (Semantic HTML and Schema Example)

by Wayne Smith

ARIA Semantic HTML

The stated ARIA requirements are: The desired semantics HTML pattern for breadcrumbs is using an ordered list within a nav tag. The divider between links should not read by screen readers. The nav tag should have a ARIA label of breadcrumb. The current page should be maked with an ARIA attribute of aria-current.

<nav> CSS for breadcrumbs

To prevent the screen reader from reading the spacer charactor - It can be embedded as a pseudo-element in the CSS ::before and the spacer can be removed from the first-child. A class is being used for style to avoid styling the nav element itself and other navs are likely to appear on the page.

Breadcrumbs Schema

The Schema Json as used by Google should have the full URL or absolute URL which includes the domain name not relative URLS.

It is a good practice to keep the end destination for information within two clicks of the main page. The depth that will be shown in Google is 3. And the breadcrumbs are used by Google when showing the site ... the breadcrumb replaces the URL when breadcrumbs are used.