Web Accessibility Guidelines: “Error Prevention (All)” and How to Implement It

In the realm of web development, ensuring that users can interact with web services smoothly and securely is essential. One of the important web accessibility guidelines is “Error Prevention (All).” This guideline focuses on preventing errors that users may make during input or interactions, allowing them to use web services with peace of mind. Particularly in operations related to legal, financial, or data input areas, errors can have severe consequences, such as affecting personal information or assets. Therefore, effective error prevention measures are crucial.

In this article, we will explain specific methods to prevent errors and their importance.

Why is Error Prevention Important?

Error prevention measures are essential to ensure users can interact with web services confidently. If errors are not prevented in certain cases, users may face increased burdens and risks, especially in the following scenarios:

• Risk of incorrect information input: If critical information like address or financial data is entered incorrectly and not corrected, it may result in issues like wrong deliveries or payment errors.
• Preventing data loss: Incorrect operations leading to data loss can result in significant setbacks and trouble for users.
• Preventing errors in legal processes: Inaccurate information related to contracts or agreements can lead to legal risks.

Specific Methods for Error Prevention Implementation

1. Implement a Confirmation Screen

After input is completed, provide a confirmation screen so users can verify the entered information. For critical data such as payment information or addresses, it’s essential to prompt users for confirmation before final submission.

<form action="/submit" method="post">
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="address" placeholder="Address">
  <button type="button" onclick="confirmDetails()">Confirm</button>
</form>
<script>
  function confirmDetails() {
    alert("Please confirm your entered details.");
  }
</script>

2. Automatic Input Format Checking

Add functionality to check the input format in real-time once the user has finished entering their data. This is especially useful for information that requires a specific format, such as phone numbers or postal codes.

<input type="text" id="phone" placeholder="Phone number (e.g., 08012345678)" oninput="validatePhone()">
<script>
  function validatePhone() {
    const phoneInput = document.getElementById("phone");
    const phonePattern = /^[0-9]{11}$/;
    if (!phonePattern.test(phoneInput.value)) {
      phoneInput.setCustomValidity("Please enter a valid phone number.");
    } else {
      phoneInput.setCustomValidity("");
    }
  }
</script>

3. Provide Undo and Edit Options

To prevent mistakes, offer undo and edit options. For example, when users press the “Delete” or “Cancel” button, display a confirmation popup to prevent accidental actions.

<button onclick="confirmDelete()">Delete</button>
<script>
  function confirmDelete() {
    if (confirm("Are you sure you want to delete?")) {
      // Deletion process
    }
  }
</script>

4. Provide Input Guidelines

When users input data, displaying example formats or hints in the form fields helps prevent errors. For instance, showing the format “YYYY/MM/DD” for date inputs will help users enter data correctly.

<input type="text" placeholder="Date of birth (e.g., 1990/01/01)">

Accessibility Features Supporting Error Prevention

Using ARIA Attributes To ensure screen readers can communicate error messages to users, it is recommended to use aria-live and aria-describedby attributes. This ensures that users with visual impairments can access error information in real-time.

<input type="text" aria-describedby="error-message">
<span id="error-message" aria-live="assertive">This field is required</span>

Conclusion

By meeting the “Error Prevention (All)” criterion, users can use services with confidence, preventing losses and troubles caused by incorrect operations. Implementing confirmation screens, input checks, and undo functionality will also enhance the user experience.

Error prevention efforts are key to improving web accessibility and ensuring websites are usable by everyone. As we continue developing websites, it’s crucial to actively incorporate error prevention measures.

Thank you for reading this article.