Form Instructions

solution for a lot of use cases. All right, let's look at form instructions. So instructions are

basically additional information to know how to fill out a form because sometimes it's not

straightforward. Like if you have a date input field, what is the text format that you have to

put in there? Do you put the day first as, you know, people usually do here in Europe? Or do

you put the month as the first thing, like people in the United States are often doing.

You need to specify that, and that's why you need instructions. And there are a couple of ways to do

that. And the easiest way to make sure that you have instructions are overall instructions. Things

like all fields marked required must be complete. And you put that at the top of the form. And then

you have a good information of what the user needs to do. The same goes with dates or passwords or

something like that. You know, you can just put that all up front and you're good to go.

But often you don't want to do that or you want to additionally have inline instructions.

And inline instructions, you have seen those are basically things like month, month, year, year, year, year.

Like this expiry date example.

And you can do that in different ways.

So in this case, and this is my preferred way because I think it's super easy and super straightforward.

You just put the instruction into the label and just say expiration date, month, year, year, year, year.

And then this will be read when the screen reader user goes into the form field.

Most easy thing to do.

But sometimes you don't want to do that or you can't do that.

And most of the time that's because of design considerations or design restrictions.

So designers can make this harder.

So you will see this in practice and usually done wrong.

So this is the example.

You have an additional information underneath the label.

And then you have your underneath the field and you have your label here, in this case, on the left.

And so this means that if I go into the field, it will only read expiration date, but not if I use ARIA labeled by.

This is, again, one of the ARIA things.

I just mention it.

Don't think too much about it.

We will explain it more in detail next week.

So what I can do with ARIA labeled by is basically rope in this label here with one ID and then the description here with the other ID.

And basically using ARIA labeled by, I can connect them and then they will both be read.

First, this will be read, then this will be read.

And it will have the same result as the first example.

So I want to go into the inspector and then we can go into elements here and then go on here.

And under LE or sometimes accessibility, you can find the accessible name.

The accessible name is basically what the name of the form field is.

And you see that this is from the input.

This is not from the label. The label is before that. If I click on that, it doesn't want me to click it.

Oh yeah, now I clicked it, so it does not have an accessible name, because that's not the thing.

It's just a container for the accessible name.

And then if I click on the input here, it says the accessible name because they are connected through the for and ID normally as we talked about.

And then this aria-labeled-by, if I take that, inspecting that, we basically see the same thing.

Expiration date, colon, and then mmyyyy.

And that's because this aria-labelledby basically points at this first and then this code second.

Pretty neat.

But also, like, you see how much more code that is.

Like, you have to have two IDs.

They have to be unique on the page so you don't get, you know, accidental, like, wrong associations.

So they should be unique.

And then you need the aria-labeledby and you need the two ids and you need to smush them together properly.

So it's already like a lot of more things to do.

You can also use aria-describedby and that's basically using the label normally.

And then you use aria-describedby here.

And that will basically also associate this text, but as secondary information to the form field.

Now you might say, oh, what about placeholder text?

So we see this often in forms like here that you have like email and then instead of an empty field, you have like joe at example.com.

And if you click into it, it stays and then you can type your stuff.

And what we also often see is that the label is not even there.

So you don't, you miss completely out of what this is once you start typing.

And that's actually a WCAG failure because you can't have an unlabeled field.

And once you start typing, even like a space, you don't know what's going on if you don't have a separate visible label.

So you always want to have a label.

Placeholders are not a replacement for labels.

Sometimes these examples, so the placeholders are just examples of data that can in there.

Sometimes that can be okay.

But in general, it is like super confusing for a lot of people.

So I have seen people who clicked into like a field like this and first try to press delete to delete the email address because they don't realize that it is just a placeholder.

And that's always enlightened to see.

You go to even people who know what they're doing with computers and stuff,

and they click in it and by default they press delete

because they just assume it's text in there, so you don't want to do that.

And if you have longer forms, users might even have the impression

that they have already filled out sections of the form that they don't have

or that they don't need to fill that out or that this is like default stuff and they can just leave

it in so they might not go in there and adapt that to their own needs so in general placeholders are

bad don't use placeholders that's the moral of the story and one minor thing there is that

placeholders are generally not meeting WCAG 2.1 success criteria. So that's another thing that,

for contrast, I should say, that's like another ding against them. Like you need to like put

placeholder color and make sure that the opacity is reset because some browsers use that for the

the effect and make them visible and and yeah that's additional you know additional stuff that

you need to do that is in the grand scheme of things totally unneeded because you don't need

placeholders never use placeholders placeholders are bad and i can say this again placeholders

they are bad don't use them yeah super important

and