WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: what roles will make a pop up dialog work

for

From: Bryan Garaventa
Date: Oct 7, 2014 5:07PM

If this is a modal, the simplest way is to use the focus() method to set focus to the beginning of the dialog region, and use
aria-hidden on each of the firstChild nodes in the body excluding the dialog div, so that the back ground is hidden from screen
reader users. This way you will only see the modal content and none of the background content. Then simply confine keyboard focus
within the active elements in the dialog, and provide a method to close it. When closed set focus back to the triggering element,
and set all previously set aria-hidden attributes to 'false'.

If this is a simple dialog and you don't want to hide the background content, the focus() method should set focus to the beginning
of the dialog content.

You can use role=dialog or role=alertdialog, but keep in mind this will restrict initial keyboard focus to only active elements
using NVDA until it is aborted.