An accessibility audit of Vitality's life insurance form finds three fixable problems: hidden elements breaking keyboard navigation, date fields using placeholders instead of labels and auto-advancing focus, and error messages with poor contrast and missing ARIA links. Small changes could reduce form drop-offs and boost completed applications.
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 gonna 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 gonna walk through 3 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 notice 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 full name. Now, Why is it doing that? We can have a look at the DevTools, and we can find out exactly what's going on. And we can see on these ones that we've got CSS display none, and that small line of CSS takes the element completely 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 just 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. But 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 mean, 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, 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 color contrast. The color contrast doesn't quite meet accessible standards for this color. 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 full name, or any other error messages that you want to add. So that's just 3 small ways that I would improve this form. It's not a terrible form, but there are a few small areas that may be 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.
Let’s Improve Pact Coffee’s Checkout Accessibility (and Boost Their Conversions)
