ARIA Breadcrumb

From Level Access Web Labs
Jump to navigation Jump to search

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.

Breadcrumb



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