Accessibility and Usability at Penn State

Skip to Demo

Alert Box Examples

Section Content

This page includes working examples of different JavaScript functions relating to alert boxes and is located away from the main site. To return to the main site, go to the Alert Boxes page.

Basic Alert Box

The use of an alert box was once discouraged, but they are actually accessible

Sample Self Check

Click View Answer 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 Anwser element so that keyboard users can continue to navigate through the content as needed.

View the Code

Link Code

The link includes an onClick event which opens an alertbox when it is clicked on or the user clicks the ENTER button. This works because browsers add a keyboard interpretation and also because the A tag includes a dummy href="#" URL. This allows 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.

<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>

Form Button

The code for the button is a FORM element with a LABEL 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>
<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