https://github.com/scottaohara/a11y_breadcrumbs

Accessible breadcrumb pattern
https://github.com/scottaohara/a11y_breadcrumbs

a11y accessibility breadcrumb-navigation

Last synced: 7 days ago
JSON representation

Accessible breadcrumb pattern

• Host: GitHub
• URL: https://github.com/scottaohara/a11y_breadcrumbs
• Owner: scottaohara
• License: mit
• Created: 2017-04-03T19:41:58.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2022-08-12T11:55:10.000Z (over 2 years ago)
• Last Synced: 2024-10-26T08:09:40.252Z (about 2 months ago)
• Topics: a11y, accessibility, breadcrumb-navigation
• Language: HTML
• Homepage: https://scottaohara.github.io/a11y_breadcrumbs/
• Size: 46.9 KB
• Stars: 49
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Accessible Breadcrumbs  

Standard pattern for breadcrumb navigations. Use this pattern with the help of your CMS or site generator of choice, to populate the breadcrumb navigation items.

## How does it work?  

A breadcrumb is a specific type of navigation pattern. It represents the path from the index, or home page, to the current page that one is viewing.

```html

  


    


      

        Index

      

    

    


      

        Sub page

      

    

    


      

        The current page

      

    

  


```

In the markup example, the `` element has an `aria-label="breadcrumb"` to announce this as a "breadcrumb navigation" to screen readers.  

The `
` is semantically appropriate, as these links are meant to be represented in a hierarchical structure. In reality though, the `
` merely exposes the breadcrumb as a list. There is no difference between an `
` and a `
` if their listmarkers are removed.


The `aria-current="page"`, or `aria-current="location"` should be placed on the last element in the breadcrumb navigation.  This will append "current page (or) location" to the announcement of the link, generally after its accessible name has been announced. For example: "About, current page/location".  

CSS pseudo elements are used to add in dividers between the list elements. The current page is has unique style variations to help further distinguish it as the current page.

You can review the [breadcrumb demo page](https://scottaohara.github.io/a11y_breadcrumbs/) for additional information and usage notes.

## License & Such

This pattern was written by Scott O'Hara ([Website](https://www.scottohara.me), [Twitter](https://twitter.com/scottohara)), referencing resources such as [Using the `aria-current` attribute](https://tink.uk/using-the-aria-current-attribute/), and verifying with the [ARIA Authoring Practices](https://w3c.github.io/aria-practices/examples/breadcrumb/index.html).

It has an [MIT](https://github.com/scottaohara/accessible-components/blob/master/LICENSE.md) license.

Use it, modify it, contribute to it to help make your project more accessible :)