Skip to content

Commit b96132e

Browse files
taohsutaohsu
committed
update/breadcrumb
1 parent 60ee43b commit b96132e

1 file changed

Lines changed: 182 additions & 0 deletions

File tree

‎components/navigation/breadcrumb/breadcrumb.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
# Guideline
2+
3+
## Intro 👈🤖
4+
5+
Breadcrumbs display a hierarchical navigation path, helping users understand their location and navigate back to previous pages.
6+
7+
---
8+
9+
## Definition
10+
11+
Breadcrumbs are a navigational aid that displays a hierarchical path, helping users understand their location and easily navigate back to previous pages.
12+
13+
---
14+
15+
## Best for 👈🤔
16+
17+
✅ Multi-level site architectures with more than two hierarchy levels
18+
19+
✅ E-commerce product pages requiring category context
20+
21+
✅ Documentation sites with nested content structures
22+
23+
✅ Content management systems with deep folder hierarchies
24+
25+
✅ Enterprise applications with complex information architecture
26+
27+
✅ Help center or support portals with categorized articles
28+
29+
✅ Media libraries organized by taxonomy or collections
30+
31+
✅ Government or institutional sites with regulatory content structures
32+
33+
✅ Educational platforms with course and module hierarchies
34+
35+
✅ Search results pages where users need to return to filtered views
36+
37+
---
38+
39+
## Anatomy 👈🤖
40+
41+
| # | Element | Purpose | Optional |
42+
|---|---------|---------|----------|
43+
| 1 | Navigation container | Wraps breadcrumb trail with semantic `nav` element and `aria-label` | N |
44+
| 2 | Previous page link | Interactive link directing users to parent-level pages | N |
45+
| 3 | Separator icon | Visual divider (chevron) between breadcrumb items, hidden from screen readers | N |
46+
| 4 | Current page label | Non-interactive text indicating the user's current location | N |
47+
| 5 | Overflow menu | Truncates middle items when trail exceeds available space (combined) | Y |
48+
49+
---
50+
51+
## Drilldown
52+
53+
Breadcrumbs can be categorized into different levels based on their complexity and hierarchy.
54+
55+
**`N+1`** The first level beyond the home page.
56+
57+
**`N+2`** A subcategory or a more specific section.
58+
59+
**`N+3`** A deeper level of navigation, often product or content grouping.
60+
61+
**`N+4`** A more refined selection, like a product variant or article.
62+
63+
---
64+
65+
## drilldown_do_&_dont 👈🤔
66+
67+
✅ **Do:** Limit breadcrumb depth to 4-5 levels maximum; use overflow menus for deeper hierarchies
68+
❌ **Don't:** Display excessively long breadcrumb trails that wrap to multiple lines
69+
70+
✅ **Do:** Show the full path on desktop and collapse to parent-only on mobile devices
71+
❌ **Don't:** Hide all hierarchy context on smaller screens, leaving users disoriented
72+
73+
✅ **Do:** Use consistent drilldown levels across similar content types within your site
74+
❌ **Don't:** Mix different hierarchy structures arbitrarily across the same product area
75+
76+
✅ **Do:** Ensure each level label accurately represents the page content it links to
77+
❌ **Don't:** Use vague or generic labels like "Category" or "Page" that don't provide context
78+
79+
✅ **Do:** Maintain logical parent-child relationships that match your site's information architecture
80+
❌ **Don't:** Skip hierarchy levels or create breadcrumb paths that don't reflect actual navigation structure
81+
82+
---
83+
84+
# Specs
85+
86+
## States
87+
88+
🚧 Missing from source: States section in breadcrumb_overview.md
89+
90+
---
91+
92+
## Layout and spacing
93+
94+
🚧 Content to be added
95+
96+
---
97+
98+
# Accessibility 👈🤖
99+
100+
## Accessibility intro
101+
102+
Breadcrumbs must be keyboard accessible, properly labeled for assistive technologies, and follow WCAG 2.2 AA guidelines for navigation landmarks. For comprehensive accessibility guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).
103+
104+
---
105+
106+
## Accessibility Challenges
107+
108+
Breadcrumbs present unique accessibility challenges as a secondary navigation pattern that must communicate hierarchical position without interfering with primary navigation or overwhelming screen reader users with repetitive announcements.
109+
110+
### Key Challenges
111+
- Distinguishing breadcrumbs from primary navigation for screen reader users
112+
- Communicating current page location without making it focusable as a dead link
113+
- Ensuring separator icons don't create confusing announcements
114+
- Managing long breadcrumb trails that may cause cognitive overload
115+
116+
### Critical Success Factors
117+
1. Use `nav` element with descriptive `aria-label="Breadcrumb"` to identify the landmark
118+
2. Mark current page with `aria-current="page"` attribute (WCAG 1.3.1)
119+
3. Hide visual separators from assistive technology using `aria-hidden="true"` or CSS-only methods
120+
4. Ensure all interactive links have minimum 44×44px touch targets (WCAG 2.5.5)
121+
122+
---
123+
124+
## Design Requirements
125+
126+
### Structure & Labels
127+
- [ ] **Navigation landmark**: Wrap in `nav` element with `aria-label="Breadcrumb"` ([Orange landmark guidelines](https://a11y-guidelines.orange.com/en/web/develop/landmarks/))
128+
- [ ] **Semantic list**: Use `ol` with `li` for each item to convey hierarchy to assistive technologies
129+
- [ ] **Current page indicator**: Apply `aria-current="page"` to the last item representing current location
130+
131+
### Visual Design
132+
- [ ] **Focus indicator**: Visible focus state with ≥3:1 contrast ratio against background ([Orange focus guidelines](https://a11y-guidelines.orange.com/en/web/design/focus/))
133+
- [ ] **Link contrast**: Text links meet 4.5:1 minimum contrast ratio against background
134+
- [ ] **Touch targets**: Interactive links have minimum 44×44px target size for touch accessibility
135+
136+
### Content
137+
- [ ] **Link labels**: ❌ "Click here" / ✅ "Products" — use descriptive, concise page names ([Orange link guidelines](https://a11y-guidelines.orange.com/en/web/develop/links/))
138+
- [ ] **Separator hiding**: Visual separators hidden from screen readers via `aria-hidden="true"` or CSS
139+
140+
---
141+
142+
## Testing Checklist
143+
144+
### Screen Reader Testing
145+
- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
146+
- [ ] Verify: landmark announced as "Breadcrumb navigation", links announced with names, current page identified
147+
148+
### Keyboard Testing
149+
- [ ] Tab navigates through all breadcrumb links in logical order, Enter activates links
150+
- [ ] Focus indicator visible on each link with sufficient contrast
151+
152+
Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/web/test/)
153+
154+
---
155+
156+
## Key WCAG Criteria
157+
158+
- **1.3.1 Info and Relationships** (A): Breadcrumb structure conveyed through semantic HTML and ARIA attributes
159+
- **2.1.1 Keyboard** (A): All breadcrumb links operable via keyboard without timing requirements
160+
- **2.4.4 Link Purpose** (A): Each breadcrumb link's purpose clear from link text alone
161+
- **2.4.7 Focus Visible** (AA): Visible focus indicator on all interactive breadcrumb links
162+
- **4.1.2 Name, Role, Value** (A): Navigation role, accessible names, and current state programmatically exposed
163+
164+
For complete reference: [Orange Accessibility Guidelines - Navigation](https://a11y-guidelines.orange.com/en/web/components-examples/)
165+
166+
---
167+
168+
## Additional Resources
169+
170+
- [W3C WAI-ARIA Breadcrumb Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
171+
- [WCAG 2.2 Technique G65: Providing a breadcrumb trail](https://www.w3.org/TR/WCAG20-TECHS/G65.html)
172+
- [Orange Accessibility Guidelines - Navigation Components](https://a11y-guidelines.orange.com/en/web/components-examples/)
173+
- [Orange Design System - Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)
174+
175+
---
176+
177+
# Changelog
178+
179+
| Date | Number | Notes | Designer |
180+
|------|--------|-------|----------|
181+
| Oct 10, 2025 | 1.1.0 | • Update of the component token value: ouds-💠_navigation-breadcrumb-space-column-gap-links (visual render from 8px to 4px) • Removal of the component token: ouds-💠_navigation-breadcrumb-space-column-gap-icon • Update of the layer name from "Chevron" to "Icon" | Maxime Tonnerre |
182+
| Fev 14, 2025 | 1.0.0 | • Component creation | Maxime Tonnerre |

0 commit comments

Comments
 (0)