Accessible Wrapper for Rank Math Breadcrumbs
Sets your own aria-label on the Rank Math breadcrumb navigation and wraps the separator so screen readers skip it.
Opens WPIDE on
Code
// Label announced by screen readers.
$wpide_rm_crumb_label = 'Breadcrumb';
add_filter( 'rank_math/frontend/breadcrumb/args', function ( $args ) use ( $wpide_rm_crumb_label ) {
if ( ! is_array( $args ) ) {
return $args;
}
$args['wrap_before'] = '<nav aria-label="' . esc_attr( $wpide_rm_crumb_label ) . '" class="rank-math-breadcrumb"><p>';
$args['wrap_after'] = '</p></nav>';
if ( isset( $args['delimiter'] ) ) {
$args['delimiter'] = '<span class="separator" aria-hidden="true">' . wp_strip_all_tags( $args['delimiter'] ) . '</span>';
}
return $args;
} );Notes
Rank Math's separator setting still controls the character itself.
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.