Alert Dialog Example 1: Number Guessing Game

Example

Example using in-line ARIA markup | HTML source with in-line ARIA
Example using ARIA markup from CLASS attribute information | HTML source of ARIA markup from CLASS attribute

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

Alert Box

No Message

Keyboard Shortcuts

Space, Escape and Enter: Close alert box, focus moves back to text box

ARIA Roles and Properties

role="alertdialog"
States and properties:
- aria-labeledby
- aria-invalid
- aria-hidden

Alert Dialog Example 1: Number Guessing Game

Example

Number Guessing game

Keyboard Shortcuts

ARIA Roles and Properties

ARIA Examples

Alert Role

Alert Dialog Role

Button Role

Checkbox Role

Grid Role

Log Role/Live Regions

Menubar Role

Navigation Roles

Radio Role

Slider Role

Tab Panel Role

Tooltip Role

Tree Role

Related Resources

Bread Crumbs

Alert Dialog Example 1: Number Guessing Game

Example

Number Guessing game

Keyboard Shortcuts

ARIA Roles and Properties

ARIA Examples