[BUG] Date inputs were found to function in a way that caused confusion for assistive technology users.

[KatiePUX]

Inputs were found to function in a way that caused confusion for assistive technology users.

Reference:
Usability
Issue ID: DAC_Input_Functionality_Usability_01
URL: https://ukhodataupload.admiralty.co.uk/external/survey-details
Page title: Survey Details
Journey: 1.3

A date component provided causes issues for users interacting with them through assistive
technologies. This instance can be found with the input below the ‘survey start date’ text.
The input has been implemented with the ‘type="date"’ which is an input that causes issues
for assistive technology users. Screen reader users found that focus was being forcible
moved to the next field, and voice activation users found it difficult to input data and to
select dates within the date picker option.

[KatiePUX]

Outcome of DAC audit, for more information see:https://ukho.sharepoint.com/sites/EXT_Data_Upload/Shared%20Documents/Forms/AllItems.aspx?OR=Teams%2DHL&CT=1711376954679&clickparams=eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyNy8yNDAyMjkyMDYwMiIsIkhhc0ZlZGVyYXRlZFVzZXIiOmZhbHNlfQ%3D%3D&id=%2Fsites%2FEXT%5FData%5FUpload%2FShared%20Documents%2FGeneral%2FAccessibility%20Audit%2FPrivate%20Beta%2FDAC%20Accessibility%20Report%20WCAG%202%2E2%20UKHO%20UDU%20130324%20Final%20Version%2Epdf&viewid=8b1f0a9e%2D2897%2D4a4d%2D8283%2Dcc660e97e3e4&parent=%2Fsites%2FEXT%5FData%5FUpload%2FShared%20Documents%2FGeneral%2FAccessibility%20Audit%2FPrivate%20Beta

PAGE 54-54

[buzzub]

I started to look at this but I don't have access to the DAC audit results.

[buzzub]

The current date input component is essentially just a styled version of the browser's default date input. Accessibility issues raised here are the same for any default browser date input.

One solution (as already mentioned in the audit) would be to use a date component like the GDS date input that has separate inputs for day, month and year.

Some screenshots from various browsers and notes on differences in functionality:

Chrome

Cursor automatically moves between day, month and year
Picker needs to be opened manually

Firefox

Cursor automatically moves between day, month and year
Picker needs to be opened manually

Safari

Cursor does not move automatically day, month and year
Automatically shows picker

[KatiePUX]

More design needed @KatiePUX
Need more evidence that this is needed at UKHO

[KatiePUX]

Discussed in refinement:

As a design team we need to understand the uses of calendars at UKHO to explore which types of calendar could potentially be added to our design system.

Tasks:

• Design spike to understand the uses of Calendars at UKHO
• Comp analysis and review of best practise
• Play back to team