Compare BEFORE “looks like breadcrumbs” vs AFTER “announced as breadcrumb navigation” (landmark + list + aria-current).
Problem: screen readers may just announce “links” with no clue these are breadcrumbs or which one is the current page.
Try to imagine navigating this page with a screen reader rotor/menu that lists landmarks and lists.
Typical symptom: there’s no “Breadcrumb navigation” landmark, and the current page isn’t marked (aria-current="page").
Improvement: announce breadcrumbs as a navigation landmark, use an ordered list, and mark the current page.
Assistive tech can now say: “Breadcrumb navigation, list with 4 items… current page: Model ZX.”
Optional improvement: don’t make the current page link clickable; here it stays a link for simplicity.
Breadcrumbs are navigation. Treat them like navigation: <nav aria-label="Breadcrumb"> + an ordered list + aria-current on the last item.