The hour, minute, second and millisecond values of a time input focus from left to right with the focus moving between each time element.

The hour, minute, second and millisecond values can be updated using the up and down arrow keys. For example, if focussed on the hour input, a user can use the arrow keys to increase or decrease the hour. Depending on the input focussed, the max value differs. For example, if hour is focussed, the max value is 12 or 24, respective of your 24-hour clock preference. With minute and second focus, this maximum value is 59.

Pressing tab and shift tab will move the cursor from left to right between the hour, minute, second and millisecond input. A user can also copy and paste a specific time into the time input field.

To help users navigate within a time input component, the label, helper text and time input description are initially read out. The description announced for the time input includes the time format and how to add values using the arrow keys.

The hour, minute, second and millisecond values of a time input focus from left to right with focus moving between each time element. When navigating a time input with arrow keys, (for example, if the time is 11:45:09.136) the screen reader announces each segment individually, such as “Hours, 11” when focused on the hours, “Minutes, 45” when focused on the minutes, “Seconds, 09” when focused on the seconds and “Milliseconds, 136” when focused on the milliseconds. If a change is made to a time input, (for example, the time is updated from 11:45:09 to 12:45:15), once hours, minutes and seconds have been set, the screen reader will announce “Selected time: 12:45:15.”