Coding Breadcrumbs

Problem: Many applications do not have breadcrumbs on every page.

Solution: Properly code pages to include navigational breadcrumbs for maximum accessibility and usability.

Information about Breadcrumbs

Breadcrumbs are an important consideration when coding a page. A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application.

Considerations for Coding Breadcrumbs

• Breadcrumb trail is contained within a navigation landmark region ex.<nav>.
• The landmark region is labelled via aria-label.
• The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.
• The breadcrumb anchor element does not have a title element. If the surrounding elements are properly coded, the title text would be redundant information for assistive technology users.

Breadcrumb Example (from this page)

The HTML

The CSS

Helpful Links for Breadcrumbs