NVDA not assigning labels properly in date input component

[NickColley]

This issue is from a May 2019 external accessibility audit report.

WCAG Reference: Usability feedback only, there is no WCAG related guidelines.
Issue ID: DAC_Issue24
URL: http://govuk-frontend-v3.herokuapp.com/full-page-examples/applicant-details
Page: Applicants details

Screen Shot

There were form fields present that were not appearing as labelled to users of NVDA in Firefox, although these had clearly been labelled.
This was due to the use of input type of ‘number’. This is a software issue but has been reported for informational purposes. The input type of number also does not allow voice commands to be used either.
However, this input type can be useful for users on a mobile or tablet device as it displays the correct keyboard.

Current Code Ref(s)

<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">

Screen reader comments

“With NVDA, while navigating out of context using the elements list ‘insert+f7’, the edit fields relating to the date of birth feature announced to me as “Unlabelled.” It might not be clear to some users using the elements list what the fields relate to. This did not occur using JAWS or VoiceOver for iPhone and Mac.”

Solution

Use the input type of ‘tel’ to ensure that all users can access and interact with text boxes as expected.

[NickColley]

As they mention in the audit, this is a bug with NVDA.

We do however know there are issues with type=number and there are some alternatives we could try.

I have put awaiting-triage on this so we can consider:

1. Changing the component to use something other than type=number, for example exploring inputmode or type=tel.
2. Reporting this bug and closing this issue.

[NickColley]

We think we should try to test this in a device lab, if we change the implementation, for older browsers if possible.

[36degrees]

Verified as fixed by #1704