WCAG 3.3.3 Error Suggestion — Testing Guide for Mobile & Web Apps

WCAG 3.3.3, "Error Suggestion," is a critical success criterion for making digital products usable by everyone, particularly those who encounter errors. It mandates that when an error occurs, your app

Ensuring Clear Error Guidance: A Practical Guide to WCAG 3.3.3

WCAG 3.3.3, "Error Suggestion," is a critical success criterion for making digital products usable by everyone, particularly those who encounter errors. It mandates that when an error occurs, your application should not just inform the user about the mistake but also provide helpful suggestions on how to correct it. This goes beyond simply stating "Invalid input."

What WCAG 3.3.3 Requires

In straightforward terms, WCAG 3.3.3 means that if a user makes a mistake when entering information, your application must:

• Identify the error: Clearly indicate which input field or section has the problem.
• Suggest a correction: Offer concrete advice on how to fix the error. This could be a specific format, a valid range, or a missing required piece of information.
• Provide suggestions automatically: The suggestion should be readily available without requiring the user to navigate away or perform additional complex actions.

This criterion aims to reduce user frustration and prevent them from abandoning tasks due to unresolvable errors. It's a core component of making digital experiences accessible and user-friendly, aligning with mandates like the EU's European Accessibility Act (EAA) and the Americans with Disabilities Act (ADA) in the US.

Why WCAG 3.3.3 Matters: Real User Impact

Failure to meet WCAG 3.3.3 disproportionately affects users who may have cognitive disabilities, learning differences, or simply less technical proficiency. Imagine a user with dyslexia struggling to understand an error message like "Syntax error in field 7." Without clear guidance, they might be completely lost.

• Cognitive Disabilities: Users with conditions like ADHD or intellectual disabilities may find it challenging to interpret abstract error messages or recall specific formatting rules. Clear, actionable suggestions are vital.
• Low Vision/Blindness: While screen readers announce errors, without specific suggestions, users relying on assistive technology might not understand *how* to fix the problem.
• Novice Users: Individuals new to technology or a specific application can be easily discouraged by vague error messages, leading to task abandonment.
• Elderly Users: Those with age-related cognitive or visual impairments benefit greatly from explicit, easy-to-follow instructions.
• Anyone Under Pressure: Even experienced users can make typos or forget details. Helpful suggestions reduce stress and improve efficiency for all.

Providing error suggestions isn't just about compliance; it's about building empathetic products that work for a broader audience.

Common Violations with Examples

Many applications fall short of this criterion by providing unhelpful or missing error guidance.

#### Mobile Application Examples

1. Password Field Error:

• Violation: User enters a password shorter than 8 characters. The app displays: "Error: Invalid Password."
• Impact: The user doesn't know what's wrong. Is it too short? Too long? Does it need special characters?

1. Date Picker Error:

• Violation: User manually types an invalid date format (e.g., "31/02/2024") into a date field. The app displays: "Invalid Date."
• Impact: The user is left guessing the correct format (MM/DD/YYYY, DD-MM-YYYY, etc.).

1. Form Submission Error:

• Violation: User submits a form with a required field missing (e.g., "Phone Number"). The app highlights the field red but provides no text explanation.
• Impact: The user might not notice the highlighted field or understand *why* it's an error.

#### Web Application Examples

1. Email Address Field:

• Violation: User enters "john.doe@domain" (missing the top-level domain). The app displays: "Please enter a valid email address."
• Impact: The suggestion is too generic. It doesn't point out the missing ".com" or similar.

1. Credit Card Number Field:

• Violation: User enters a credit card number with spaces or dashes. The app displays: "Invalid card number."
• Impact: The user doesn't know if they should remove spaces, use a specific format, or if the number itself is incorrect.

How to Test for Compliance

Testing for WCAG 3.3.3 requires a combination of manual checks and leveraging automated tools.

#### Manual Testing Steps

1. Identify all input fields: Go through your application and list every field where a user can enter data (text fields, dropdowns, checkboxes, radio buttons, date pickers, etc.).
2. Trigger errors deliberately: For each input field, try to deliberately cause an error. This includes:

• Entering invalid data types (e.g., letters in a number field).
• Entering data in the wrong format (e.g., incorrect date, email, or phone number format).
• Leaving required fields blank.
• Entering data outside of acceptable ranges or lengths.
• Submitting forms with errors.

1. Observe error messages:

• Is an error message displayed?
• Is the error clearly associated with the problematic input? (e.g., a label next to the field, an inline message).
• Does the error message suggest a correction? Is it specific and actionable?
• Is the suggestion provided automatically? Or does the user need to click something or perform another action to get it?

