Skip to content

Shortcode Breadcrumbs not marked up as a nav and decorative elements not hidden from screen reader users #20680

@amberhinds

Description

@amberhinds
  • I've read and understood the contribution guidelines.
  • I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

The breadcrumbs output by the shortcode is not wrapped in a labeled nav tag and the divider elements (which are decorative) are not hidden from screen readers.

To Reproduce

Step-by-step reproduction instructions

  1. Create a page that is a child page of another.
  2. Add the shortcode [wpseo_breadcrumb] in a shortcode block.
  3. Inspect the shortcode

Expected results

This is the expected code:

<div class="entry-content alignfull wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained">
   <nav aria-label="breadcrumbs">
      <span><a href="http://sandbox.local/">Home</a></span><span aria-hidden="true"> » </span><span><a href="http://sandbox.local/sample-page/">Sample Page</a></span><span aria-hidden="true"> » </span><span class="breadcrumb_last" aria-current="page">Child Page</span>
</nav>
</div>

Actual results

This is the code currently being output:

<div class="entry-content alignfull wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"><span><span><a href="http://sandbox.local/">Home</a></span> » <span><a href="http://sandbox.local/sample-page/">Sample Page</a></span> » <span class="breadcrumb_last" aria-current="page">Child Page</span></span>
</div>

Other Notes

This request to switch to using list markup would also be a great accessibility enhancement but is not as urgent as using the proper nav tag.
#5055

Technical info

  • If relevant, which editor is affected (or editors):
  • Block Editor
  • Gutenberg Editor
  • Elementor Editor
  • Classic Editor
  • Other: It's possible it impacts all instances if you reuse this code beyond the shortcode.
  • Which browser is affected (or browsers):
  • Chrome
  • Firefox
  • Safari
  • Other: All

Used versions

  • Device you are using:
  • Operating system:
  • PHP version:
  • WordPress version:
  • WordPress Theme:
  • Yoast SEO version:
  • Gutenberg plugin version:
  • Elementor plugin version:
  • Classic Editor plugin version:
  • Relevant plugins in case of a bug:

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions