How to write an accessible error message for a required radio button group form element?

Question

I have a radio button group as follows:

"Do you have any pets?"

Radio options: "yes" or "no"

If an option is not selected, and the user submits the form, then an error will show up indicating that an option needs to be selected. For sighted users, it would mostly be sufficient to have the error read "Please choose an option". However, screenreader users would need a more specific label so they know exactly what is wrong.

For cases like these, how can I word the error message so it's universally accessible? Thank you.

Answer 1

From a Web Content Accessibility Guideline (WCAG) perspective, follow WCAG 3.3.1 Error Identification, which says

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

So there are two parts:

1. the item that is in error is identified
2. the error is described to the user in text

How do you "identify" the item that is in error? Typically, the color changes (eg, red outline) or an error icon appears or the item changes its appearance in some manner.

And secondly, the error itself must be in text. You can't just change the color or add a red border or add an icon. There must be a text message.

If you correctly associate the error message with the radio group, then the radio group will essentially have an extra "label" so that when the screen reader user navigates to the radio group, they'll hear the "do you have any pets" and they'll hear "yes" or "no" (depending on which radio button the focus is on) and they'll hear the error message. So the error message will have context.

It's also nice if you move the focus to the item that is in error when they try to submit the form. If there are several errors, move the focus to the first one. Or you can have a list of error messages before the form with each error message being a link to the appropriate form element that's in error.

So your question isn't so much as wording the error message so that it's universally accessible but it's more about having a decent error message and associating that error message with the radio group.

Also, you didn't ask about this, but the user should know that the radio group is required. That can either be indicated in the label (typically an asterisk on the label, provided there's instructional text saying what the asterisk means) and/or using a "required" type attribute in whatever language you're programming in.

I could give an HTML example on how to do this but the UX StackExchange list is more about design and not about programming.