Skip to main content

Accessibility UI Guidelines: Breadcrumbs

Breadcrumbs

3.10 Breadcrumbs

Breadcrumbs are a navigational aid that allows users to understand their location within a website's hierarchy. They improve usability and accessibility by providing contextual information about the user's path.

3.10.1 Semantic Markup

Use semantic HTML and ARIA attributes to create accessible breadcrumbs. Wrap the breadcrumbs in a <nav> element with aria-label="Breadcrumb", and structure the items with an ordered list (<ol>).

<!-- Accessible Breadcrumb -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/home">Home</a></li>
        <li><a href="/category">Category</a></li>
        <li aria-current="page">Current Page</li>
    </ol>
</nav>

3.10.2 ARIA Attributes

Use ARIA attributes to enhance accessibility. The aria-current="page" attribute should be applied to the current page's breadcrumb item.

<!-- Breadcrumb with ARIA Attributes -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/dashboard">Dashboard</a></li>
        <li><a href="/settings">Settings</a></li>
        <li aria-current="page">Profile</li>
    </ol>
</nav>

3.10.3 Keyboard Navigation

Ensure breadcrumb links are keyboard accessible. Users should be able to navigate through breadcrumb links using the Tab key.

<!-- Keyboard Accessible Breadcrumb -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/home" tabindex="0">Home</a></li>
        <li><a href="/blog" tabindex="0">Blog</a></li>
        <li aria-current="page" tabindex="0">Article</li>
    </ol>
</nav>

3.10.4 Styling Breadcrumbs

Style breadcrumbs for clarity and usability. Use visual separators (e.g., / or >) to differentiate breadcrumb items.

/* Breadcrumb Styling */
nav[aria-label="Breadcrumb"] ol {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav[aria-label="Breadcrumb"] li + li::before {
    content: "/";
    margin: 0 0.5rem;
    color: #888;
}

nav[aria-label="Breadcrumb"] a {
    text-decoration: none;
    color: #005fcc;
}

nav[aria-label="Breadcrumb"] a:hover {
    text-decoration: underline;
}

nav[aria-label="Breadcrumb"] [aria-current="page"] {
    font-weight: bold;
    color: #333;
}

3.10.5 Responsive Design

Ensure breadcrumbs are responsive and adapt to smaller screens. Use a horizontal scroll or collapse breadcrumbs into a dropdown menu if space is limited.

/* Responsive Breadcrumb Styling */
@media (max-width: 768px) {
    nav[aria-label="Breadcrumb"] ol {
        flex-wrap: wrap;
    }

    nav[aria-label="Breadcrumb"] li {
        margin-bottom: 0.5rem;
    }
}

3.10.6 Testing Breadcrumbs for Accessibility

Test breadcrumbs with assistive technologies to ensure they are accessible. Verify correct use of ARIA attributes, keyboard navigation, and focus management.

// Test Checklist
// - Verify breadcrumb links are keyboard accessible.
// - Ensure the current page is marked with aria-current="page".
// - Check screen reader announcements for breadcrumb navigation.
// - Validate responsive behavior for smaller screens.

Best Practices for Breadcrumbs

  • Use Semantic HTML: Wrap breadcrumbs in a <nav> element with aria-label="Breadcrumb".
  • Ensure Keyboard Accessibility: Make all breadcrumb links navigable using the keyboard.
  • Apply ARIA Attributes: Use aria-current="page" to identify the current page in the breadcrumbs.
  • Style for Clarity: Use visual separators and highlight the current page for easy identification.
  • Design Responsively: Adapt breadcrumbs to smaller screens with wrapping or collapsing techniques.
  • Test Thoroughly: Regularly test breadcrumbs with assistive technologies to ensure accessibility.