Announce what changing?
aria-live="polite" : wait until the user stops interacting
aria-live="assertive" : immediately
aria-relevant : what changes are relevant to announce
aria-atomic : announce everything that is changing within the region (element)
Code forked from Deque University.
<form>
<div class="field">
<label for="message">Your Message:</label>
<textarea id="message" aria-describedby="chars-remaining"></textarea>
</div>
<p id="chars-remaining">
<span id="live-region-text" aria-live="polite">
<span class="count">150</span> characters remaining
</span>
of 150 characters
</p>
</form>
More examples on MDN web docs
wp.a11y.speak()
For example:
In functions.php (or where you store your actions)
add_action( 'wp_enqueue_scripts', 'yourprefix_ajax' );
function yourprefix_ajax() {
// Register the script.
wp_register_script( 'your-prefix-ajax', get_template_directory_uri() . '/assets/js/your-ajax-file.js',
[
'wp-a11y',
],
false,
true
);
// Localization.
wp_localize_script( 'your-prefix-ajax', 'yourData', [
strings' => [
'resultsFound' => esc_html__( 'New results found and displayed in the table below', 'your-theme' )
],
] );
wp_enqueue_script( 'your-prefix-ajax' );
}
In your-ajax-js file
// Announce change of data in the table.
wp.a11y.speak( yourData.strings.resultsFound, 'polite' );
The generated output in the bottom of yout HTML body
<div id="wp-a11y-speak-polite"
aria-live="polite"
aria-relevant="additions text"
aria-atomic="true"
class="screen-reader-text wp-a11y-speak-region">
New results found and displayed in the table below.
</div>
wp.a11y.speak() in the WPa11y handbook