Testing HTML5 type attributes in forms with different browsers and AT

How do the type attributes behave in HTML5 forms with assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology.
On GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ we set up a form with HTML5 type attributes..
All with a proper label for/id relation, without CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. or supporting JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., so we only tested use of the type field in the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites..

The conclusion is at the end of this post.

The attributes we tested:

  • type=”text”
  • type=”search”
  • type=”tel”
  • type=”url”
  • type=”email”
  • type=”datetime”
  • type=”date”
  • type=”month”
  • type=”week”
  • type=”time”
  • type=”datetime-local”
  • type=”number”
  • type=”range”
  • type=”color”

The list is taken from HTML5 forms input types on html5doctor.com.

Testers:

  • 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 – iOSiOS The operating system used on iPhones and iPads. 10.2.1, Chrome

Video’s

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/

Results

First of all, there is a huge difference in support for the types between browsers and devices.

type=”text”

Works on every tested device / AT

type=”search”

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’, ‘URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org’, ‘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 httpHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands./httpsHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.; 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.

type=”week”

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.

type=”number”

Text field on Safari & VoiceOver.
Chrome on iPhone: Number input field : text box is very small. So, digit cutoff.

type=”range”

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.

type=”color”

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.

Conclusion

Type support varies with browsers and AT and seems better supported on mobile devices then on desktop.

Safe to use are:

  • text
  • url
  • tel
  • e-mail

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.

Follow up

The data we have now is:

As we have now enough data on how form fields behaves, we will use this data to improve the settings APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways..
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!

#testing