Currency input testing and research
The currency input component helps users enter an amount of money in a specified currency.
We carried out research lab sessions in autumn 2017 with various different types of users. All users knew to enter the data in numbers and without the addition of a currency symbol.
The component has been lab tested with the currency symbol for pound sterling. In addition, it has been developer tested with the euro currency symbol where the unit precedes the input.
Devices tested on:
- Chrome, Firefox, Safari (desktop) - latest version at the time of writing
- Internet Explorer 11
- Microsoft Edge 14, 15
- Android Galaxy S8, Pixel 8, Nexus 7: Chrome and Firefox
- iPhone 6, iPhone 5s: Safari, Chrome
The currency input component announces to screen reader users that they should enter the value in pound sterling. The currency symbol itself is not announced.
Assistive technology that the component has been tested with:
- Jaws 14/15 + IE11 + Windows 7
- Jaws 17/18 + IE11 + Windows 10
- NVDA + Firefox (latest version at time of writing) + Windows 10
- VoiceOver + Safari + iOS 10.3.2 + iPhone 5s
- VoiceOver + Safari + Mac OS 10.11.6
- Dragon NaturallySpeaking 13
Browsers do not support preventing users from entering non-numeric characters in inputs. Doing so would be a form of progressive enhancement to provide instantaneous feedback to user when they make a mistake.
A script helper in this component prevents non-numeric input, including currency symbols. This can be considered a form of progressive enhancement to help users to avoid mistakes.
For non-JS users the form field continues to function as normal.
To use this helper, install the numeric input component or include numeric-input.js on the page and include the attribute data-non-numeric on the input.
Notes
The component uses input type=”text” rather than type=number to ensure that all users can enter the decimal symbol.