Form Accessibility & UX Practice

[00:00:00]
>> Now we are ready to start playing with this. The first thing that we will be doing is increasing the, let's say the usability and the accessibility of the forms. Because right now my forms are really bad. Okay, at that. And so, if you have a form in your website or in a web app today, please go and check everything that they're going to check right now, okay?

[00:00:24]
Again, maybe most of you, some of you already know how to do a form, but this part, like enhancing the form for password managers might not be the case. First, if you look here, my password has a label, that's a label. So a label is a text that is visible, that it's not inside the text control, it's actually outside.

[00:00:48]
The email doesn't have that. The email has a placeholder. A placeholder is that text that appears until I write something. Well, that's wrong. You can actually see that when you are registering the account, for example, it says your name so you can say Max, your email, blah, blah, blah, blah, blah, blah blah blah blah, blah.

[00:01:12]
The problem with this is that after a while, apparently it happened to you, I'm pretty sure, you go back before submitting the form, hopefully if there are more fields, before submitted the form you wanna double check the details, right? And you go here and says, what's this name and email or email or name.

[00:01:35]
And now you don't remember. So, what you're doing is you're deleting the data, you're cutting to check, do double-check, so this is bad. We don't want that. We always need a visible label, okay? And not just the label, so let's start with register, for example. So, I have a field set, this is an HTML element.

[00:01:59]
That says here your name, but it has a typo also, but I don't want a placeholder actually, okay? It has a require, so it has some semantics from HTML, but I need a label, okay? So, I'm going to create a label, a tag label that will say here, Your Name.

[00:02:17]
And the same for your email, that's a label tag. But the label tag shouldn't be alone like in this case, do you know what to do from an accessibility point of view with the label? Does anyone know what's missing here
>> Look for.
>> the for, there is a for attribute where we should connect the input ID in this case register name, and the same for this is email.

[00:02:48]
So why? Because that will increase UX accessibility first, screen readers for example, because on screen reader will don't know that this input is related to the previous label. Okay, and screen reader is for people with visual disabilities or different abilities and in that case they won't know, so we need the for.

[00:03:15]
And from a UX perspective or usability perspective it will also help because if you click in the label it will focus that element as well. And that's useful for mobile devices. I don't know about you, but my finger have fat fingers. So actually to tap over the little input type sometimes is not so simple.

[00:03:40]
So, you just tap somewhere and most of the time that's the label. It's always a good idea to have a label as a display block. If you do that, the display, let's say, clickable area is larger, it's the whole block. Even if it has padding, it's better to have padding and margins that will increase the tapable area of the label.

[00:04:04]
If you keep the label is by default in line, so it's going to be just the word or the words that you're using the label, okay? But again, for usability on mobile devices is much bad to have a display block element with paddings, make sense? Not margins. Okay, so, I have that, but I need to also use the for on here to register password.

[00:04:35]
Okay, like so. And then, the other thing that I need to add is the auto-complete values. So, for the name, it gonna be named. You can see here that we have so many possibilities. For the email, should I use email? No. Because in our case, it's going to be the username.

[00:04:59]
So, for the autocomplete, it goes username. If you have a different username and an email, well, that's okay. You can use autocomplete email, but in this case that will help. It will help password managers, okay. And for the password, they are complete is not password is new password because this is the registration form, okay, so, new passwords, make sense?

[00:05:32]
And you will see quickly if you have a password manager, you will see a difference, that now when you are inside that element, the browser will suggest you a password if you have a password manager. Password managers are optional these days. Even in Google Chrome you can disable password managers.

[00:05:56]
So, it's not like everyone has a password manager, but if you do have a password manager being the browser internal password manager or a new one, that will help. And for the login, we need to do something similar, so there is a whole section. So here this is the section class page, ID register, and here I have another section for login.

[00:06:19]
So I just need to add a label for the username, that is actually the email, okay, and the label for login email, And the one for the password was already there. The only thing that I need to add is the autocomplete Username on the email. And current password for a complete because we are in a login, we don't want a new password, we don't want the password manager to suggest me a new password.

[00:06:58]
I want to use a saved password, okay? Make sense? So, those are my My file. So if I refresh now, I'm getting that that's the current register. You can see that if I'm in Chrome in this case, if I click, if I focus in the password, it has that suggest a strong password option and that's because I added this autocomplete attribute.

[00:07:32]
So then, because it's the first time in this Chrome instance that I'm doing this, it says, do you wanna save this? I can save this here. And the login form is also now, Working because it's suggesting me to take password from my Google account. Makes sense? And if I try in Safari, for example, you will see here that icon there that lets you select a password if I'm registering a password.

[00:08:09]
Okay, I think from here you can suggest a new password. So, for example in this case that this is not working, if I click here and nothing happens, okay, what it's asking me for a name and an email. But if I click here, it's not ready yet so nothing is happening.

[00:08:29]
So, is it saving the password? Well, I need to submit first somehow. And how the browser knows that I'm submitting? It can be like a form submit, classic submit, or it can be a single page application submission. In that case, you have to change the URL with push take.

[00:08:49]
So, you have to change the route.