Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

JavaScript Alert

Problem You want to insert helpful, yet nonessential messages into your document, such as tips or
help. You do not want the alert to be visible unless the reader clicks it. You want an
unobtrusive way to show the reader that the alert is present. You also want the alert to be
accessible to nonsighted users.

Solution To signal the presence of the alert, you can insert a small image following the text for which
you want to supply extra information, or you can style the text. A dotted underline is the
traditional signal that text has extra information associated with it. The image or styled text
signals the presence of an alert. You can put the text of the alert in the JavaScript alert()
function and put the alert function in the image’s onclick attribute. A browser displays the
alert in a pop-up dialog box when the user clicks the image. Screen readers recognize the
onclick attribute and read its contents to the user.

Patterns

HTML

<img class="alert-image" src="FILE.EXT"

onclick="alert('ALERT TEXT');" alt="alert" />

or

<em class="alert" onclick="alert('ALERT TEXT');"> TEXT </em>

CSS
.alert-image { cursor:pointer; }
.alert { cursor:pointer; border-bottom:1px dotted; }

Location This pattern works on any element.^

Limitations onclick is the only event that all major screen readers recognize and handle properly. Other
events require testing for compatibility with screen readers.

Advantages JavaScript alerts can contain several paragraphs of text and stay open as long as the user
wants. This is a significant advantage over the Tooltip Alert design pattern.

Disadvantages Normally putting JavaScript directly in markup is a poor practice. This case is an exception,
because the script is content (a message to the user) and belongs in the content. For this
reason, screen readers are designed to read the contents of onclick attributes.
Pop-up dialog boxes annoy users because they interrupt the workflow. For example, the dialog
box usually opens in the middle of the browser window, taking the user’s eyes away from
where he or she was reading. After having to click the OK button to close the dialog box, the
user has to rescan the text to find the place where he or she was reading.
The dialog box is unpleasant to look at. Its contents cannot be styled, and the dialog box
cannot be styled. And unlike a web page, a user cannot zoom in to make the dialog box’s small
text easier to read.

Tip Most popular JavaScript frameworks and toolkits have ways to create alerts. Since these
usually have much more control over the styling of the alert box, they are more appropriate
than simply using alert(). You can have a look at http://plugins.jquery.com/plugin-
tags/alert for examples of alert plug-ins that work with the jQuery JavaScript toolkit.
The W3C has been working on a new specification called “Web Notifications,” which provides
an API to display simple alerts to users outside of the web page. This spec does not specify
exactly how a user agent should display these notifications, so presentation depends on the
browser, e.g., it might appear at a corner of the user's display, or an area within the chrome of
the user agent, etc. Although this functionality is supported at this time only in Google
Chrome, it will probably become mainstream in the future.

Related to Alert, Inline Alert; Image, Replaced Text (Chapter 14); Event Styling (Chapter 17)