WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Time-out modal with alertdialog

for

From: Bryan Garaventa
Date: Jul 3, 2015 5:31PM

Technically the alertdialog role should fire a system alert when the container is added to the DOM via element.appendChild/replaceChild or element.innerHTML, or when switched into visibility by changing display:none to 'block' or 'inline'.

This might not be working properly though.

Try putting role="alert" on the parent Div, and change the dynamically added container from role="alertdialog" to role="dialog" and see what happens when this is added to the Alert container element.

It will be important to set all of the required attributes however, such as those documented at
http://whatsock.com/training/matrices/#dialog
And to follow the correct setting of focus when it opens.

There is no need to set tabindex="0" on the parent Dialog container, since it's the active elements within that should be focusable. E.G the OK button or whatever. If you need to set focus to a Dialog container, it works better to use tabindex="-1", then manage focus using forward and reverse circular tabbing within the dialog from that point on.

Hopefully this helps a bit.

Best wishes,
Bryan

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Sean Keegan
Sent: Friday, July 03, 2015 12:57 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Time-out modal with alertdialog

I am working on a time-out modal that is triggered after 10 minutes of no activity within an application. There is an empty parent <div> into which the time out modal is loaded when the time limit is triggered. This modal is comprised of a descendent <div> with role=alertdialog and tabindex=0.

During testing, I noticed JAWS and NVDA will announce the modal window if focus is on an input field, the user is typing, or if there is no activity by the user when the time period elapses. However, if navigating the page using the virtual buffer commands (such as a Say All), there is no notification to the user by the screen-reader that the modal has been triggered.

A colleague and I are debating the role=alertdialog and if there may need to be a more assertive notification when the time out modal is triggered.
Would adding aria-live=assertive to a <div> that already contains role=alertdialog be redundant or should the aria-live property be applied to the parent <div> so that it can monitor all descendents?

Take care,
Sean