This document provides information about the Acquia Web Governance accessibility check:
If legal financial data is processed, are there safeguards for form submission?
What
For web pages that involve legal agreements, financial transactions, user-controlled data changes, or test submissions, there must be safeguards in place to prevent users from making irreversible mistakes.
At least one of the following must be true:
Submissions are reversible: Users can undo or cancel the submission.
Users can check and correct input errors before submission: Users can review and fix mistakes before the transaction is finalized.
A confirmation step is provided: Users can review, confirm, or correct details before they submit the data.
These safeguards prevent accidental errors that can lead to financial loss, legal issues, or loss of critical data.
Why
This section provides information about why this criteria is important.
Without error prevention mechanisms, users might:
Accidentally submit incorrect financial details, which can lead to payment errors.
Make irreversible legal commitments without proper review.
Lose important user-generated data without a way to recover it.
Who
This check affects users with:
Cognitive disabilities: Who can find complex forms and transactions difficult. Give users a chance to review and confirm transaction details to ensure accessibility and usability.
Examples
This section provides some pass and fail examples for this criteria.
Pass examples
Provide a way for users to undo a submission
Implementation: A cancellation window for financial transactions.
<p>Your payment has been submitted. You have 30 minutes to cancel this transaction.</p>
<button onclick="cancelTransaction()">Cancel Payment</button>
Why this works:
The transaction is reversible within a time limit.
Provide a review and confirmation step before final submission
Implementation: A review page before the user submits a loan application.
<h2>Review Your Application</h2>
<p>Please check your details before submitting:</p>
<ul>
<li>Name: John Doe</li>
<li>Email: [email protected]</li>
<li>Loan Amount: $10,000</li>
</ul>
<button onclick="goBack()">Edit Information</button>
<button onclick="submitApplication()">Confirm and Submit</button>
Why this works:
Users can review and correct errors before they finalize the transaction.
Highlight errors before submission
Implementation: Validate the user input and provide clear error messages.
<form onsubmit="return validateForm()">
<label for="credit-card">Credit Card Number:</label>
<input type="text" id="credit-card" name="credit-card" required>
<span id="card-error" style="color: red;"></span>
<button type="submit">Submit Payment</button>
</form>
<script>
function validateForm() {
let cardNumber = document.getElementById("credit-card").value;
if (cardNumber.length !== 16) {
document.getElementById("card-error").innerText = "Credit card number must be 16 digits.";
return false;
}
return true;
}
</script>
Why this works:
Users must correct errors before they can submit the form, which can prevent costly mistakes.
Fail examples
No option to cancel a financial transaction
Problem: A user accidentally sends money with no way to undo it.
<p>Your payment has been processed.</p>
Issue:
There is no option to cancel or undo the transaction.
Fix:
Allow users to cancel within a time limit or add a review step before the final submission.
No review step before a legal agreement
Problem: Clicking Agree immediately submits a legally binding contract.
<input type="checkbox" id="agree"> I agree to the terms
<button type="submit">Submit</button>
Issue:
Users cannot review the agreement before submission.
Fix:
Add a review page before finalizing the agreement.
No validation for critical input fields
Problem: A form allows submission with incomplete or incorrect data.
Users can submit an empty or incorrect email, which can cause issues.
Fix:
Add real-time validation and display errors before submission.
How
This section provides instructions on how to review and fix the issue.
How to review it
Determine if the page includes legal, financial, or user-controlled data transactions.
Examples: Payments, legal agreements, saving personal data, test submissions. If the page includes any of the above:
Check if the page provides any of the following safeguards: ✅ Users can cancel or undo their submission. ✅ Users can review and correct errors before submission. ✅ A confirmation step allows users to verify their data before they finalize the transaction.
Test error handling:
Enter incorrect data and verify whether the system prevents submission until the errors are corrected.
Check if error messages provide clear guidance on how to fix mistakes.
Confirm assistive technology support:
Use a screen reader to verify that error messages and confirmation steps are accessible.
How to fix it
This section provides some ways to correct the issue.
Allow users to cancel transactions within a time window
Example: You have 30 minutes to cancel this order.
Provide a review step before submission
Example: Please review your details before submitting.
Validate user input and display errors before submission
Example: Show real-time error messages for incorrect credit card numbers or missing fields.
Use ARIA live regions for error messages
<div role="alert" aria-live="assertive">
Error: Please enter a valid phone number.
</div>
Why this works: Errors are immediately announced to screen reader users.
If legal financial data is processed, are there safeguards for form submission?
3.3.4 Error Prevention (Legal, Financial, Data)
Introduction
This document provides information about the Acquia Web Governance accessibility check:
If legal financial data is processed, are there safeguards for form submission?
What
For web pages that involve legal agreements, financial transactions, user-controlled data changes, or test submissions, there must be safeguards in place to prevent users from making irreversible mistakes.
At least one of the following must be true:
Submissions are reversible: Users can undo or cancel the submission.
Users can check and correct input errors before submission: Users can review and fix mistakes before the transaction is finalized.
A confirmation step is provided: Users can review, confirm, or correct details before they submit the data.
These safeguards prevent accidental errors that can lead to financial loss, legal issues, or loss of critical data.
Why
This section provides information about why this criteria is important.
Without error prevention mechanisms, users might:
Accidentally submit incorrect financial details, which can lead to payment errors.
Make irreversible legal commitments without proper review.
Lose important user-generated data without a way to recover it.
Who
This check affects users with:
Cognitive disabilities: Who can find complex forms and transactions difficult. Give users a chance to review and confirm transaction details to ensure accessibility and usability.
Examples
This section provides some pass and fail examples for this criteria.
Pass examples
Provide a way for users to undo a submission
Implementation: A cancellation window for financial transactions.
<p>Your payment has been submitted. You have 30 minutes to cancel this transaction.</p>
<button onclick="cancelTransaction()">Cancel Payment</button>
Why this works:
The transaction is reversible within a time limit.
Provide a review and confirmation step before final submission
Implementation: A review page before the user submits a loan application.
<h2>Review Your Application</h2>
<p>Please check your details before submitting:</p>
<ul>
<li>Name: John Doe</li>
<li>Email: [email protected]</li>
<li>Loan Amount: $10,000</li>
</ul>
<button onclick="goBack()">Edit Information</button>
<button onclick="submitApplication()">Confirm and Submit</button>
Why this works:
Users can review and correct errors before they finalize the transaction.
Highlight errors before submission
Implementation: Validate the user input and provide clear error messages.
<form onsubmit="return validateForm()">
<label for="credit-card">Credit Card Number:</label>
<input type="text" id="credit-card" name="credit-card" required>
<span id="card-error" style="color: red;"></span>
<button type="submit">Submit Payment</button>
</form>
<script>
function validateForm() {
let cardNumber = document.getElementById("credit-card").value;
if (cardNumber.length !== 16) {
document.getElementById("card-error").innerText = "Credit card number must be 16 digits.";
return false;
}
return true;
}
</script>
Why this works:
Users must correct errors before they can submit the form, which can prevent costly mistakes.
Fail examples
No option to cancel a financial transaction
Problem: A user accidentally sends money with no way to undo it.
<p>Your payment has been processed.</p>
Issue:
There is no option to cancel or undo the transaction.
Fix:
Allow users to cancel within a time limit or add a review step before the final submission.
No review step before a legal agreement
Problem: Clicking Agree immediately submits a legally binding contract.
<input type="checkbox" id="agree"> I agree to the terms
<button type="submit">Submit</button>
Issue:
Users cannot review the agreement before submission.
Fix:
Add a review page before finalizing the agreement.
No validation for critical input fields
Problem: A form allows submission with incomplete or incorrect data.
Users can submit an empty or incorrect email, which can cause issues.
Fix:
Add real-time validation and display errors before submission.
How
This section provides instructions on how to review and fix the issue.
How to review it
Determine if the page includes legal, financial, or user-controlled data transactions.
Examples: Payments, legal agreements, saving personal data, test submissions. If the page includes any of the above:
Check if the page provides any of the following safeguards: ✅ Users can cancel or undo their submission. ✅ Users can review and correct errors before submission. ✅ A confirmation step allows users to verify their data before they finalize the transaction.
Test error handling:
Enter incorrect data and verify whether the system prevents submission until the errors are corrected.
Check if error messages provide clear guidance on how to fix mistakes.
Confirm assistive technology support:
Use a screen reader to verify that error messages and confirmation steps are accessible.
How to fix it
This section provides some ways to correct the issue.
Allow users to cancel transactions within a time window
Example: You have 30 minutes to cancel this order.
Provide a review step before submission
Example: Please review your details before submitting.
Validate user input and display errors before submission
Example: Show real-time error messages for incorrect credit card numbers or missing fields.
Use ARIA live regions for error messages
<div role="alert" aria-live="assertive">
Error: Please enter a valid phone number.
</div>
Why this works: Errors are immediately announced to screen reader users.
Web Governance