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

Proper coding of the alert dialog and modal behaviors can be helpful to assistive technology users.


Problem: Proper behavior of modals and 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 open, focus trap within the dialog 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 enters data and 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. When the user enters valid data in the field and 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 the example mentioned in the first bullet, when the user enters valid data in the input field and then clicks the Save button, the onblur event is triggered, but the Save button event is ignored.
  • This can be resolved by triggering a mousedown event on the Save button instead of the usual onclick event. However, that renders the Save button unusable by keyboard only users.
    • The use of a mousedown event is not compatible for accessibility compliance.

This link explains it in great detail what has been outlined above: Article explaining onclick and onblur events ordering issues

For more information: