[a11y] Contact form accessibility issues

Aaaaaaah forms, making accessible forms is always a bit trickier than expected if you want to have every information really accessible.

General feedback on the contact form

Labels and inputs are correctly linked together, that's a good start. My only concern in this form is the way each explanations are linked to the input. To make it truly accessible, I would move the <span> containing the explanations outside of the <label> element, as a sibling for example, and I would link these explanations to the input using an aria-describedby on the input with the ID of the <span>.

You already moved the explanations outside of the label for the second field, but you did not linked it to the input (making it invisible to most users of AT).

Enhancing the instructions provided

I would add an autocomplete attribute in each form input to give more insight to the browser or the assistive technology on what you are waiting from the user. You can find the different values here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

In this case, I would for example add autocomplete="name" and for the email autocomplete="email".

Error management

There is a <span class="error" role="alert"></span> right after the contactName input. I would advise you to not use a role="alert" in the context of form validation. At least, not in this particular context.

The best way to handle form validation here would be, after the submit, to:

Add an aria-invalid attribute to each input with invalid data.
To link the error explanation with the field using aria-describedby as for the input explanation. (NB: You can have several IDs in aria-describedby separated by a space)
To move the focus from the submit button to the first invalid field. This will force the assistive technology to read the new "context" so to explain that you are in the [Label] field, and that this field in invalid, and that this field is described by [explanations of the field and the error]. This is the best way to explain to blind users for example that the form was not submitted.

I told you, forms are always a pain 👀

Comments (3)