Skip to content
Accessible breadcrumb pattern
HTML CSS
Branch: master
Clone or download
Latest commit ce1ba4a Jul 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/css voiceover+safari fix Jan 12, 2019
.gitignore modify hover/focus styles Aug 27, 2018
LICENSE 2019 yo Jan 12, 2019
README.md Update README.md Sep 25, 2018
index.html fix "can should" typo Jul 22, 2019

README.md

Accessible Breadcrumbs

Standard pattern for breadcrumb navigations. Use this pattern with the help of your CMS or site generator of choice, to populate the breadcrumb navigation items.

How does it work?

A breadcrumb navigation is different from other navigations, in that it represents the path from the index, or home page, to the current page.

<nav class="breadcrumb-nav" aria-label="breadcrumb">
  <ol>
    <li>
      <a href="#">
        Index
      </a>
    </li>
    <li>
      <a href="#">
        Sub Page
      </a>
    </li>
    <li>
      <a href="#" aria-current="page">
        Current Sub Page
      </a>
    </li>
  </ol>
</nav>

In the markup example, the <nav> element has an aria-label="breadcrumb" to announce this as a "breadcrumb navigation" to screen readers.

The <ol> is semantically appropriate, as these links are meant to be represented in a hierarchical structure.

The aria-current="page", or aria-current="location" should be placed on the last element in the breadcrumb navigation. This will append "current page (or) location" to the announcement of the accessible name of the link. For example: "About, current page".

CSS pseudo elements are used to add in dividers between the list elements, and the current page is purposefully styled differently than the links prior to it, to further visually indicate it as the current page.

You can review the breadcrumb demo page for additional information and usage notes.

License & Such

This pattern was written by Scott O'Hara (Website, Twitter), referencing resources such as Using the aria-current attribute, and verifying with the ARIA Authoring Practices.

It has an MIT license.

Use it, modify it, contribute to it to help make your project more accessible :)

You can’t perform that action at this time.