diff options
author | Andres Galante <agalante@gmail.com> | 2017-08-26 05:39:13 +0300 |
---|---|---|
committer | Andres Galante <agalante@gmail.com> | 2017-09-01 00:44:04 +0300 |
commit | 346f60cbd99f8e7964024e7bd3bb96a576a53f47 (patch) | |
tree | 82cbdcc0844a7d2a5f87c27d4729cf01e6ef50ae /docs/4.0/components/breadcrumb.md | |
parent | a4667be152a3a4fed4e42f2a9efbf831bb5946b6 (diff) |
adds accecibility notes to breadcrumbs
Diffstat (limited to 'docs/4.0/components/breadcrumb.md')
-rw-r--r-- | docs/4.0/components/breadcrumb.md | 45 |
1 files changed, 25 insertions, 20 deletions
diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md index eb286d8471..7a4b5f44ef 100644 --- a/docs/4.0/components/breadcrumb.md +++ b/docs/4.0/components/breadcrumb.md @@ -4,31 +4,36 @@ title: Breadcrumb description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. group: components --- +## Overview Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). {% example html %} -<ol class="breadcrumb"> - <li class="breadcrumb-item active">Home</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item active">Library</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item"><a href="#">Library</a></li> - <li class="breadcrumb-item active">Data</li> -</ol> -{% endexample %} -Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup. +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item active" aria-current="page">Home</li> + </ol> +</nav> -{% example html %} -<nav class="breadcrumb"> - <a class="breadcrumb-item" href="#">Home</a> - <a class="breadcrumb-item" href="#">Library</a> - <a class="breadcrumb-item" href="#">Data</a> - <span class="breadcrumb-item active">Bootstrap</span> +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active" aria-current="page">Library</li> + </ol> +</nav> + +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item"><a href="#">Library</a></li> + <li class="breadcrumb-item active" aria-current="page">Data</li> + </ol> </nav> {% endexample %} + +## Accessibility + +Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page. + +For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). |