Breadcrumbs aren't read individually by NVDA

[adamwoodnz]

As explained by @alexstine

This is a Windows-specific bug. Voiceover and Windows screen readers work differently in the way that Voiceover traverses the content one item at a time where NVDA reads the links like a sentence due to the display: inline; set. I think that is okay for breadcrumbs, but to get the best verbosity results, it needs to be "Link 1, Link2, etc." Breadcrumbs can be tricky... I wonder what would happen if we tried rendering them as display: block;. Then there likely would not be a need for the screen reader text anymore.

We should try using display: block breadcrumbs within a flex row container if the attempted fix in WordPress/Learn#1641 doesn't work.

[adamwoodnz]

We should re-test this behaviour with the new theme.

[adamwoodnz]

I've tried testing this with NVDA and the new theme, which uses our shared breadcrumbs block used across all the redesigned sites.

I used D to navigate to the breadcrumb navigation landmark and the whole string was read as follows: 'Breadcrumbs navigation landmark visited link Home slash visited link Courses slash Using the WordPress Data Layer'. Using arrow keys to navigate each section didn't work. It sounds like this is not the ideal behaviour and if so we'll need to create a worg-mu-plugins issue to fix it centrally.

@alexstine does this sound like the next step based on this behaviour?

[alexstine]

@adamwoodnz Looks like the breadcrumbs don't follow the standard unordered list format. I would add them in an unordered list. Something like this as a start.

<ul>
<li><a href="https://learn.wordpress.org">Learn Home<span class="separator" aria-hidden="true"></span></a></li>
<li><a class="current" aria-current="true" href="https://learn.wordpress.org/courses">Courses</a></li>
</ul>

In CSS, you can do your list style type set to none and make sure links remain block, not inline.

Thanks.