See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
All technologies.
This technique relates to:
A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. A breadcrumb trail either displays locations in the path the user took to reach the Web page, or it displays the location of the current Web page within the organization of the site.
Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current Web page. They are placed in the same location within each Web page in the set.
It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", "::", and "→".
A developer searches within the Web site of an authoring tool manufacturer to find out how to create hyperlinks. The search results bring him to a Web page with specific instructions for creating hyperlinks using the authoring tool. It contains the following links to create a breadcrumb trail:
Example Code:
Home :: Developer Center :: How To Center
In this example the breadcrumb trail does not contain the title of the current Web page, "How to create hyperlinks". That information is available as the title of the Web page.
A photographer's portfolio Web site has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the site to a Web page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the Web page:
Example Code:
Home / Galleries / Antarctica / Penguins / Gentoo Penguin
All of the items except "Gentoo Penguin" are implemented as links. The current location, Gentoo Penguin, is included in the breadcrumb trail but it is not implemented as a link.
The information architecture of an ecommerce Web site is categorized from general to increasingly more specific product subsections.
You are here: Acme Company → Electronics → Computers → Laptops
The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here" and "Laptops." This example uses a right arrow symbol (→) as a separator.
In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.
HTML for this example
Example Code:
<nav aria-label="Breadcrumbs">
<h2>You are here:</h2>
<ul>
<li><a href="/">Acme Company</a> →</li>
<li><a href="/electronics/">Electronics</a> →</li>
<li><a href="/electronics/computers/">Computers</a> →</li>
<li>Laptops</li>
</ul>
</nav>
CSS for this example
Example Code:
nav, h2, ul, ul li{ display: inline;}
nav > h2{ font-size: 1em; }
ul { padding-left: 0em; }
Working example: Breadcrumb example
Resources are for information purposes only, no endorsement implied.
When breadcrumb trails have been implemented in a set of Web pages:
Navigate to a Web page.
Check that a breadcrumb trail is displayed.
Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.
For a breadcrumb trail that does not include the current location:
Check that all elements in the breadcrumb trail are implemented as links.
For a breadcrumb trail that does include the current location:
Check that all elements except for the current location are implemented as links.
Check that the current location is not implemented as a link.
Check that all links navigate to the correct Web page as specified by the breadcrumb trail.
For all Web pages in the set using breadcrumb trails,
Checks #2, #3, and #6 are true.
Either check #4 or #5 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.