-
Notifications
You must be signed in to change notification settings - Fork 929
Open
Labels
Description
- 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
- Create a page that is a child page of another.
- Add the shortcode [wpseo_breadcrumb] in a shortcode block.
- 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: