Why ARIA and Schema Breadcrumbs with examples

Published
Updated:
by Wayne Smith

Breadcrumbs provide visitors clues to finding additional on-topic content and interacting with the website. Screen readers locate breadcrumbs as a site navigational aid for people with disabilities. Search engines look for content clusters to identify the main category pages to index content.

Yummy breadcrumbs using candy

Semantic and Schema Breadcrumbs and SEO

For SEO, one must not make the search engine try to read your mind. Search engines rank content better when the site has more than one page on the topic. The breadcrumbs lead the search engine to the topical hub or category page.

Content Silos

Site structure also aids SEO in identifying the topical root page. However, as a site grows new topical categories can emerge and breadcrumbs are easy to change ... Changing a URL is essentially migrating content.

Problem free URL Structure for SEO

Entity relationships: All proper nouns, including names of people, places, and things, are considered entities. Modern search engines prioritize understanding these entities to enhance their search results. Breadcrumbs establish a hierarchical structure that outlines the relationships between entities on a website. Sub-pages complement the main topical page by filling in details, making it more comprehensive and valuable in the eyes of search engines.

Entity Relationships and SEO


Screen Readers and Breadcrumbs

Screen readers rely on ARIA breadcrumbs to assist with site navigation. Without clear breadcrumbs, it's unclear whether your gold platinum page is a standalone feature or if visitors are encouraged to explore additional content.

Visitors reading the page might have the same question: visible breadcrumbs help guide them and encourage them to stay on the website.

Navboost: User Engagement SERP Refinement


Breadcrumbs Feature

It should be mentioned that schema breadcrumbs replace ugly URLs in Google's search results. The appearance of ugly URLs may affect click-through rates.


ARIA HTML Breadcrumbs

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 be 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.

The example uses a class attribute for CSS styling. A nav[aria-label="Breadcrumb"] could also be used.

<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.

Schema Breadcrumbs Example

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