VGAR Interaction Requirements
Requirements
Interaction
- Accessible Forms (INT-001)
- Error Messaging (INT-002)
- System Messages (INT-003)
- Modal Windows (INT-004)
- Onchange / Onfocus (INT-005)
- Buttons and Links (INT-006)
- Control Moving Content (INT-007)
- No Blinking/Flashing (INT-008)
- Give Users Time (INT-009)
- Custom Controls (INT-010)
- Diverse User Needs and Preferences (INT-011)
System Messages (INT-003)
Provide robust system messages that alert and inform
When system messages are used they must include the role=”status” aria attribute and the aria-live=”assertive” attribute on the message container when it is added to the DOM.
System messages should only be added to the DOM after a button press or on page load so that they do not interrupt the user experience. The aria-live=”assertive” attribute will cause interruption if the message is added to the DOM before the user expects it.
Requirements
System Messages role="status" (INT-WEB-003-01)
System messages and success messages MUST include the ARIA role="status" attribute on the message container when it is added to the DOM. The aria-live="assertive" attribute MAY also be used for critical information.
<div id="sysMsg" class="system-message" style="display: none;"></div>
$('#sysMsg').text(/* error from system */).css('display', 'block').attr({
'role': 'status',
'aria-live': 'assertive'
});
System Messages after Submit (INT-WEB-003-02)
To ensure that aria-live=”assertive” does not cause messages to interrupt users, system and success messages SHOULD only be added to the DOM after a button press or on page reload.
$('button#submit').click(function(){
$('#sysMsg').text(/* system message */).css('display', 'block').attr({
'role': 'status',
'aria-live': 'assertive'
});
});
Test Procedures
Screen reader (INT-WEB-003-01-T)
Confirm that the contents of system and success messages are read aloud to the user when they appear.
Keyboard (INT-WEB-003-02-T)
Confirm that system and success messages are only presented to users after a button press or on page load.
Related Content
WCAG Success Criteria
W3C Techniques
- ARIA18: Using aria-alertdialog to identify errors
- ARIA19: Using ARIA role=alert or live regions to identify errors
- ARIA21: Using aria-invalid to indicate an error field
- H89: Using the title attribute to provide context-sensitive help
- SCR18: Providing client-side validation and alert
- SCR32: Providing client-side validation and adding error text via the DOM
- G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
- G71:Providing a help link on every web page
- G83: Providing text descriptions to identify required fields that were not completed
- G84: Providing a text description when the user provides information that is not in the list of allowed values
- G85: Providing a text description when user input falls outside the required format or values
- G98: Providing the ability for the user to review and correct answers before submitting
- G99: Providing the ability to recover deleted information
- G139: Creating a mechanism that allows users to jump to errors
- G155: Providing a checkbox in addition to a submit button
- G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request
- G168: Requesting confirmation to continue with selected action
- G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
- G193: Providing help by an assistant in the web page
- G194: Providing spell checking and suggestions for text input
- G177: Providing suggested correction text
- G199: Providing success feedback when data is submitted successfully
These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information. You should not act or rely on such content without seeking the advice of a professional. All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.