Number output

[paulrobertlloyd]

What

Display the results of a calculation or the outcome of a user action.

Why

On the ‘Submit social housing lettings and sales data (CORE)’ service, we ask users to enter values for rent and other charges tenants pay.

We only need to collect the total amount, but users may be more familiar with individual values. Rather than ask them to calculate the total value themselves, we display a live calculation, which they can check before submitting the form.

Proposed solution

This component is similar to the existing text input component taking many of the same parameters (such as prefix and suffix), but uses the output element. This element is read-only and can’t be interacted with or gain focus, but instead provides semantics and accessibility features that enable user agents to announce a newly calculated value whenever it has been updated.

Results of usability testing

We initially tested this design in December 2021 and January 2022 with 10 participants. All but 1 had JavaScript enabled and were able to see the total box, but only those with JavaScript enabled would get a live calculation. They all clearly understood that the box represented a total of all values on the page, and were reassured when this value was played back on a ‘Check your answers’ screen.

However, given the possibility of a user entering the wrong total amount, and the system calculating its own value anyway, to save any confusion, we decided not to show the total amount part of the page if JavaScript is disabled.

When to use this component

Use this component when you want to give users a calculation of 2 or more numbers. While not required by the component, these should be of the same type (don’t mix currency with weights, for example). Use the prefix and suffix options to indicate what type of output is expected.

When not to use this component

You should not use this component to display alerts or other information you might place inside a live region.

How it works

This component is designed to act as a progressive enhancement, falling back to an input element if JavaScript is not available. If JavaScript is available, an input element is replaced by an output element which listens for changes on the inputs listed in its for attribute.

Try it for yourself

• Demo: https://govuk-output.glitch.me/
• Code: https://glitch.com/edit/#!/govuk-output

Outstanding issues and questions

• This component has not been audited for its accessibility yet, and is yet to be used in a live production environment.
• The output element is not supported in Internet Explorer 11. The component currently displays correctly, but doesn’t function.
• Only supports addition at the moment; should it do more?
• Should it be the responsibility of this component to provide a set of calculation behaviours (addition, multiplication etc.), or should this be left to individual developers who may have specific requirements?
• Does there need to be an option for formatting the output, for example the number of decimal places to display?
• How should invalid values be handled? Right now, if you don’t enter a number into one of the inputs, the calculated value isn’t updated.
• This component may be interpreted as a disabled input; is there a better way to represent this value?

Anything else?

• The number output component - CORE design history

[adamliptrot-oc]

My concern with this would be constant updates to the output element due to multiple fields. This could be distracting to screen-reader users, especially if it is updating after each keypress. Even updating on blur could be odd as the user would be expecting to hear the element they moved to, not a calculation update.

Visual users can see the thing updating after each entry and can ignore it until they’ve finished entering data.

I did a quick test with VO on Mac and it reads out the total amount after you enter data in the other fields, but without any indication of what the value is. So for example you enter “100” into the first field and then “20" into the second. The total amount announcement clashes with the announcement from the current input and it sounds like you entered a different amount - not helped by it not announcing the “total”. This obviously gets more confusing as you go on as the total amount can have no relation to the figures you are typing in.

I've attached a video of Voiceover on Mac (with Safari). Avoid looking at the speech output dialog and rather just listen to the output and you will get a sense of the layering effect. I suspect that if you were slower entering data it might even get more confusing as you'd hear the entire total announced as well as the amount you entered.

(Side-note - as the suffixes are aria-hidden you'd need to specify in the input label the period for each payment as these aren’t currently exposed to screen-readers.)

Caveat - this is just one screen-reader, I didn't have time to test in JAWS, NVDA or any mobile-based ones.

https://user-images.githubusercontent.com/14074579/179735308-1b2c503a-804d-45f7-b946-0cddd33df4e9.mov