Accessible Markup for Yoast Breadcrumbs
Wraps the Yoast SEO breadcrumbs in a nav landmark with an aria-label and uses a separator that screen readers skip, so the trail is announced cleanly.
Opens WPIDE on
Code
// Label read by screen readers and the visible separator.
$wpide_crumb_label = 'Breadcrumb';
$wpide_crumb_sep = '›';
add_filter( 'wpseo_breadcrumb_output_wrapper', function () {
return 'nav';
} );
add_filter( 'wpseo_breadcrumb_output', function ( $output ) use ( $wpide_crumb_label ) {
// Add the aria-label to the opening <nav> tag.
return preg_replace( '/^<nav\b/', '<nav aria-label="' . esc_attr( $wpide_crumb_label ) . '"', (string) $output, 1 );
} );
add_filter( 'wpseo_breadcrumb_separator', function () use ( $wpide_crumb_sep ) {
return '<span class="breadcrumb-sep" aria-hidden="true">' . esc_html( $wpide_crumb_sep ) . '</span>';
} );Notes
Change $wpide_crumb_label or the separator character to suit your site.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.