Let WordPress Speak
Introducing wp.a11y.speak()
James Jeffrey
de Wit
- Developer at Highforge
- WP a11y team member
- I build
shitstuff
Today in wp.a11y:
- Why should I use it?
- What is it?
- How should I be using it?
- http://bit.ly/wcorl2015
Screenreaders
ARIA
Accessible Rich Internet Applications
ARIA
Helps make dynamic web applications more accessible
- aria-activedescendant
- aria-atomic
- aria-autocomplete
- aria-busy
- aria-checked
- aria-controls
- aria-describedby
- aria-disabled
- aria-dropeffect
- aria-expanded
- aria-flowto
- aria-grabbed
- aria-haspopup
- aria-hidden
- aria-invalid
- aria-label
- aria-labelledby
- aria-level
- aria-live
- aria-multiline
- aria-multiselectable
- aria-orientation
- aria-owns
- aria-posinset
- aria-pressed
- aria-readonly
- aria-relevant
- aria-required
- aria-selected
- aria-setsize
- aria-sort
- aria-valuemax
- aria-valuemin
- aria-valuenow
- aria-valuetext
- aria-activedescendant
- aria-atomic
- aria-autocomplete
- aria-busy
- aria-checked
- aria-controls
- aria-describedby
- aria-disabled
- aria-dropeffect
- aria-expanded
- aria-flowto
- aria-grabbed
- aria-haspopup
- aria-hidden
- aria-invalid
- aria-label
- aria-labelledby
- aria-level
- aria-live
- aria-multiline
- aria-multiselectable
- aria-orientation
- aria-owns
- aria-posinset
- aria-pressed
- aria-readonly
- aria-relevant
- aria-required
- aria-selected
- aria-setsize
- aria-sort
- aria-valuemax
- aria-valuemin
- aria-valuenow
- aria-valuetext
aria-live
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-live
- off (default)
- polite
- assertive
aria-live="polite"
Waits for the user to be idle before announcing updates
aria-live="assertive"
Doesn't care about what the screenreader is doing
(this update is the best update of all time)aria-atomic
Indicates whether assistive technologies will present all, or only parts of, the changed region
aria-atomic
- false (default)
- true
wp.a11y.speak()
- Introduced in WordPress 4.2
- Intended as an easy way to deliver screen reader messages to users
But what does it actually do?
How do I use it?
1. Enqueue
function prefix_a11y() {
// enqueue explicitly
wp_enqueue_script( 'wp-a11y' );
// or implicitly
wp_enqueue_script( 'prefix_script',
get_template_directory_uri() . '/js/script.js',
array( 'wp-a11y' ) );
}
add_action( 'wp_enqueue_scripts', 'prefix_a11y' );
2. Initiate the notification
wp.a11y.speak("this is my fancy notification"[, "assertive"]);
3. ???
4. Profit
Enough talk.
Questions?
The End
