Handling Application Errors: An Accessibility Perspective

Shawn Sandy (Ally.Cafe) ~ July 10, 2024

Introduction

Handling application errors in a web application is a crucial aspect of ensuring a positive user experience. When errors are not communicated effectively, users can become confused, frustrated, and unable to complete tasks. For users with disabilities, properly managing and communicating errors is even more critical. This article will explore the relevant Web Content Accessibility Guidelines (WCAG) 2.2, ARIA (Accessible Rich Internet Applications) practices, and best practices for handling both single and multiple application errors to ensure your web application is accessible to all users.

Understanding WCAG 2.2 Guidelines

WCAG 2.2 provides a set of guidelines to make web content more accessible. The guidelines are organized under four principles: Perceivable, Operable, Understandable, and Robust (POUR). For handling application errors, the most relevant guidelines fall under the “Understandable” principle:

Guideline 3.3: Input Assistance
- Success Criterion 3.3.1: Error Identification (Level A)
- Success Criterion 3.3.2: Labels or Instructions (Level A)
- Success Criterion 3.3.3: Error Suggestion (Level AA)
- Success Criterion 3.3.4: Error Prevention (Legal, Financial, Data) (Level AA)

These criteria focus on ensuring that errors are identified, and instructions or suggestions are provided to help users correct them.

Why These Guidelines Matter

Proper error handling ensures that all users, including those with disabilities, can understand and resolve errors that occur during their interactions with your web application. For instance, a screen reader user should be able to understand what went wrong and how to fix it without requiring sighted assistance.

ARIA Practices for Error Handling

ARIA provides roles, states, and properties to enhance the accessibility of web applications. For error handling, the following ARIA practices are particularly useful:

ARIA Role: alert
- Used to inform users of important messages, such as errors.
ARIA Property: aria-live
- Controls how updates to the region are announced by screen readers.
ARIA Property: aria-describedby
- Associates form fields with error messages for better context.

Best Practices for Handling Application Errors

Clear and Specific Error Messages
- Ensure error messages are clear, specific, and provide actionable instructions.
```
<div role="alert" aria-live="assertive">
    Your password must be at least 8 characters long.
</div>
```

Error Message Placement

Place error messages near the relevant form fields to provide context.

<label for="username">Username</label>
<input type="text" id="username" aria-describedby="usernameError">
<div id="usernameError" role="alert">Username is required.</div>

Keyboard Focus Management
- Move focus to the error message to ensure it is immediately noticed by screen reader users.
```
document.getElementById('usernameError').focus();
```

Provide Suggestions for Correction

Where possible, provide suggestions on how to correct the error.

<div role="alert" aria-live="assertive">
    Your password must be at least 8 characters long and include a number.
</div>

Use aria-invalid
- Use the aria-invalid attribute to indicate fields with errors.
```
<input type="text" id="username" aria-invalid="true">
```
Preventing Errors
- Implement measures to prevent errors, especially for critical operations like financial transactions.
```
<button onclick="confirmSubmission()">Submit</button>
```

Handling Multiple Application Errors

Handling multiple application errors effectively is crucial for maintaining a seamless user experience. When users encounter multiple errors, it’s essential to communicate them clearly and concisely, ensuring that users can easily identify and resolve each issue.

Aggregate Error Messages

Display a summary of all errors at the top of the form.

<div role="alert" aria-live="assertive" id="errorSummary">
    <p>Please correct the following errors:</p>
    <ul>
        <li><a href="#usernameError">Username is required.</a></li>
        <li><a href="#passwordError">Password must be at least 8 characters long.</a></li>
    </ul>
</div>

Individual Error Messages

Place individual error messages near the relevant form fields for context.

<label for="username">Username</label>
<input type="text" id="username" aria-describedby="usernameError">
<div id="usernameError" role="alert">Username is required.</div>

<label for="password">Password</label>
<input type="password" id="password" aria-describedby="passwordError">
<div id="passwordError" role="alert">Password must be at least 8 characters long.</div>

Focus Management
- Set focus on the error summary when multiple errors occur, and allow users to navigate to individual errors.
```
document.getElementById('errorSummary').focus();
```

Clear and Specific Messages

Ensure each error message is clear, specific, and provides actionable instructions.

<div id="usernameError" role="alert" aria-live="polite">
    Username is required and must be between 5 and 15 characters.
</div>

Validation on Input

Validate fields on input and provide immediate feedback to prevent multiple errors from accumulating.

document.getElementById('username').addEventListener('input', function() {
    // Perform validation and update error message
});

Use aria-invalid
- Use the aria-invalid attribute to indicate fields with errors.
```
<input type="text" id="username" aria-invalid="true">
```

Sufficient Techniques and Common Failures

Sufficient Techniques:

G83: Providing text descriptions to identify required fields that were not completed.
G84: Providing a text description when user input falls outside the required format or values.
SCR18: Using an alert dialog to provide feedback about errors.

Common Failures:

F77: Failure of Success Criterion 3.3.1 due to using a device-dependent event handler for an error message.
F81: Failure of Success Criterion 3.3.1 due to identifying errors only through sensory characteristics such as color or sound.
F82: Failure of Success Criterion 3.3.1 due to not providing a text description for errors.

Conclusion

Handling application errors with accessibility in mind ensures that all users, regardless of their abilities, can understand and correct errors, leading to a more inclusive user experience. By following WCAG 2.2 guidelines, implementing ARIA practices, and adhering to best practices, developers can create more accessible and user-friendly web applications.

For more detailed information, refer to the following resources:

By implementing these guidelines and techniques, you can significantly enhance the accessibility and usability of your web applications for all users.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue