Popups: Native Browser Alerts and Prompts versus Modals

Problem: The text of the Alert is not read properly by JAWS when using Google Chrome (GC).

Solution: Use a Modal instead.

Native Browser Alert Example

Steps to test for accessibility:

1. With this page open, start JAWS screen reader.
2. Navigate to the Save Changes button below, select it.
3. Using Google Chrome, JAWS reads: "Accessibilityuniversity dot dhs dot int dot state dot mn dot us dialog says OK button".
4. Using Firefox, JAWS reads: "Popups: Native Browser Alerts and Prompts versus Modals dash Mozilla Firefox horizontal tab panel dialog your changes have been saved OK press spacebar to activate".

Modal Example

Steps to test for accessibility:

1. With this page open, start JAWS screen reader.
2. Navigate to the Save Changes button below; select it.
3. Using Google Chrome, JAWS reads: "Save Changes Modal Example your changes have been saved OK".
4. Using Firefox, JAWS reads: "Save Changes Modal Example your changes have been saved OK".

Discussion: Modals vs Native Browser Alerts

Native browser alerts and prompts are not recommended due to the lack of control over what is rendered. They are rendered by the browser and accept only the text of the message and button as inputs.

Modals are coded in HTML and allow full control over all parts of the popup, including the ability to embed aria labels.

Coding Modals for accessibility

The use of aria labels should be included in the <div> class tags declaring the Modal: aria-labelledby and aria-describedby.

Code

For more information:

• A good discussion on best practices for modal windows.
• A good discussion on how to code accessible modals, coding included.
• A good discussion on Native Java Script Popups.
• A discussion of the known issue with Jaws reading native alerts and prompts in Chrome.