This post originally appeared on the Yahoo! Accessibility blog.
Practically every web site these days uses some kind of dynamic alerts or dialogs. Typically, messages such as "your settings have been saved", "there was an error loading the content", etc, are called alerts because they require no action from the user (other than clicking the OK button) to dismiss them). Dialogs are message boxes or windows that ask the user to perform an action, e.g. to confirm or cancel something. Dialogs may also offer additional actions such as "never show this again" checkbox.
Alerts and dialogs that are generated by adding or removing HTML nodes in the DOM are called dynamic because their creation does not require full page refresh.
A special attention should be given to making alerts and dialogs accessible for keyboard users and users of screen readers, particularly when your web site is a content-based one.
Following these rules you can make your dynamic alerts and dialogs accessible:
- Place an ARIA role of ALERT or DIALOG on the div that contains either the alert or the dialog, eg
<div id="my_alert" role="alert">
Your settings have been saved
- If the alert or dialog has one or more controls, such as an OK button, the keyboard focus should move to one of them as soon as the window pops up.
- While the user is interacting with the alert or a dialog, you should not allow the tab key to roam anywhere outside of the popup window. This way you will ensure that the user does not activate any other function without dismissing the popup window first.
- When inside the dialog, the keyboard focus should be clearly outlined to indicated the currently-active controls.
- Clearly label your controls. For example, it maybe better to say "Post message" and "Cancel message" as opposed to "OK" and "Cancel".
- When the user dismisses the popup window in any way, the keyboard focus should return to the place where the user was located before the window popped up.
- Remember about the keyboard focus
- Label your controls clearly