General
- Ensure sufficient colour contrast between breadcrumb text and background
- Provide clear visual separation between breadcrumb items using dividers
- Do not rely on visual styling alone to indicate the current page — ensure text clearly identifies it
- Keep breadcrumb labels concise and descriptive
Web
Semantic structure
- Use <nav aria-label="Breadcrumb"> to wrap the breadcrumb component
- Use an ordered list <ol> to contain breadcrumb items, as the sequence is meaningful
- Each breadcrumb item should be an <li> element
Current page indication
- The current page (last item) should use aria-current="page" to identify it for screen readers
- The current page should not be a link — use plain text or a <span> instead
Links and labels
- Each link should have descriptive text that makes sense out of context
- Add the full label text in a title attribute for truncated links
- The home icon button or text should have aria-label="Home" to provide a clear context
Keyboard navigation
- Users should be able to tab through breadcrumb links in hierarchial order
- Enter or Space should activate links
- Focus indicators must be clearly visible on all interactive elements
React Native for web
- Use accessibilityRole="navigation" for the breadcrumb container
- Use accessibilityLabel="Breadcrumb" to identify the navigation region
- Add accessibilityLabel with descriptive text for each link
- The home text should have accessibilityLabel="Home"
- Mark the current page with appropriate accessibility properties to indicate it is not interactive