Breadcrumbs

Considerations

Note the use of the center layout helper and cluster layout helper.

Note how the breadcrumb links meet the requirements of WCAG Success Criterion 2.5.5: Target Size (AAA).

The aria-label attribute has been added to the nav element. This is because the main website navigation also uses the nav element. Where there are multiple nav elements on a single page, all must be given a unique accessible name via aria-label.

The current page is indicated by aria-current="page". Following Scott O'Hara's accessible breadcrumb pattern it is fully linked so that users of Assistive Technology can find which is the currently active link.