Pan of gold nuggets Data Validation Modal Behaviors Pan of gold nuggets

Proper coding of alert dialogs and modals behaviors can be helpful to assistive technology users


Problem: Proper behavior of modals (alerts dialogs) when validating data is challenging.

Solution: Properly code for maximum accessibility and usability.

In this scenario, the Last Name input text field is a required field.

Maximum length is 50 characters, alphanumeric and special characters are allowed.





Gold nuggetModal Example

Important considerations for alerts and modals

  1. Markup (code) the Dialog and Dialog Overlay Appropriately (provide title, button and proper onClose event)
  2. On Dialog Open, Set Focus
  3. On Dialog Close, Return Focus to the Last Focused Element invalid data input field, or Save button
  4. While Open, Focus Trap to Prevent Tabbing to Outside the Dialog

Important considerations for data validation

In the example above, the data validation is performed when the user selects the save button. Can data be validated when the user places focus on the field, then tabs or clicks away from the field? In this development framework, the answer is no, it is not recommended to validate the input field when it loses focus. The reason for this recommendation is a bit complicated. The event that is used to trigger data validation when losing focus is called the onblur event. If, the user enters valid data in the field, and then clicks the Save button or tabs off the field, the onblur event is triggered, this event will interfere with the next event. This is due to the order of events in the DOM. For example, if the user enters valid data in the input field, then clicks the Save button, the onblur is triggered, but the click on the Save button is ignored. This can be resolved by triggering a mousedown event on the Save button instead of the usual onclick event, but that renders the button unusable by keyboard only users. The use of a mousedown event is not compatible for accessibility compliance.
This discussion explains it in great detail: Article explaining onclick and onblur events ordering issues


For more information: