Lightboxes and In-Page Alerts
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.
View the Code: Link
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.
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.
Form Button Code
<label for "va1">2: Usability experts recommend using links versus form elements in a consistent manner.</label>