Field errors and description

[augustskare]

Love that conform handle errors for me in an accessible way. But one question, should it use aria-errormessage instead of aria-describedby?

I would also like to have conform handle field descriptions for me. Adding aria-describedby with a unique id if description is set to true. Maybe the api could look something like this:

<input {...conform.input({ ...email, description: true }, { type: "email" })} />
<p id={email.descriptionId}>Company email</p>

[edmundhung]

Thanks for the question. My knowledge on accessibility topic is quite limited, so the main reason I go for aria-describedby was simply based on suggestion from articles like this which has concern on the limited support of aria-errormessage.

But what you suggested sounds fair to me too. How about putting both id on aria-describedby as suggested on the article above too?

<input {...conform.input(email, { type: "email" })} />
// aria-describedby={`${errorId}`}

<input {...conform.input(email, { type: "email", description: true })} />
// aria-describedby={`${errorId} ${descriptionId}`}

[augustskare]

I'm no accessibility export, so this is something I'm unsure about (didn't even think about checking support for aria-errormessage). Yes, sounds like that's the way to go by adding both id's in aria-describedby.

One thing I came across trying to read up on the topic, it looks like some only include the "errorId" in aria-describedby if there's an error (https://www.a11yproject.com/posts/how-to-write-accessible-forms/#provide-error-messages). Unsure about the difference of leaving the "errorId" element empty vs toggling the id in aria-describedby depending on if there's an error. What do you think?

[edmundhung]

I got the same question as you. It was tempting to not provide the extra description option and just have the descriptionId added for always.

I couldn't find much information on this topic except this question on stackoverflow. I think I am convinced it's always a good idea to ensure the HTML to be semantically correct. As I could not guarantee the error element to be always rendered (i.e. there is no element with the errorId when no error), it seems better to add the errorId only if there is an actual error.

Like this:

<input {...conform.input(email, { type: "email" })} />
// If valid, no aria attributes will be set
// If invalid, aria-invalid="true" aria-describedby="errorId"

<input {...conform.input(email, { type: "email", description: true })} />
// If valid, aria-describedby="descriptionId"
// If invalid, aria-invalid="true" aria-describedby="errorId descriptionId"

[augustskare]

Based on that stackoverflow post this looks perfect!

[edmundhung]

This is now supported on v0.6.1 🚀