Example 1 - Alert role example using an ARIA alert box

Example adapted from OpenAjax Alliance Accessibility Task Force

Number Guessing Game

Instructions: In this game you guess a number between 1 an 10 and then press the "Check My Guess" button to check your responses. An ARIA dialog box will display the results of your guess. To start over again to press the "Play Again" button.

Guess a number between 1 and 10

Example End

Example Description

Type: Best Practice

Simple number guessing game that displays the results of each guess in an ARIA alert box.

Keyboard Support

Tab: Move between guess box and buttons.
Enter: Submit guess or push button.

Example Markup

ARIA 1.0: [aria-invalid]
ARIA 1.0: [aria-labelledby]
ARIA 1.0: [role="alert"]
ARIA 1.0: [role="application"]

Browser Compatibility

osx: Firefox 3.6 (C)
osx: Opera 11.0 (C)
osx: Safari 5.0 (C)
win: Firefox 3.6 (C)
win: Internet Explorer 8.0 (C)
win: Opera 11.0 (C)
win: Safari 5.0 (C)