In the breadcrumb, the active page text is not read as a separate list item by a screen reader. When the breadcrumb is navigated using arrow keys with a screen reader, the user hears there are 4 items in the list. However, the user only hears three items. The current page is read appended to the prior list item. See video. You will hear "List of Two Items". On press of down arrow key to navigate, you will hear "Topics/Emergency preparedness" as one item. These are expected to be two separate items. See accessible breadcrumb example here: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
Source
https://airtable.com/appRFUc45sF4yWFut/tbl51inE74gEWlB0x/viwG9G4vAjsjQEh4g/recRHSRGnlwoF9u9f?blocks=hide
Describe the bug
A clear and concise description of what the bug is.
https://www.adapacific.org/housing/
In the breadcrumb, the active page text is not read as a separate list item by a screen reader. When the breadcrumb is navigated using arrow keys with a screen reader, the user hears there are 4 items in the list. However, the user only hears three items. The current page is read appended to the prior list item. See video. You will hear "List of Two Items". On press of down arrow key to navigate, you will hear "Topics/Emergency preparedness" as one item. These are expected to be two separate items. See accessible breadcrumb example here: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
Also: https://www.aditus.io/patterns/breadcrumbs/
See working example of an accessible breadcrumb here: https://www.w3.org/standards/types/
Recommendations
Add an tag or at a minimum a
tag or other markup to ensure that the current plain text only is read as a distinct list item. See screenshot which has the
tag added.
Screenshots
If applicable, add screenshots to help explain your problem.