breadcrumb-navigation
Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
ソース情報
- リポジトリ
- thedaviddias/Front-End-Checklist
- ソースの最終更新活動
- 2026年6月9日 20:15
- 検出された SKILL.md の言語
- 英語
- スター
- 74,218
- フォーク
- 6,742
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
2 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- breadcrumb-navigation
- description
- Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
- metadata
- {"category":"html","priority":"medium","difficulty":"beginner","estimatedTime":"15","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/html/breadcrumb-navigation"}
# Implement accessible breadcrumb navigation
Proper breadcrumb markup helps screen reader users understand site hierarchy and their current location, while also improving SEO through structured data.
## Quick Reference
- Use nav element with aria-label='Breadcrumb'
- Use ordered list (ol) for semantic structure
- Mark current page with aria-current='page'
- Keep any structured data aligned with the visible breadcrumb trail
## Check
Verify breadcrumbs use nav element with aria-label, ordered list markup, and aria-current for the current page.
## Fix
Implement breadcrumbs using semantic nav, ol/li structure, and proper ARIA attributes including aria-current='page'.
## Explain
Explain how properly marked up breadcrumbs improve navigation, SEO, and screen reader accessibility.
## Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Implement accessible breadcrumb navigation. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.
---
For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.
Rule page: https://frontendchecklist.io/en/rules/html/breadcrumb-navigation
GitHubで見る