M023 - Set the HTML input type to the most specific type of data entry requested

Technique Category

[[Category:Mobile Techniques]] [[Category:Advisory Techniques]]

Technique Status Category

[[Category:Techniques Proposed]]

Status

Applicability

This technique applies to HTML input fields where the user can enter input such as input fields used for character input such as alphanumeric entry, e.g. phone number, email address, etc. This technique has added benefit on touch based systems where virtual keyboards are used.

WCAG References

User Agent and Assistive Technology Support Notes

Some user agents or platforms may not support specific keyboard layouts and some custom virtual keyboards may not support specific virtual keyboard layouts. Some users such as users of screen readers may be confused by different keyboard layouts or keyboards that might appear.

Description

The objective of this technique is to assist the user by displaying relevant virtual keyboard or keyboard layout based on input type. Specifying the most specific input type will assist users with virtual keyboards displaying the most relevant keys and enabling or disabling features such as spell check and auto capitalization. Specific input types may also trigger other types of controls such as date and time pickers rather than displaying text input fields assisting users in choosing a value without having to type characters. This practice may reduce user mistakes and lead to less error and more effectient data entry..

Solution

This technique uses the HTML5 type attribute attribute for text input to provide more specific virtual keyboard context. For example, use of type=email may display an alphanumeric keyobard with inclusion of common characters such as @ sign and may disable auto capitalization and spell check. Other input types that may change the appearnce of the virtual keyboard or display different user input controls such as picker controls include: