Page Content

JavaScript Alert Box

Although JavaScript pop-up alert boxes were once discouraged by accessibility experts, modern screen readers and browsers provide excellent support for the basic JavaScript alert box.

See examples of accessible alert boxes on this page.

Alert techniques that can be problematic for accessibility are lightbox overlays alerts or an in-page alert (e.g. one implemented with AJAX). They can be made accessible, but may require ARIA Alerts Role support and should be extensively tested.

Basic Alert Box Code

The use of an alert box was once discouraged, but they are actually accessible in modern screen readers.

Sample Self Check

The following examples are alert boxes which display an answer to a self-check question. One is coded as a link and the other is coded as a button.

Click the View Answer link or button to see answers to the following two questions

1: Penn State policy forbids the use of PDF files. View Answer 


The examples above show the View Answser element as a both a link and a form field button. Both generate an alertbox which includes a close button.

Once the alertbox is closed, the cursor moves to a position after the View Answer element so that keyboard users can continue to navigate through the content as needed.

The link includes an onClick event which opens an alertbox when it is clicked on or the user clicks the ENTER button when the cursor is at the link. This works because browsers add a keyboard interpretation and also because the A tag includes a dummy href=”#” URL. This allows all devices to recognize the link as a link.

Note: When using JavaScript click events, it is important to verify that they also work with a keyboard or add a keyboard version.

Link Code

<a href="#" onClick = "javascript:alert ('False. It only mandates that the PDF be accessible or that there is an accessible format available.')">&nbsp;View Answer&nbsp;</a>

View the Code: Button

The code for the button is a FORM element with the question embedded in a LABEL tag and a button with the an onClick event triggering the alert box. The FORM tag is needed for the screen reader to enter forms mode, but again browsers are adding their own keyboard interpretation of this tag.

Note: When using JavaScript click events, it is important to verify that they also work with a keyboard or add a keyboard version.

Form Button Code

<form>
<label for "va1">2: Usability experts recommend using links versus form elements in a consistent manner.</label>
<input value="View Answer" type="button" id="va1" onClick = "javascript:alert ('True. A consistent interface is more usable for everyone.')" />
</form>

Top of Page