ARIA Breadcrumb
This is a simple demonstration of the WAI-ARIA Breadcrumb design pattern. The pattern starts with a standard Navigation landmark with an added aria-label attribute to identify the region to screen readers (e.g. "Breadcrumb"). The links are added to an unordered list with the last link identified as the current page using the aria-current="page" attribute.
This design pattern was tested on an example created by William Dodson on Codepen.
JAWS
JAWS 2021.2012.48 ILM: Announced as "Breadcrumb navigation region, list with 4 items, link home." Consecutive links are announced as normal with the last link announced as "Dinglehopper, current page link."
JAWS 2020.2008.24 ILM: Announced as "Breadcrumb navigation region, list with 4 items, link home." Consecutive links are announced as normal with the last link announced as "Dinglehopper, current page link."
NVDA
NVDA 2020.3: Announced as "Breadcrumb navigation landmark, list with 4 items, home link." Consecutive links are announced as normal with the last link announced as "Dinglehopper link, current page."
iOS
VoiceOver iOS 14.2: Announced as "Home, Link, Breadcrumb, navigation, Landmark." Consecutive links are announced as normal with the last link announced as "Dinglehopper, Current page, Link, end, Breadcrumb, navigation, end."
macOS
VoiceOver macOS X.X: Untested
