Title: Testing HTML5 type attributes in forms with different browsers and AT
Author: Rian Rietveld
Published: February 13, 2017

---

 [  ](https://profiles.wordpress.org/rianrietveld/) [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/)
12:59 pm _on_ February 13, 2017     
Tags: [testing ( 17 )](https://make.wordpress.org/accessibility/tag/testing/)

# 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](https://en.wikipedia.org/wiki/Umbrella_term)
that includes assistive, adaptive, and rehabilitative devices for [people with disabilities](https://en.wikipedia.org/wiki/Disability)
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](https://en.wikipedia.org/wiki/Technology)
needed to accomplish such tasks. [https://en.wikipedia.org/wiki/Assistive_technology](https://en.wikipedia.org/wiki/Assistive_technology).

On GithubGitHub GitHub is a website that offers online implementation of git repositories
that 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 by the repository owner. [https://github.com/](https://github.com/)
we set up a [form with HTML5 type attributes.](https://wpaccessibility.github.io/test-forms/html5-types.html).
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](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](http://html5doctor.com/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/](http://www.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:

 * [Testing form functionality with different assistive technology ](https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/)
 * [Test form elements with assistive technology on GitHub ](https://github.com/wpaccessibility/test-forms/issues/3)
 * 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 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](https://make.wordpress.org/accessibility/tag/testing/)

### Share this:

 * [  Threads ](https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/?share=bluesky)
 * [  LinkedIn ](https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/?share=linkedin)
 * [  X ](https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/?share=x)
 * [  Facebook ](https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/?share=facebook)

# Post navigation

[← Testing form functionality with different assistive technology](https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/)

[Revising the WordPress Editor: Gutenberg and Accessibility →](https://make.wordpress.org/accessibility/2017/02/17/revising-the-wordpress-editor-gutenberg-and-accessibility/)