Labeling Controls

to think about that as well. And those basics, and we'll start from the top, I go linearly through

this tutorial. If you rather want to read it, that's also totally fine. I probably go into

a little bit more details. I might also, you know, give you a little bit more context

in what I prefer, but in the grand scheme of things, like reading this tutorial is already a

good start. So let's start at labeling controls. So what do I mean with that? So if we look at this

example, so this is a typical form control. You have something where you can put in text,

you can check the checkbox, and that's usually done with these input elements. So when you will

do reviews for accessibility, you will see those inputs here, there is one there, one there. And

these are basically, hey, put an input element, give user input or get user input on this page.

And the label is this part at the front here of the text box and at the end of the checkbox. So

So you already see that depending on the interactive element, the label can be somewhere else.

And we get into like other more niche stuff in a second.

But yeah, generally what you want to do is associating labels explicitly.

And that means that if you have an input that has an ID first name, you can actually use a label for first name and assign that.

What that does is that when a screen reader user clicks or taps into the input field, they get this label announced as the name of this input.

And that's super important because otherwise you just have like text input and you don't know what you have to do.

The same goes with the checkbox.

if I press tab, now I'm on the checkbox and the checkbox on its own doesn't know what it is. But

because we have the for and ID relationship here, it knows that subscribe to newsletter is the

actual label for this element. And that's, you know, pretty straightforward. And that's always

what you need to do. Like you need a visible label as well. So visible label, and then you have to connect it to the input element. Sometimes you want to hide label text and you can do that in some instances. Like in this example, you have a search button. And when you have the search button, this is a very commonly used

user interface component, I want to say. If you have a search button here, you can,

you know, you don't need to have search colon before the text input field. This together works

as the label, as a visible label, and as the label also for the text element. Now,

If we just put the text box on the left and the button on the right, then that means they are not connected.

So this text box would not have a name.

It would just say like text input and that's it.

And that would be bad.

So there are a couple of ways to do that.

So you can use a label element and hide it using visually hidden.

That's fine.

I can use ARIA label and we're going to talk about ARIA label next week.

But ARIA is basically a way to more or less directly communicate with screen readers.

And in this case you have the input and you label it, you put a name on it that goes into the string at the bottom, at the back here.

And then this is the same thing.

I will not go into the ARIA labeled by example, because we can talk about a lot of ARIA next week.

It will be like a really big, chunky topic.

So I don't want to like do too much talking about that too much right now, because this is like, you know, need to know the basics.

Here, you can also use the title.

The title is the thing that shows up when you hover over something.

You can have the title, but this is only fallback.

I would not use the title.

So ignore this part.

Yeah, and this is the visually hidden class that puts away the label.

But make sure that the label stays inside of the, like, you know, can be read by screen readers and whatnot.

You can also associate labels implicitly and that's good for some situations where you don't have access to the code.

So you have an input somewhere but you need to label it but you can't put an ID on it.

This rarely happens these days, but it's still useful.

So you can just wrap it inside of a label and you can do the same for the checkbox.

And the nice thing about that is that all the distance that is between the checkbox and the subscribe text, that's all clickable.

So one of the things, I didn't say that, I should have.

is that if we go back to our top example, labels are clickable and will set the focus

to the text field or select the checkbox or radio button or what have you. So I can click this label

and it will automatically put the cursor in here. I can click this label and if I don't do a right

click, it will check on and off the text, which is super useful, especially for people who are

who have motor disabilities, for example, you want to make that clickable area as big as possible.

And labels are great for that. Scrolling down. Yeah, buttons are a little bit different. So we

have already seen this the search button. So there are two types of buttons in HTML. This is for

for various historical reasons. Really noticeably the only button that you really should be using is the button element. The input type submit or type button, they don't really do a lot.

So if you have a button type submit, that basically submits the form.

So if you have a form and that does the server side submission thing, then button type submit is the right thing.

And then you can label that button by putting the label, the name of the button inside of the button element.

and the same goes for for like buttons that do not submit a form you want to have button type

button for that now if it's a submit button or a non-submit button is not announced by assistive

technology so you always have to be very explicit with your labeling and make sure that that it fits

what you're doing. So as an example, I go to my website really quick. I have this preferences

dialog box. Let me make this a little bit bigger for you. And that opens this modal

that has a close button and a save button. And this is a submit button and this is not. But

Here in this case I use close and save as my two button labels. And if we look at that in the

inspector, which should open on the right, but it doesn't want to do that. There we go.

Then we can see that, you know, this is a button type submit close and this is a button type submit

safe because they both do something. So for example, if I change from system setting to

dark mode, the close button submits that form in this case to say like reset it to

not being in dark mode. So that's why this is also an input type submit. Also, it's inside

of this form inside of the dialogue. So that has different, that works a little bit differently than

normal forms that are not in the dialogue. Yeah, and I think that's all there is for buttons.

just put like the action word in there, like submit, cancel, save, delete, stuff like that.

I always like when it's an actionable word and it's not something like deletion or something

like that. That makes little sense. There are not so much rules, but guidance on where to position

text labels. So if you are in left to right reading language, which most of the people in

this course are, I think, then you want to put the text before the field or on top of the form field

if it's a text label and after the form field if it's something like a checkbox or a radio button,

basically like it is in the example at the top. So here we have the first name on the left,

and here we have the subscribe to newsletter to the right. And if you

look at the example and you can basically like change the order.

You know, I can just, can I drag and drop that? I cannot. Give me a second.

Because I think once you see it, it feels like, oh yeah, this should never be like that. So

if I change this around and this around, don't you want to go over there? Yes, you do. So,

you know, this makes no sense at all, like having the checkbox at the right. It still works,

it's still technically accessible, especially if the label text is in different length,

then it's very hard to scan and you don't want to do that.