User Notification

Notifications. They are important for giving the user feedback on what's happening on the form.

There are many ways to do that. Here are a couple of best practices mainly.

And you would be, if you're testing, you would just make sure that one of these is available.

So for overall feedback, things like, oh, I've just sent that form and there was an error in it or it worked.

Putting it into the main heading is a very good way to do it.

You can also put it in the page title.

The page title is always read the first thing when you submit something.

So this is basically the first feedback for the user.

You can use dialogues like this safe dialogue.

Thanks for submitting the form.

That works.

Usually don't want to do that.

But, you know, if you're using JavaScript, you need to at least give some feedback to the user that something has happened.

Nothing is more frustrating than clicking a button and don't know if something happens.

And then you click it again and again.

And then you see that you have actually submitted that comment seven times instead of once.

Then you want to list errors.

that's also a very good approach. Just make sure, like in this example, that all the errors are

listed. The first name field is empty, a required field must be filled, it's a required field,

it must be filled in. And this links actually, that's the idea behind this example, links to the

form field. And the date field is in the wrong format, it should be similar to, like, the format

that is used. Yeah, and here it's in a role alert. This will be announced when it's added to the page.

So if you're using that to add it through JavaScript, then it would be announced immediately, which can be quite useful.

Yeah, you can think about using aria-describedby to the error message. You want to mark the erroneous field in some way.

So there's also inline feedback, you know, after submit, like here, imagine we have submitted this, just this is like, okay, username, check, and error expiry date, use the format mm, y, y, y, y.

And we did, you know, we did have a dot here, so we can't actually submit this.

Does this reload? Probably.

So, so yeah, just, you know, having a tick, having some indicator that, yeah, this is correct.

And then having like an error here, that's good, a good way to do it.

And of course, I mean, this goes without saying, you should not only distinguish stuff using colors.

So here, if you have, if you leave out okay and error here, then someone with colorblindness might see this as the same color.

And we can actually take a look here and say here, this is deuteranomaly.

Deuteranomaly.

That's what I wanted to say.

I'm really terrible pronouncing these.

And you can see that it is like harder to see.

And then, you know, if you look at Deuteronopia, it's even impossible to distinguish between those two colors.

So you always want to have the word in there.

Protonomaly, that works pretty well with this color combination, but it's problematic with others.

And Protonopia also hard to see what the difference is. So yeah, using colors alone, never a good idea.

Oh, switch that off.

And if I just scrolled up and said like, oh, don't use colors to distinguish that.

And you go like, they do have different colors.

Yes, they do.

This is like a green and this is red.

And you might want to get checked for like color vision deficiencies and see if there's

something you can do in your settings to make this easier to see because there are like

color boosters or color shifters that you can use.

But yeah, that's, I'll always remember to put text on those things.

Sometimes you want to give feedback while typing.

I'm not a big fan of this, to be honest, because it's like, it's like it's immediate feedback

and it can be a little bit rough.

So if I put a username in here, like YA, that is okay.

That is, and then I go T-I-L, and this username is taken.

So I get this, sorry, this username is taken message.

And because we have the ARIA live polite, as I said, we talk about ARIA next week.

This would be announced as soon as you stop typing.

That's why it's polite.

This is the example of the JavaScript.

That doesn't matter for us at all.

Then you can have scale feedback, like in this case, it's a password testing field and

you want to give feedback.

And here we also do like the same thing.

So if I go and my password is "yatil23great@at123".

So this is now my password.

It says it's a strong password.

I don't think that this is a particularly strong password.

It's also not my password.

It's nowhere my password.

I promise it's not my password.

But you see that it has these like different layers of information.

So if I go into like the middle where it's yellow, this pale yellow is too yellow, too bright.

It doesn't have enough contrast to the gray background.

So this should be a different color, but you know, it is what it is. But it has the track, it has the

actually, I think we should go in here. This is better, a little bit more contrast. So it has the

track, it shows nicely where you are on the scale. And then it also has weak password, cracked in six

days. I shouldn't use this password anymore. I do not. And he is correct in centuries. I don't think

that JavaScript code is very reliable on that. But, you know, this is like basically the example

you get like an update while you're typing. And for that, things like the ARIA live approach

makes a lot of sense because you basically want the user to stay in this field until they are

sure that they have chosen a password that is secure enough. Then you can have unfocus change.

So if I'm focused in here and I change to the next one, now in this case this is the next field,

it updates this example and says like expiry date use the format mm yy. Now if you

you jump away from the field that means you probably don't go back uh so it doesn't doesn't

matter a lot i think if you're doing this uh then you yeah you need to put in aria live uh and

because this happens after you jumped out it would use aria live assertive which basically announces

it immediately so you jump to the next thing and it immediately announces what's happening

but we will talk about aria next week this is a big tease really