# 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.

- Type: PHP
- Runs: Frontend only
- Category: [Plugin Integrations](https://wpide.com/library/category/integrations/)
- Tags: yoast, breadcrumbs, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/yoast-breadcrumb-accessible-nav/

## Code

```php
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Accessible Markup for Yoast Breadcrumbs" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/