ARIA AlertDialog

Alert dialogs are used to convey messages to alert the user. The alertdialog role goes on the node containing both the alert message and the rest of the dialog. Content authors SHOULD make alert dialogs modal by ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.

Unlike alert, alertdialog can receive a response from the user. For example, to confirm that the user understands the alert being generated. When the alert dialog is displayed, authors SHOULD set focus to an active element within the alert dialog, such as a form edit field or an OK button. The user agent SHOULD fire a system alert event through the accessibility API when the alert is created, provided one is specified by the intended accessibility API.

Authors SHOULD use aria-describedby on an alertdialog to point to the alert message element in the dialog. If they do not, assistive technologies will resort to their internal recovery mechanism to determine the contents of an alert message.

Once the “Alert” button is pressed, dynamic text is visually surfaced. The JAWS screen reader reads “Dialog” to annouce it is has role=alertdialog applyed. Then Jaws will read the contents of the Title and Description as declared by aria-describedby ="title desc"

The class="hidden" is used as aria-hidden="true" is not implemented yet in FF4 or IE9.

Example 1:

aria-hidden="true"
class="hidden"
aria-describedby ="title desc"
role="alertdialog"
tabindex="-1"
style="border: 1px solid #000000;
margin: 1em 0;
text-align: center;
width: 250px;"
>
ARIA alertdialog
Lorem ipsum dolor sit amet, consectetur adipisicing elit,

Code


function ARIA_AlertDialogOn() {
	document.getElementById("alert").setAttribute("class","not_hidden");
	document.getElementById("alert").setAttribute("aria-hidden","false");
	document.getElementById("close").focus();
}
function ARIA_AlertDialogOff() {
	document.getElementById("alert").setAttribute("class","hidden");
	document.getElementById("alert").setAttribute("aria-hidden","true");
	document.getElementById("alertButton").focus();
}

<div  id="alert"
    aria-hidden="true" 
    class="hidden"
    aria-describedby ="title desc"
    role="alertdialog" 
    tabindex="-1" 
    style="border: 1px solid #000000;
    margin: 1em 0;
    text-align: center;
    width: 250px;"
>
<div id="title">ARIA <code>alertdialog</code></div>
<div id="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</div>
<button id="close"  onClick="ARIA_AlertDialogOff();">Close</button>
</div>

Works With

role=alertdialog
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Comments are closed.