Accessibility - Breadcrumb navigation

anormand commented 7 years ago

Expected behaviour

As a screen reader user, I need to know that the list of breadcrumbs is a navigation item, so that I can understand it's purpose.

Actual behaviour

The screen reader reads the breadcrumbs as a list.

Steps to reproduce

The current code is:

<ol class="page-local-history" itemscope="" itemtype="http://schema.org/BreadcrumbList">

NVDA reads it as:

list with 3 items clickable Web.Unimelb visited link

Suggested code:

<ol class="page-local-history" itemscope="" itemtype="http://schema.org/BreadcrumbList" role="navigation" aria-label="breadcrumb">

NVDA will read it as:

breadcrumb navigation landmark list with 3 items Web.Unimelb visited link

waitingallday commented 7 years ago

Will definitely include this in the next release!

anormand commented 7 years ago

Excellent, we will be deploying this in the next release of ServiceNow

axelboc commented 7 years ago

I went a slightly different route: I've used a nav element instead of a div for page-header-navigation (which wraps page-local-history). This has a few advantages:

it makes use of the implicit aria role of nav
it is consistent with your recommendation regarding page-header-tools
it wraps the mobile breadcrumbs navigation as well
page-header-navigation is created by the injection script, whereas page-local-history is part of the markup people have to write themselves -- so we avoid a breaking change

axelboc commented 7 years ago

For reference the new markup is:

<nav class="page-header-navigation" aria-label="breadcrumbs">
  <ol class="page-local-history">...</ol>
</nav>

unimelb / unimelb-design-system