What does this mean?
This appears where an input seems to be asking for a email or phone number but is using a plain type="text" attribute and no inputmode attribute has been found.
For example an input asking for an email address like the one below might be more suited to a type="email" rather than a basic type="text":
<label for="contact-email">Email</label>
<input type="text" name="contact-email" id="contact-email">
Impact on users
By using the most appropriate type or inputmode attribute we can request the browser on a touch-screen device show a keyboard most suited to that data. A type="email" for example might show a keyboard with an "@" key. A type="tel" will display a number keyboard.
Without these attributes the user will (depending on device and software version) have to switch keyboards to access special characters or numbers. For users who have fine motor control issues or who use a screen-reader this makes entering data a longer process.
How to fix
Review the data being requested for the input. If the data is appropriate for a specific type attribute, then that can be used.
The alternate is to use an appropriate inputmode attribute which will accomplish the same outcome.
- For an input asking for a phone number use
type="tel"orinputmode="tel" - For an input asking for an email address use
type="email"orinputmode="email"
For telephone numbers, if your field requires any characters which might not appear on a phone keypad then it may be that not using type="tel" or inputmode="tel" is the best option as these will potentially restrict the user input.
With our email example we can fix this by either adding the appropriate type attribute:
<label for="contact-email">Email</label>
<input type="email" name="contact-email" id="contact-email">
or with an inputmode attribute:
<label for="contact-email">Email</label>
<input type="text" name="contact-email" id="contact-email" inputmode="email">
Using both together gives no advantage.
Note that using type="phone" or type="email" will trigger native browser validation, so if choosing this route you should ensure this is turned off. The inputmode might not be supported in some older desktop browsers (for example IE11) but is well supported in mobile browsers.
References
- GOV.UK guidance on phone numbers
- GOV.UK guidance on email
- Native browser validation
- Missing inputmode