Hi everyone,

I was looking for life insurance this week and I came across Vitality.

Now, Vitality's life insurance quote form looks modern and polished, and mostly it's great, but beneath the surface there are a few small accessibility issues that could quietly be costing them customers. Now, as with all my videos, this isn't going to be a teardown because there is a lot that they're doing right, and nobody makes these mistakes on purpose, but in this quick review, I'm going to walk through three small improvements that could help more users complete this form, which would improve conversion rates and also customer satisfaction.

The first thing I often do when I'm coming to a form is use the tab key. I'm an avid keyboard user, even if I'm not using a screen reader at the moment. The first thing I noticed is that these elements of the form aren't accessible to the keyboard. You'll see it's jumping from this highlighted phone number at the top, straight through to your forename.

Now, why is it doing that? We can have a look at the dev tools and we can find out exactly what's going on. And we can see, on these that we've got CSS display none. And that small line of CSS takes the element out of the accessibility tree, which means it's no longer accessible through the keyboard.

If we remove this, then you see we can get straight back to using the keyboard on it. There are ways that you can build these nice-looking components without using display none, and that would be my preference.

If you're using the screen reader, they are technically accessible. You can get to them accessibility, accessible with a small a. But speaking to screen reader users, they day-in, day-out. will use the tab key to have a look at what's in the form, and if they can't find out or discover these areas, then they might miss them.

So we've got those areas. Next, moving down to your date of birth. Now, these are using labels, which is brilliant. These labels are attached to the input boxes, so it gives a really large click area.

When we get to the date of birth, these date, month, year, input boxes are not using labels. That means that the only way to get into them is by clicking into them, which is a reasonable assumption to make.

We're using placeholder text. As soon as you start typing, that disappears, which means that you no longer can see what you should be entering. Another small change I would make here is that the cursor automatically moves to the next input as soon as you have finished typing in the last one. Now that does seem helpful at some level, however, it's an unexpected pattern and one that we might not expect to find. If I make a mistake and say, oh, I'm in, I was born in March, not February. I can go back using the keyboard, but it doesn't let me go back anymore. So another small element, but one that is a frustration.

Now, if we're tabbing from the year, we automatically then go down to this field here and it misses your male or female or how much cover you need. And it also misses this very important question box here. One more item that I would add in is that it doesn't take you, into the, it doesn't take your focus into this area, rather you're still in the form.

The last item I would improve on this form is the error messages. Now, we haven't filled in this form particularly well. We've missed out quite a lot of areas.

We've got a nice error message explaining what the problem is, and the fact that it's next to the problem field is, is really good. That explains to us that we need to enter our forename, and it's next to the forename field.

The way that I would make this even better is, one, this isn't, a full colour contrast. The colour contrast doesn't quite meet accessible standards for this colour. But there's another really good thing you can do, is that you can add an ARIA label to link this error message to this field. So when a keyboard user, who might not be able to see this error message, makes their way to this field, it will read out, please enter your forename, or any other error message that you, want to add. 

So that's just three small ways that I would improve this form. It's not a terrible form, but there are a few small areas that are maybe causing friction and unintentionally excluding some users.

So by fixing those, you will see a real impact with fewer drop-offs, fewer complaints, more completed applications, and hopefully an improved bottom line.