DEV Community

Neha Sharma
Neha Sharma

Posted on

Making Error Messages Accessible

In order to provide a user-friendly experience, it is crucial to make sure that errors in digital application forms are easily accessible. This not only ensures accessibility of the forms themselves, but also makes it easier for users to understand and resolve any mistakes.

Here, we will outline several ways to make error messages accessible for users.

1 . Provide clear error messages

The error message should clearly describe the problem and suggest a solution.

2 . Use accessible error styling

Make sure the error messages are visually noticeable and distinguishable from other content on the page, for example, by using color contrast or adding a visible border around the error message.

3 . Associate error messages with specific fields

Link error messages with specific form fields using the aria-describedby attribute on the form field and the id attribute on the error message.

4 . Make error messages keyboard accessible

Ensure that keyboard-only users can access the error messages by including them in the keyboard tab order.

5 . Use accessible error symbols

Consider using symbols such as an exclamation mark or an asterisk to indicate that an error has occurred, but make sure the symbols are also described in text for screen reader users.

Here's an example of HTML code:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-describedby="email-error">
<div id="email-error" role="alert" class="error-message">
  Please enter a valid email address.
</div>

Enter fullscreen mode Exit fullscreen mode

Happy Learning!!

Follow me on Twitter

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesnโ€™t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.