How do the type attributes behave in HTML5 forms with assistive technology.
On Github we set up a form with HTML5 type attributes..
The conclusion is at the end of this post.
The attributes we tested:
The list is taken from HTML5 forms input types on html5doctor.com.
- Phillip Chalker: iPhone VoiceOver
- Shaun Everiss: win7 pro, NVDA version 2016.4, firefox 51.1
- Tina Tedesco: Windows 7, IE 11 and JAWS 17
- Gabriela Nino de Rivera: MacOS Sierra 10.12.3, VoiceOver and keyboard only
- John Sexton: Windows 7 64bit with IE11 & Supernova V14.
- Priyanka Behera: Windos7 Ultimate, Firefox – 52 NVDA – 2016.4 and keyboard only on Mac Os Sierra Firefox – 51 and Chrome – 56
- Riddhi Mehta: Android Devices – Nexus S6, Moto G2
- Afzal Multani: Chrome & Firefox & Safari, keyboard only
- Shah Rishi: Android Chrome Firefox Dell 7 3730 – Tab& Dell 8 3830 – Tab
- Janki Moradiya: Iphone 6 – iOS 10.2.1, Chrome
Phillip Chalker iPhone VoiceOver
Eric Wright; Dragon: this is a presentation he did earlier.
John Sexton: The video link below shows three passes of the form using Supernova. Each pass starts with the heading “The Form”.
- The first pass I use only the tab key to go through each field.
- The second pass I use only the cursor down key going through each field.
- The final pass I use the tab key and enter values for each field. Note the range field I use the up/down cursor keys.
Video John Sexton: abc4accessibility.com/html5test/
First of all, there is a huge difference in support for the types between browsers and devices.
Works on every tested device / AT
HTML5 doctor describes the extra functionality for the search type. In the test no one noticed these extras
The search options are disabled for VoiceOver, but it is announced as “search text field”.
JAWS also announces the field as search.
Gabriela: With VoiceOver, was able to reach all controls except for the “Cancel” button of the type search field. VoiceOver does not announce the “Cancel” button, so a blind person will miss it for sure. To actually access this button, I had to go inside the search field using control+opt+shift+down arrow. Once the focus is on the button, using the “enter” key or space bar won’t activate it. However, the user can erase the content of the search field using the combination of control+option+spacebar without having to use the cancel button.
types “tel”, “url” and “email”
The fields change the keyboard on mobile and in Safari gives an autofill option for tel an email.
Validation is properly working in Firefox. It’s showing red focus in the, ‘Telephone’, ‘URL’, ‘Email’ and ‘Number’ fields but it’s not working in Chrome in both the devices (Nexus S6, Moto G2).
Fields with autocomplete function worked marvellously with VoiceOver.
Chrome on iPhone6: Telephone input field : validation for digit limit; URL input field : validation for http/https; Email input field : validation for @
Date and time types
They are only (mostly) properly supported in Chrome.
On mobile in Safari date, month, time and daytime-local works, daytime not.
For both Nexus and Moto, in Chrome Date and time picker is not displaying for ‘Date and Time’ field but datepicker is showing for ‘Local Date and Time’ field.
Chrome on iPhone: Date and Time input field: open number keypad & valid only number not character.
On the iPhone the “week” type is displayed very small and is not selectable in Chrome and Safari.
Works in VoiceOver on desktop, but not on the iPhone
On Android: Selected week is different in browsers. In Chrome it display like (Week 06,2017 ) and in Firefox it display like (2017-W06). In Firefox, when you click first time in week select menu “01” week is missing there.
Text field on Safari & VoiceOver.
Chrome on iPhone: Number input field : text box is very small. So, digit cutoff.
Works on most devices and AT, although no visible feedback on the chosen value, but with screen readers you get the value read out load.
In Nexus, Range field is not working properly during zoom out.
Supernova: The range field was not editable by standard entering of numbers but instead required the cursor keys up/down to change the value.
Supported in Desktop for Firefox and Chrome, but hard to use.
Shaun on NVDA: when entering the colour box I was not able to do anything in there till I alt tabbed out then back in, after pressing the button to enter it NVDA just stopped and acted as if it was stuck in the button. After alt tabbing in and out I was able to change the values, different shades and colours.
Type support varies with browsers and AT and seems better supported on mobile devices then on desktop.
Safe to use are:
As long as you don’t expect any type of input validation. The fields url, tel and email are nice to have for tablets and mobile, because they conveniently change the keyboard. Like numbers for tel, @ and .com for email. Some testers found it annoying that a telephone number only accepts numbers on mobile.
Note: No one noticed the extra functionality added for type=search.
Only Chrome fully supports date and type input on desktop, on mobile the support is somewhat better for most browsers.
The color picker works on some browsers but is for AT very hard to use and understand.
The only type that performed well was the range picker, although it did not give visible feedback on the chosen number.
For Supernova: All fields accept the range filed were treated the same as standard text fields.
Overall conclusion: don’t rely on HTML type attributes other than “text” for WordPress Admin.
The data we have now is:
- Testing form functionality with different assistive technology
- Test form elements with assistive technology on GitHub
- And this results for HTML5 type attributes
As we have now enough data on how form fields behaves, we will use this data to improve the settings API.
I hope our testers will join again to see how we can handle fieldsets, legends and punctuation in form labels, additional information in a field set, links in descriptions and complex constructions.
This all to create a decent and also flexible API for form fields.
Thanks all for testing!