Published on December 22, 2016 by Chrome

ARIA Authoring Practices, Alert pattern: goo.gl/8ZnyAH

In previous episodes we covered how to get up and running using screen readers but one question I’ve seen come up is how do I tell a screen reader user about new content that I’ve added to the page dynamically, such as an alert? Today on the show we’ll cover the very basics of the alert role and touch on the topic of ARIA live regions. By the end you should be able to create your first alert that works well in VoiceOver and NVDA!

Watch all A11ycasts episodes: goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Leave a Reply

20 Comments on "Alerts! — A11ycasts #10"

Notify of
avatar

Manuel Matuzovic
Guest
Manuel Matuzovic
2 days 16 hours ago

Thanks for another great video, Rob. I tried to replicate your example and it works with JAWS, NVDA and VoiceOver, but as soon as I hide the alert with a SR friendly technique it only works sometimes with VoiceOver. (codepen.io/matuzo/pen/NddNQB) Do you have an idea why? Thanks!

Николай Марченко
Guest
Николай Марченко
27 days 15 hours ago

Hey, guys! w3c validator tell me warnings like this:The banner role is unnecessary for element header.The navigation role is unnecessary for element nav. (2)The button role is unnecessary for element button.The main role is unnecessary for element main.The contentinfo role is unnecessary for element footer.Do I need to use these attributes, if I use semantically correct tags? Or is it necessary for some special-readers?

Николай Марченко
Guest
Николай Марченко
27 days 13 hours ago

Ok. Thanks, Rob!

Rob Dodson
Guest
Rob Dodson
27 days 13 hours ago

you shouldn't need to use those roles if you're using the correct tags

Adarsh Bhat
Guest
Adarsh Bhat
29 days 10 hours ago

What about Windows – Edge and IE 11?

Rob Dodson
Guest
Rob Dodson
27 days 13 hours ago

For IE11 I believe the most common screen reader is JAWS and I believe this should work there as well.

Wiktor Olejniczak (Witus13)
Guest
Wiktor Olejniczak (Witus13)
29 days 14 hours ago

Does paper-toast Polymer element have that implemented?

Rob Dodson
Guest
Rob Dodson
29 days 13 hours ago

I believe so as it uses iron-a11y-announcer elements.polymer-project.org/elements/iron-a11y-announcer

QbsidianH20
Guest
QbsidianH20
29 days 21 hours ago

Is JS Bin endorsed by Google?

eddie coleman
Guest
eddie coleman
7 days 13 hours ago

QbsidianH20

Rob Dodson
Guest
Rob Dodson
29 days 14 hours ago

hah um I don't know. It's a cool site that I like to use but I don't speak for all of Google

Eimantas Tauklys
Guest
Eimantas Tauklys
30 days 2 hours ago

were you making video in the kindergarden?

Rob Dodson
Guest
Rob Dodson
29 days 13 hours ago

yes

The Best You World
Guest
The Best You World
30 days 5 hours ago

very good.

3m0_Wr3ck
Guest
3m0_Wr3ck
30 days 12 hours ago

nice use of clone ty!

Andrew Gibson
Guest
Andrew Gibson
30 days 13 hours ago

doesn't this mean that client-side routing precludes the inclusion of an alert role within the views dynamically rendered based on client-side routes?

Rob Dodson
Guest
Rob Dodson
27 days 13 hours ago

it really depends on how you're using it, when you're loading in the view and when you're displaying the alert. my advice is test your setup to see

Andrew Gibson
Guest
Andrew Gibson
29 days 13 hours ago

Rob Dodson looks like the DOM element is created in IronA11yAnnouncer.requestAvailability. Does that occur early enough for the Chrome voice over to catch it?

Andrew Gibson
Guest
Andrew Gibson
29 days 13 hours ago

Rob Dodson looks like the DOM element is created in IronA11yAnnouncer.requestAvailability. Does that occur early enough for the Chrome voice over to catch it?

Rob Dodson
Guest
Rob Dodson
29 days 13 hours ago

not necessarily. you could add an alert section to the page shell itself, load the views into the shell, and have them pipe out their alerts. that's what iron-a11y-announcer does I think elements.polymer-project.org/elements/iron-a11y-announcer

wpDiscuz