SOLVED: Breadcrumb separator a11y improvement

Feature Requests / Improvements
1

Hello,

Not a a11y expert at all, but I just remarked the following:

Seems that separator in breadcrumb should be implemented by css or alternatively (as there are icons) should be excluded from screen readers since they are decorative therefore should get the attribute aria-hidden=”true” otherwise they would be taken into account by screen readers.

minimum:

  • add aria-hidden="true" on <span class="separator">.

but if possible:

  • also on <svg> : aria-hidden="true" focusable="false" role="presentation".

Please check and review.

Reference:

https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/

Thank you

1 Like
2

Hello,

I know this is included in feature requests / improvements so it is less critical than a ‘bug’ or ‘how to’ categories. But still, it could improve the situation (if I am correct, again, I am no a11y fluent) therefore a feedback would be welcome.

Many thanks in advance.

3

Hi @tibo ,

Thanks for highlighting that. We will improve the A11y of the breadcrumbs separator node by adding the aria-hidden=“true” on the separator span and also the icon

Regards,
Jenn

1 Like
4

We fixed this issue in Bricks 2.3, now available as a one-click update in your WordPress Dashboard.

Please read the changelog entry before updating, and let us know if you continue to experience issues.

1 Like