How I'd Improve Vitality's Life Insurance Form

Three small accessibility improvements that could help more users complete Vitality's life insurance quote form, improving conversion rates and customer satisfaction

Accessibility Review: Vitality Life Insurance Quote Form (Video)

Watch How I'd Improve Vitality's Life Insurance FormDownload the transcript

I was looking for life insurance this week and came across Vitality. 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 reducing conversions and costing them valuable leads.

As with all my reviews, 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. In this quick review, I’m going to walk through three small improvements that could help more users complete this form - unlocking more revenue and improving the overall ecommerce experience, which could improve conversion rates and also customer satisfaction.

Issue 1: Keyboard Navigation Gaps

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 some elements of the form aren’t accessible to the keyboard. When tabbing, it jumps from the highlighted phone number at the top, straight through to the forename field.

Looking at the dev tools, we can see what’s causing this issue. These elements have CSS display: none applied. That small line of CSS takes the element out of the accessibility tree, which means it’s no longer accessible through keyboard navigation.

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

If you’re using a screen reader, these elements are technically accessible (with a small “a”). But speaking to screen reader users, they typically use the tab key day-in, day-out to have a look at what’s in the form. If they can’t discover these areas, they might miss them entirely.

Issue 2: Date of Birth Field Problems

Moving down to the date of birth section, I noticed more issues. Most form elements are using labels, which is brilliant. These labels are attached to the input boxes, giving a really large click area.

However, the date, month, and year input boxes for date of birth are not using labels. That means the only way to interact with them is by clicking directly into the small input areas.

The form uses placeholder text, but as soon as you start typing, that disappears, which means you no longer can see what you should be entering - creating friction and increasing the chance of form abandonment.

Another small issue I found is that the cursor automatically moves to the next input as soon as you finish typing. While this might seem helpful, it’s an unexpected pattern. If I make a mistake (say, entering February when I meant March), I can try to go back using the keyboard, but it doesn’t let me navigate backward easily.

When tabbing from the year field, we automatically go down to another field, skipping key questions that affect the user journey and may lead to form errors or drop-off.

Issue 3: Error Message Improvements

The final area I would improve on this form is the error messages. When fields are left empty, the form does display nice error messages explaining what the problem is, and positioning them next to the problematic field is really good.

However, there are two improvements I would make:

  1. The error text color contrast doesn’t quite meet accessible standards.

  2. You can add an ARIA label to link each error message to its corresponding field. This way, when a keyboard user who might not be able to see the error message makes their way to the field, the screen reader will announce “please enter your forename” or any other relevant error message.

Small Changes, Big Impact

These are just three small ways I would improve this form. It’s not a terrible form by any means, but there are a few small areas that are causing friction in the customer journey, which quietly hurt completion rates and customer satisfaction.

By fixing these accessibility issues, Vitality would likely see a real impact with:

  • Fewer drop-offs
  • Fewer complaints
  • More completed applications
  • An improved bottom line

Remember: small accessibility improvements can lead to significant business results.