Breadcrumb Navigation
Demo
<!-- We use an HTML standard NAV element to present to users what this component is. It is important to label this navigation menu with an ARIA-LABEL as it is likely this will the second, third, etc navigation on the page. -->
<nav id="breadcrumbNav" aria-label="Navigation Breadcrumbs">
<!-- It is important to use an ordered list element as the order of these navigation links is indeed important to the structure of the content -->
<ol id="breadcrumbList" class="breadcrumb-list">
<li><a class="breadLink" href="#">Home</a></li>
<li><a class="breadLink" href="#">Category</a></li>
<li><a class="breadLink" href="#">Subcategory</a></li>
<!-- The current page in the breadcrumb navigation needs to be communicated programmatically to users. This can be done using the ARIA-CURRENT attribute paired with the "PAGE" value. -->
<li><a class="breadLink" href="#" aria-current="page">Current Page</a></li>
</ol>
</nav>
@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Oswald&display=swap');
/* Standard basic styling */
#breadcrumbNav {
margin: auto;
width: 50%;
text-align: center;
font-family: 'Barlow', sans-serif;
}
.breadcrumb-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 1.2em;
}
.breadcrumb-list li {
display: inline-block;
margin-right: 5px;
}
/* This is simply to add the symbol between nav links */
.breadcrumb-list li::after {
content: '>';
margin-left: 10px;
margin-right: 5px;
}
// We start by getting an array of the breadcrumb links.
var breadcrumbList = document.getElementsByClassName('breadLink');
// I like to have this function run on page load as it can dynamically grab the current page.
window.onload = function() {
for (let i=0; i < breadcrumbList.length; i++) {
// After targeting the current page, we remove it from the focus order, apply styling appropriate to match the programmatic function of the element.
if (breadcrumbList[i].ariaCurrent === "page") {
breadcrumbList[i].href = "javascript:void(0)";
breadcrumbList[i].style.color = "#000000";
breadcrumbList[i].style.textDecoration = "none";
breadcrumbList[i].style.cursor = "default";
breadcrumbList[i].setAttribute("tabindex", "-1");
};
};
};
Why use a breadcrumb navigation?
Breadcrumb navigations are a valuable component in web development, offering users a clear and structured way to understand their location within a website’s hierarchy. Consisting of a series of linked elements representing the path from the homepage to the current page, breadcrumbs enhance user navigation and provide context. They act as a visual aid, helping users maintain orientation and easily backtrack through the site’s structure. Breadcrumb navigations are particularly beneficial for websites with deep hierarchies, such as e-commerce platforms or large informational websites, where users might traverse multiple levels of content. By offering a concise and intuitive wayfinding tool, breadcrumb navigations contribute to a positive user experience, reducing frustration and enhancing the overall usability of a website. Additionally, breadcrumbs support accessibility by providing clear contextual information for users with screen readers or those who prefer alternative navigation methods.
What are some accessibility concerns?
- Semantic HTML and ARIA Roles:
- Concern: Inadequate use of semantic HTML elements or ARIA roles may result in a lack of clarity for users relying on assistive technologies.
- Mitigation: Use semantic HTML elements such as <nav>, <ol>, and <li> for proper structuring. Apply ARIA roles like aria-label or aria-labelledby to convey the purpose of the breadcrumb navigation.
- Clear and Descriptive Labels:
- Concern: Non-descriptive or ambiguous labels in breadcrumb links can hinder understanding, particularly for users with cognitive disabilities.
- Mitigation: Ensure that each breadcrumb link has a clear and concise label that accurately represents the content or category it links to.
- Color Contrast and Visibility:
- Concern: Low color contrast between breadcrumb text and background may impact readability for users with visual impairments.
- Mitigation: Maintain sufficient color contrast and consider additional visual cues such as icons or underlines to enhance visibility.
- Keyboard Accessibility:
- Concern: Users navigating with a keyboard may encounter difficulties in interacting with breadcrumb links.
- Mitigation: Ensure that breadcrumb links are keyboard accessible, allowing users to focus on and activate each link using standard keyboard navigation.
- Responsive Design:
- Concern: Breadcrumb navigation may not adapt well to smaller screens or different viewports.
- Mitigation: Implement responsive design to ensure that breadcrumb navigation remains usable and visually appealing across various screen sizes. Consider alternative layouts or hiding breadcrumbs on smaller screens when appropriate.
- Screen Reader Compatibility:
- Concern: Breadcrumb links may not be adequately conveyed to users relying on screen readers.
- Mitigation: Test breadcrumb navigation with screen readers to ensure that the hierarchy is announced correctly, and provide additional ARIA attributes if necessary.
- Link Focus Styling:
- Concern: Users navigating with a keyboard may have difficulty identifying which breadcrumb link is currently in focus.
- Mitigation: Apply clear focus styles to breadcrumb links to indicate their active state, helping users track their position within the navigation.
- Alternative Navigation Methods:
- Concern: Users with certain disabilities may find breadcrumb navigation challenging to use.
- Mitigation: Provide alternative navigation methods, such as a site map or a search feature, to accommodate users who may prefer or require different ways of exploring the website.
Tested using
Chrome
with NVDA
Firefox
with NVDA
- Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
- A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
- Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
- Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.