← Back to home

Error messages & WCAG 4.1.3: what most developers miss

Updated

Most developers test error messages visually. If the red border appears and the message shows up, the job's done. WCAG 4.1.3 asks something else: does this change reach assistive technology?

What is a status message

A status message is any change in content that isn't triggered by user focus, such as an error, a confirmation or a loading state. If it isn't announced, screen reader users never learn it happened.

The fix

Adding role="alert" to the error container gives the element an implicit aria-live="assertive". Screen readers read any content injected into it immediately.

Comparison between correct and incorrect implementation of aria-invalid and role alert for WCAG 4.1.3

Why most developers miss it

Because it works visually. The red border and the message are both on screen, and the gap only shows up when you turn on a screen reader. That's why accessibility testing can't rely on visual checks alone.

LinkedInX