1. Test with different user personas: Consider how a "novice" user, an "elderly" user, or a "power user" might interact with error messages. A power user might want a quick hint, while a novice needs a more detailed explanation.

#### Automated Tools

While fully automating the *suggestion* part of WCAG 3.3.3 is complex, automated tools can detect many underlying issues that lead to errors and can flag fields that *might* need better guidance.

• SUSA (SUSATest): As an autonomous QA platform, SUSA can explore your application, identify input fields, and trigger error conditions. It can then analyze the resulting messages for clarity and helpfulness, and importantly, it auto-generates regression test scripts to ensure these issues don't reappear.
• Browser Developer Tools: For web applications, browser developer tools can help inspect form validation logic and error message display.
• Accessibility Scanners (e.g., Axe, WAVE): These tools can identify a range of accessibility issues, including some related to form validation and error handling, though they might not always catch the nuance of suggestion quality.

#### Mobile-Specific Considerations (Android/iOS)

• Input Masks: Ensure that input masks (like for phone numbers or credit cards) provide clear visual cues about the expected format, and that any errors triggered by incorrect input are accompanied by suggestions on how to correct the format.
• Keyboard Types: Using appropriate keyboard types (numeric, email, phone) can proactively reduce errors, but when errors do occur, the guidance remains crucial.
• Native Error Handling: Be mindful of how native Android and iOS error handling mechanisms are implemented. Ensure they are overridden or enhanced to provide the required suggestions.

How to Fix Violations

Fixing WCAG 3.3.3 violations involves refining your error handling to be more informative and helpful.

1. Be Specific: Instead of "Invalid email," use "Please enter a valid email address, for example, name@example.com."
2. Provide Format Examples: For dates, phone numbers, or specific codes, show the expected format: "Enter your phone number in the format XXX-XXX-XXXX."
3. Indicate Missing Information: If a required field is blank, state it clearly: "This field is required. Please enter your company name."
4. Suggest Valid Ranges/Options: For numerical inputs, specify the acceptable range: "Please enter a quantity between 1 and 10." For dropdowns, ensure the options themselves are clear.
5. Use Inline Validation with Clear Messages: Display error messages directly next to the relevant field as soon as an error is detected, rather than waiting for form submission.

#### Code Examples (Conceptual)

Web (JavaScript Example):

const emailInput = document.getElementById('email');
const emailError = document.getElementById('email-error');

emailInput.addEventListener('blur', () => {
  const emailValue = emailInput.value;
  // Basic email format check (more robust validation needed)
  if (!emailValue.includes('@') || !emailValue.includes('.')) {
    emailError.textContent = "Invalid email format. Please use 'name@domain.com'.";
    emailInput.classList.add('error');
  } else {
    emailError.textContent = '';
    emailInput.classList.remove('error');
  }
});

Mobile (Conceptual Android - Kotlin):

val passwordEditText: EditText = findViewById(R.id.passwordEditText)
val passwordInputLayout: TextInputLayout = findViewById(R.id.passwordInputLayout)

passwordEditText.addTextChangedListener(object : TextWatcher {
    override fun afterTextChanged(s: Editable?) {
        if (s != null && s.length < 8) {
            passwordInputLayout.error = "Password must be at least 8 characters long."
        } else {
            passwordInputLayout.error = null
        }
    }
    // ... other TextWatcher methods
})

How SUSA Checks This Criterion

SUSA autonomously explores your application, acting as multiple user personas, including those who are likely to make mistakes or need clear guidance.

• Autonomous Exploration: SUSA uploads your APK or web URL and navigates through your application. It intelligently identifies input fields and attempts various data entries.
• Persona-Based Testing: By simulating users like the "novice," "elderly," and "curious" personas, SUSA is more likely to trigger common user errors.
• Error Detection: SUSA captures crashes, ANRs, and identifies UX friction points, including unhelpful error messages.
• Flow Tracking: It specifically tracks critical user flows like registration and checkout. If an error prevents a user from completing these flows, SUSA flags it.
• WCAG 2.1 AA Compliance: SUSA incorporates WCAG 2.1 AA testing, which includes checks for error handling and clear labeling.
• Cross-Session Learning: With each run, SUSA learns more about your application's behavior, improving its ability to find and report on error-handling issues.
• Auto-Generated Regression Scripts: Crucially, SUSA auto-generates Appium (Android) and Playwright (Web) scripts. This means that once an error suggestion issue is identified and fixed, SUSA can automatically re