Marking up help text in forms

Zoe asked a question on Twitter recently:

#a11y folks: Is it still best to put form field instruction/help text inside the , or is aria-describedby sufficient nowadays?

— Zoe M. Gillenwater (@zomigi) August 18, 2016

‘Sfunny���I had been pondering this exact question. In fact, I threw a CodePen together a couple of weeks ago.

See the Pen Form field accessibility question by Jeremy Keith (@adactio) on CodePen.

Visually, both examples look the same; there’s a label, then a form field, then some extra text (in this case, a validation message).

The first example puts the validation message in an em element inside the label text itself, so I know it won’t be missed by a screen reader���I think I first learned this technique from Derek many years ago.

Email
must include the @ symbol

The second example puts the validation message after the form field, but uses aria-describedby to explicitly associate that message with the form field���this means the message should be read after the form field.

Email

must include the @ symbol

In both cases, the validation message won’t be missed by screen readers, although there’s a slight difference in the order in which things get read out. In the first example we get:

Label text,
Validation message,
Form field.

And in the second example we get:

Label text,
Form field,
Validation message.

In this particular example, the ordering in the second example more closely matches the visual representation, although I’m not sure how much of a factor that should be in choosing between the options.

Anyway, I was wondering whether one of these two options is “better” or “worse” than the other. I suspect that there isn’t a hard and fast answer.