In this way you can decorate all your single controls with hint and error information. With aria-describedby one can even combine both hint texts as well as error messages: First name

Placeholder texts disappear once the user interacts with the control taking away the benefits by making it cognitively harder.

In the wild, the placeholder text is often used for contextual hints, but this is an anti-pattern. This method is the recommended way to give users extra information so that completing forms do not become an exercise of discovery as error messages often only fire once the form has been submitted. This is the ARIA version of displaying red borders and error icons to users.Ĭontent hint texts can also be linked to controls using aria-describedby: First name Linking information texts with aria-describedbyįor single controls, setting up validation errors in an accessible way is easy enough using aria-describedby: First nameīy linking the id of the error text container to the input with aria-describedby, screen reader users will also get the benefit of the extra descriptive validation text to assist in filling out the form correctly.Īlso note the use of aria-invalid to indicate the current invalid state to screen reader users. You can find a working example on the full form demo page of Tenon UI.

TL DR Our solution revolves around setting hint and error texts as part of the text of the legend element. In this article we will discuss our findings and propose a reliable solution, but first we will start by looking at the standard recommended ARIA method. While we were building our own accessible components library called Tenon UI, we found that it is surprisingly difficult to accessibly link validation and additional informative or hint texts to checkbox and radiobutton groups.

Checkbox accessibility screen reader