UX analysis of HTML5 inputs with webshim.lib fallback

	A	B	C	D	E	F	G	H	I	J
1		Modern browsers				Old browsers	Mobile browsers (Android native tested on Galaxy S3)
2		Chrome 34	Firefox 29	Safari 6	IE11	IE8	Chrome Mobile 34	Android 4.3 (webshim.lib)	Android 4.3 (native)	iOS Safari 7

3		NUMBER INPUT (type: number)
4	Keyboard input	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ numeric keypad	[✗ alpha keypad]	✓ numeric keypad	✓ numeric keypad
5	Spinner: arrow keys	✓	✓	✓	[✓]	[✓]	N/A	N/A	N/A	N/A
6	Spinner: mouse wheel	✓ can disable	✗	✓ can disable	[✓] can disable	[✓] can disable	N/A	N/A	N/A	N/A
7	Spinner: buttons	✓ can disable	✓ can disable	✓ can disable	[✓] can disable	[✓] can disable	✓ can disable	[✗ not working, can disable]	✗	✗
8	Spinner increment independent of step	✗	✗	✗	[✓]	[✓]	✗	[✗ buggy, can disable]	✗	✗
9	Clear button	✗	✗	✗	[✓] can disable	✗	✗	✗	✗	✗
10	Spinner prevent invalid	✓	✓	✓	[✓]	[✓]	✓	N/A	N/A	N/A
11	Prevent invalid characters	✗	✗	✗	[✓]	[✓]	✓ but allows " ,-"	[✓]	✓ but allows " ,-"	✗
12	Prevent invalid decimals	✗	✗	✗	[not when toFixed = 0]	[not when toFixed = 0]	✗	[not when toFixed = 0]	✗	✗
13	Prevent invalid range	✗	✗	✗	✗	✗	✗	✗	✗	✗
14	maxlength	✗	✗	✗	[✗]	✗	✗	✗	✓	✗
15	Grouping indicator	✗	✗	✗	[✓]	[✓]	✗	[✓]	✗	✗
16	Validate: required	✓	✓	✓	✓	[✓]	✓	✓	✓	✓
17	Validate: min/max	✓	✓	✓	[✓]	[✓]	✓	✓	✓	✓
18	Validate: step	✓	✓	✓	[✓]	[✓]	✓	✓	✓	✓
19	Validate: pattern	✗	✗	✗	[✗]	[✓]	✗	✗	✗	✗
20	Validate on	key press	key press	key press	[blur]	[✓]	key press	[blur]	key press	key press
21	Submits only numbers	✓	✓	✓	[✓]	[✓]	✓	[✓]	✓	✓
22	Accessible	✓ indicates numeric	untested	✓ but says text field	untested	untested	untested	untested	untested	✓ but says text field
23		CURRENCY INPUT (type: number)
24	Prevent invalid decimals	✗	✗	✗	[✓]	[✓]	✗	[✓]	✗	✗
25	Grouping indicator	✗	✗	✗	[✓]	[✓]	✗	[✓]	✗	✗
26	Validate: step	✓	✓	✓	[✓]	[✓]	✓	✓	✓	✓
27		NUMERIC CODE (type: text on desktop, type: number on touch devices) - does not use webshim
28	Keyboard input	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ numeric keypad	N/A	✓ numeric keypad	✓ numeric keypad
29	Clear button	✗	✗	✗	✓ can disable	✗	✗	N/A	✗	✗
30	Prevent invalid characters	✗	✗	✗	✗	✗	✓ but allows " ,-"	N/A	✓ but allows " ,-"	✗
31	Prevent invalid decimals	✗	✗	✗	✗	✗	✗	N/A	✗	✗
32	Prevent invalid range	✗	✗	✗	✗	✗	✗	N/A	✗	✗
33	Allows leading zeros	✓	✓	✓	✓	✓	✓	N/A	✓	✓
34	maxlength	✓	✓	✓	✓	✓	✗	N/A	✗	✗
35	Grouping indicator	✗	✗	✗	✗	✗	✗	N/A	✗	✗
36	Validate: required	✓	✓	✓	✓	✗	✓	N/A	✓	✓
37	Validate: min/max	✗	✗	✗	✗	✗	✓	N/A	✓	✓
38	Validate: step	✗	✗	✗	✗	✗	✓	N/A	✓	✓
39	Validate: pattern	✓	✓	✓	✓	✗	✗	N/A	✗	✗
40	Validate on	key press	key press	key press	key press	✗	key press	N/A	key press	key press
41	Submits only numbers	✗	✗	✗	✗	✗	✓	N/A	✓	✓
42	Accessible	✓	untested	✓	untested	untested	untested	http://uxmag.com/articles/proactive-experiences-and-the-future-of-ux	untested	✓ but says text field
43		DATE OF BIRTH (type: date)
44	Keyboard input	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✗	[✗ alpha keypad - buggy unusable]	✗	✗
45	No calendar picker	✓ can disable	✓ can disable	✓ can disable	✓ can disable	✓ can disable	✗ barrel roller	✓ can disable	✗ barrel roller	✗ barrel roller
46	Spinner: arrow keys	✓	[✓ day only]	[✓ day only]	[✓ day only]	[✓ day only]	N/A	N/A	N/A	N/A
47	Spinner: mouse wheel	✓	[✓ day only]	[✓ day only]	[✓ day only]	[✓ day only]	N/A	N/A	N/A	N/A
48	Spinner: buttons	✓	[✓]	[✓ day only]	[✓ day only]	[✓ day only]	✗	[✗ buggy, can disable]	✗	✗
49	Clear button	✓ only when not required	✗	✗	[✗]	✗	✓ even when required	✗	✓ even when required	✓ even when required
50	Spinner prevent invalid	✓ loop	[✓ loop]	[✓ loop]	[✓ loop]	[✓ loop]	N/A	[✗ buggy, can disable]	N/A	N/A
51	Prevent invalid characters eg. aa/bb/cccc	✓	[✓]	[✓]	[✓]	[✓]	✓ barrel roller yes	[✓]	✓ barrel roller yes	✓ barrel roller yes
52	Prevent invalid date eg.31/02/2000	✗	✗	✗	✗	✗	✓ barrel roller yes	[? buggy can't check]	✓ barrel roller yes	✓ barrel roller yes
53	Prevent impossible date eg. 33/33/3333	✓	✗	✗	✗	✗	✓ barrel roller yes	[? buggy can't check]	✓ barrel roller yes	✓ barrel roller yes
54	Prevent invalid min/max eg. date above or below min/max range	only when entire month/year is out of bounds	✗	✗	✗	✗	✓ barrel roller yes	[? buggy, clears invalid min/max entry]	✗ barrel roller no	✗ barrel roller no
55	Allow valid single digit Day/Month	✓	[✓]	[✓]	[✓]	[✓]	N/A	[✓]	N/A	N/A
56	Fluid (Auto tab)	✓	[✓]	[✓]	[✓]	[✓ a bit buggy]	N/A	[buggy unusable]	N/A	N/A
57	Separator graphic	✓	[✓]	[✓]	[✓]	[✓]	N/A	[✓]	N/A	✓
58	Validate: required	✓	[✓]	✓	✓	[✓]	✓	✓	✓	✓
59	Validate: min/max	✓	[✓]	[✓]	[✓]	[✓]	N/A	[? buggy can't check]	✓	✓
60	Validate: invalid date	✓	[✓]	[✓]	[✓]	[✓]	N/A	[? buggy can't check]	N/A	N/A
61	Validate on	key press	[blur]	[blur]	[key press]	[✓]	barrel roll set	[? buggy can't check]	barrel roll set	barrel roll select
62	Submit as RFC3339 specification: yyyy-mm-dd	✓	[✓]	[✓]	[✓]	[✓]	✓	[✓]	✓	✓
63	Local date format	✓	[✓]	[✓]	[✓]	[✓]	✓	[✓]	✗ always: yyyy-mm-dd	✓ but month as word
64	Accessible: keyboard	✓	✓	✓	✓	[✓]	N/A	N/A	N/A	N/A
65	Accessible: screen reader	✓ indicates date	untested	[label no longer associated with webshim input]	untested	untested	untested	untested	untested	✓ but doesn't think date input is a form element?
66		CALENDAR PICKER (type: date)
67	Calendar widget	✓	[✓]	[✓]	[✓]	[✓]	✓ barrel roller	[✓ cut off screen]	✓ barrel roller	✓ barrel roller
68	Calendar widget prevents invalid dates eg.31/02/2000	✓	[✓]	[✓]	[✓]	[✓]	✓	[✓]	✓	✓
69	Calendar widget prevents dates above or below min/max range	✓	[✓]	[✓]	[✓]	[✓]	✓	[✓]	✗	✗
70	Calendar widget has 'today' option	✓ just looks like a dot (bad UI)	[✓]	[✓]	[✓]	[✓]	✗	[✓]	✗	✗
71	Keyboard input disabled	✗ can be but not required	[✓]	[✓]	[✓]	[✓]	✓	[✓]	✓	✓
72	Clear button	✗	[✓ only if required]	[✓ only if required]	[✓ only if required]	[✓ only if required]	✓ even if required	[✓ only if required]	✓ even if required	✓ even if required
73	Accessible: keyboard	✓ input, ✗ widget	[✓]	[✓]	[✓]	[✓]	N/A	N/A	N/A	N/A
74	Accessible: screen reader	✗ picker is not accessible	untested	[possible but difficult to use]	untested	untested	untested	untested	untested	✓ but doesn't think date input is a form element?
75		AUTOCOMPLETE (datalist)
76	Keyboard input	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ hardware	✓ alpha keypad	✓ alpha keypad	✓ alpha keypad	✓ alpha keypad
77	Selection list	✓	✓	[✓] select is visble natively	✓	[✓] select is visble natively	✓	[✓]	✗ select is visble next to text input though	[✓]
78	List open on key match	✓ only on first position, case insensitive	✓ on any position, case insensitive	[✓ on any position, case insensitive]	✓ only on first position or empty field, case insensitive	[✓ on any position, case insensitive]	✓ on first position, case insensitive, a little buggy	N/A	✗	[✓ on any position, case insensitive]
79	List open input click	✓ two clicks	✓ two clicks	[✓ two clicks]	✓ single click	[✓ two clicks]	✗	N/A	✗	✗
80	List open with button	✓ can disable	✗	✗	✗	✗	✗	N/A	✗ separate select box	✗
81	Clear button	✗	✗	✗	✓ can disable	✗	✗	✗	✗	✗
82	Validate: required	✓	✓	✓	✓	[✓]	✓	✓	✓	✓
83	Validate: pattern	✓	✓	✓	key press	[✓]	✓	✓	✓	✓
84	Validate on	key press	key press	key press	key press	[✓]	key press	key press	key press	key press
85	Accessible: keyboard	✓	✓	[✓]	✓	[✓]	N/A	N/A	N/A	N/A
86	Accessible: screen reader	✗ list is not accessible	untested	[✗ list is not accessible]	untested	untested	untested	untested	untested	[✗ list is not accessible]
87
88			KEY
89		Implemented only with webshim.lib polyfill		[...]
90		Not applicable		N/A
91		Implemented as desired		✓
92		Not implemented or with minor issues but acceptable		✗
93		Not implemented or buggy, is a problem		✗
94		Not tested		untested
95
96		Code for all inputs tested can be found at:		http://codepen.io/davidelrizzo/pen/3d5f03b4aa9cd7541079801ec65e792e
97