Justin says: “Error messages: Make them clear, make them understandable. Don’t write a paragraph if you can write a sentence.”
Thanks to Fable for sponsoring the transcript for this episode.
Transcript
Nic
Hi, I’m Nic Steenhout. And you’re listening to the accessibility rules soundbite, a series of short podcasts where disabled people explain their impairments, and what barrier they encounter on the web. Just a reminder, that transcript for this episode and all other episodes are available on the website at the time of publication. You can find them at https://a11yrules.com. I want to thank fable for sponsoring this episode. Without Fable the show would not be possible. Fable is a leading accessibility platform powered by disabled people. Fable moves organizations from worrying about compliance to building incredible accessible user experiences through product testing, and custom courses. You can learn more about how Fable can work for your team at https://makeitfable.com/nic. Today I’m talking with Justin Yarborough again. Hey, Justin, how are you?
Justin
I’m doing good. How about you?
Nic
I’m doing good. I’m glad that the first encounter with me for the podcast didn’t turn you off completely and that you wanted to bring up a new topic. Before we dive into that, let me ask you, for those people that didn’t listen to the other episode, what’s your impairment or your disability?
Justin
I’m blind, I basically have zero vision.
Nic
Okay, and that means I assume you’re using a screen reader?
Justin
Yep.
Nic
Cool. So, blind screen reader user, and you said you wanted to talk about form validation? I guess that’s a current pet peeve of yours. Tell me about what’s the issue around form validation? How’s it an impact for you?
Justin
It’s, I think it’s I mean, it’s, it’s definitely a valuable one, especially, you know, for someone who’s blind, but it’s something that definitely one of those areas that definitely can benefit a, you know, benefits a whole host of people. It the the reason I think of it, it’s an it’s an it’s an area that kind of just interests me, you know, as in my work day to day, working in accessibility myself, is just thinking through, like how a form is built, and how you, you know, let people know, maybe there are mistakes in it, or, and how to fix it, and stuff like that. And when I, when I emailed you, actually, or sent you a message to talk about this topic, I was actually working on a project working with this was one of the clients I work with, and was why it was fresh in the mind. You know, I think the the really important thing with form validation is just to, you know, if someone, you know, fills out that form, and like, hit submit, and maybe they have no idea what happened, you know, why is it not moving through, especially if like, you’re, you’re someone like me, who can’t, you know, you’re not seeing the screen, you hit that submit button, and it just doesn’t do anything, you’re just, I’m probably just going to just assume something’s broken and move on. So you know, looking at a good like, form validation pattern where someone can understand what’s going on, what the problems are, in, you know, be given some guidance on how to fix it is, I think, just usually important. One of the pattern that is most used with the client I work with, and one I’m a huge fan of, is when you hit that submit button, if not everything validates I love those forms where they’ll automatically throw focus up to the first field with an error and have that, you know, error message programmatically associated with the form because it tells it tells me immediately, okay, hey, there’s something wrong here. You know, it, it takes him to the field, it tells me there’s something wrong, it gives me a description, basically, you know, of what’s wrong, what, what I need to fix, and lets me know that and then, you know, since it’s that that first one, if you’ve got, you know, say multiple fields with errors, I can just go tab, you know, tabbing through it through all the forms, see what does, you know, if there’s anything else with an error and then go to resubmit? I just, it’s a I, I’m a real big fan of that pattern. Just because I think just from a usability factor of anything you’re doing, that’s just, I think it’s just the easiest way to go about it for a screener two years and have that and I feel like that kind of a pattern is going to have a benefit. For a lot more people than just screen nerd are used to,
Nic
How’d you feel about disabling the submit button until all the fields are actually validating?
Justin
I hate it. I hate it with the fire of 1000 suns.
Nic
Why?
Justin
Because Especially like, as a screen or user, even maybe if you don’t have if you don’t have it set up, right, or potentially, even if you I guess I should say, if you don’t have it says like, there’s some sort of like an announcement, hey, this field is not valid, you know, when you like, tap out of one and move to the next. Part of the problem that creates is, you know, someone’s moving through what using the tab key that submit, but that submit button is not in the tab order. So I as far as I would know, that submit button doesn’t exist. And I could rightfully assume, okay, well, something with this form is broken, it doesn’t have a submit button, what the heck is going on here? Why do I not understand it? I it’s just, you know, it just feels like a really clunky and, you know, uncomfortable pattern to me. And it’s, you know, a, I think it’s something that really, really should be avoided. And, you know, like, like, we were talking about, like what, you know, the benefits of like, being someone outside of a screen reader user, I can see plenty of other users, like, you know, maybe they go look at that button, even if it is grayed out in your own, you know, problems with, you know, disabled buttons, and often not meeting color contrast, even though I know they don’t need to Don’t, don’t get me started on that. But, you know, they’re not, they might go look at it. And if especially if you’re not getting given good messaging, you know, as to what’s going on, they might just assume something’s wrong here with the formula, it kind of puts everyone in the same. The same, what the heck’s going on here, boat? Yeah. It’s just, you know, I like, I remember, like this when I was taking a JavaScript class, you know, just to learn JavaScript at my previous job. One of the projects we had actually in that class was to build a form and disable the submit button until it’s valid. It’s a great, it’s a great exercise. I feel like maybe for learning, you know, when you’re trying to learn how to do JavaScript, but in the real world, gosh, I hate it as a pattern, and it is just really not. I just think it’s really confusing.
Nic
Yeah. Here’s another question for you around form validation. And I have my own thoughts. And I’ve not been shy on sharing those thoughts. But I’d love to hear what you think of it. And this is inline validation, where each time you type a character, it validates and it tells you this is not correct until it is. And they often use ARIA live assertive on that error message. How do you feel about that?
Justin
Oh, my gosh, that’s I’m just, I’m just hearing, assertive, and I’m cringing. I mean, I cringe anytime I’m hearing Aria, you know, assertive ARIA live, that’s, that’s odd automatically cringe worthy. This is this, I am I’m having flashbacks to like the, the, the the text area inputs that might be have a character limit. And they’ll put an aria live on the you have, you know, the 132 characters remaining. And every time you’re typing, it’s just immediately saying again, and it’s just going to keep throwing that in your ear it, that kind of thing just could be really, really annoying, and could really throw off someone, especially a screen reader and a screen reader user. I don’t have a problem with I mean, I can understand like some, to a point at least like the valid, you know, why someone might want to do a validation like that, although, I mean, if you want to do like a validation of each field, I would feel like using doing it on blur would be a much better way to go about it.
Nic
Thank you this, this is what they actually recommend. It’s wonderful to hear an actual screen reader user say this is better. So thank you.
Justin
Yeah, do it on Blur, or I mean, even if you’re going to do like an aria live something while someone’s typing it, at least, you know, set it up in a way so that you’re not getting an announcement till maybe the person hasn’t typed for a second or two. Yeah, you know, that would at least make it a little less painful if you want to go with that pattern. But yeah, do it on or why. Why not?
Nic
Why not? Yeah. We’re talking about validation, which is really, in some way a very A dev specific kind of implementation, but I guess designers also have their, their say in, in what things should look like. But if you had one message for designers and developers around for validation, what would it be?
Justin
The biggest thing and this would fall into if you’re going to talk in like designers or you know, in this, like a content writer type role. The big, the biggest emphasis, I would say, is just, you know, when you provide those error messages, make them clear, make them make them understandable. And, you know, don’t, you know, don’t write a paragraph when you could write a sentence. Be basically, yeah, be succinct. Make it clear, make it understandable. So someone can go, okay. Hey, I know what I did wrong here and how I can fix it. But you know, like, it’s like I said, don’t write a don’t write a book or a paragraph. Give it to me in a sentence.
Nic
Justin, thank you very much for sharing that. I’m loving this discussion. And maybe you’ll think about another topic to bring up at some time in the future. But in the meantime, let’s call it a wrap. Thank you, Justin.
Justin
I thank you for having me again.