RE: Modal Dialogs and Close Buttons

SC 3.2.4 suggests you should choose one approach, and use it consistently throughout the application, instead of having some dialogs with “close” buttons and others with “cancel” buttons that perform the same function. I don’t have insight to offer regarding which design should be preferred.

From: Mike Elledge []
Sent: Monday, December 4, 2017 11:59 AM
To: WCAG WG <>
Subject: Modal Dialogs and Close Buttons

Hi Everyone--

Not sure what is considered best practice for this issue.

Convention seems to be that a modal dialog should have an "x" in the upper right hand corner to close a dialog (aka overlay). From a usability perspective, however, it seems that it would be redundant if there is an existing button for "Cancel".

That could make sense; but, it could also be confusing to users if there are other modal dialogs in the application that don't have a "Cancel" button but have an "x".

I've seen pros and cons both ways, including a W3C ARIA modal example that doesn't have an "x" ( ).

In either case I believe the ESC key should act like "Cancel" and return focus to the originating location.

Thoughts? and thanks!



This e-mail and any files transmitted with it may contain privileged or confidential information. It is solely for use by the individual for whom it is intended, even if addressed incorrectly. If you received this e-mail in error, please notify the sender; do not disclose, copy, distribute, or take any action in reliance on the contents of this information; and delete it from your system. Any other use of this e-mail is prohibited.

Thank you for your compliance.


Received on Monday, 4 December 2017 19:13:38 UTC