Update guidance about using `type="email"` when asking users for an email address

[paulrobertlloyd]

Related documentation

The documentation and code examples for on how to ask users for an email address (under ‘Help users to enter a valid email address’) states:

setting the type attribute to email so that devices display the correct keyboard

Suggestion

The type attribute is used to achieve 2 things:

• client side validation
• showing the correct virtual keyboard, where applicable

On the first point, the Design System recommends only adding client side validation:

…if you find a user need for it. For example, because research shows it helps the user if you validate the information they’re providing as they type.

type="email" is recommended in this guidance in order to achieve the second point only.

Modern browsers now support the inputmode attribute, which addresses this need explicitly:

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.

Evidence (where applicable)

Our service (Submit social housing lettings and sales data (CORE)) was recently audited by DAC. One of their assessors was using Dragon and found that the type attribute interfered with how they interacted with the input:

I found that I was able to access the ‘Email address’ field, but I was unable to dictate into the field unless I used keyboard commands which takes a lot more time to complete the process for example ‘Press r, Press o, Press b, Press full stop’ and so on until the whole email address has been dictated.

Their recommendation was to use type="text" inputmode="email" over type="email".

[36degrees]

Interestingly Accessibility Support seems to suggest that data entry is supported by Dragon but it looks like that was last tested in August 2019 with Chrome 76 and Dragon 15.30. I imagine things might have changed since then.

Did DAC happen include the version of Dragon they were using, and what browser and browser version?

[paulrobertlloyd]

Ooh, good question. They did:

• Dragon Voice Activation v15
• Windows (no version given)
• IE11

[paulrobertlloyd]

Would a PR updating the guidance be useful to get this moving?

[36degrees]

I've done a little more digging into the spec and I think there are two other differences between type="email" and type="text":

1. Leading and trailing whitespace is trimmed from the value when using type="email", but not when using type="text". This affects both displaying a pre-populated value and the data sent when the form is submitted. (CodePen to illustrate)
2. Punycode in domains is handled when using type="email", but not when using type="text". If an email includes a domain with punycode, it'll automatically be translated to punycode and displayed correctly when presented back to the user. (CodePen to illustrate)

I'm not sure either of these should stop us from making this change, but we might want to consider whether any additional guidance is needed, especially if we want to publish any sort of communications encouraging users to make the change.

We're working towards another audit of GOV.UK Frontend at the minute – hopefully we'll learn more about this then, either by testing the 'new version' or by looking out for this issue cropping up in the audit report.