Error Messages and Accessibility with ARIA Attributes
00:00 We have some more accessibility things to consider when it comes to our error messages. So once we get that title is required error message, we need to associate that error message with our input field so that screen readers can tell our users that there is an error. So if we take a look at the solution, what we're going to see when we have things properly
00:19 associated is we'll have, well let's hit enter, there we go, we have aria-invalid is true and aria-describedby is the title error. That's going to be the ID of our errors. And the effect that's going to have on our screen reader is it will say that the title
00:36 required invalid data and then it says more content available. So if we press that hot key that it's telling us here, then it says the more content is title is required. That's our description. And so this will let our users know that they are required to fill in this title
00:52 and whatever other error messages will show up there in our assistive technologies. Right now that is not the case for us. And so if I have our screen reader go right here, then it's going to say title required edit text, but it doesn't give us that specific error message. And if we had like,
01:11 oh, username must be unique. Yeah, it's not going to be able to read that for us. So you always want to associate your inputs with the error messages so that users using assistive technologies can be assisted. And on top of that, the ARIA invalid is also used by assistive technologies
01:27 as well as the styling. So here we've got a red outline and we don't have a red outline here. So that also can be helpful. And I guess I'll just end this by saying there are lots of ARIA attributes that you can use, but in general, the first rule of ARIA is don't use ARIA. So
01:45 typically you want to use semantic HTML to accomplish things that sometimes can be done with ARIA, but there are some situations where you definitely should and need to use ARIA and these are those situations. So let's go ahead and do that. And then we'll see you when you finished.