---
url: /docs/components/date-picker/accessibility.md
---
# Date picker - Accessibility

A date picker allows the user to select a specific calendar date.

## Principle

Users should be able to manually enter a date, whether or not they interact with the date picker component.

***

## Keyboard Navigation

### For Input Field:

#### 1st Tab key

Focus moves to the **day** field (“dd”), allowing the user to manually enter a day value.

Pressing ↑ or ↓ increments or decrements the day (01–31).

#### 2nd Tab key

Focus moves to the **month** field (“mm”), allowing the user to manually enter a month value.

Pressing ↑ or ↓ increments or decrements the month (01–12).

#### 3rd Tab key

Focus moves to the **year** field (“yyyy”), allowing the user to manually enter a year.

Pressing ↑ or ↓ increments or decrements the year (starting from the current year).

#### 4th Tab key

Focus moves to the calendar icon.

Pressing Enter opens the calendar popover.
Pressing Enter again closes it.

#### 5th Tab key

Moves focus to the next interactive element in the interface.

***

### Once the Calendar Popover is Open:

#### 1st Tab key

Focus moves to the **previous month** button <.

Pressing Enter navigates to the previous month.

#### 2nd Tab key

Focus moves to the **next month** button >.

Pressing Enter navigates to the next month.

#### 3rd Tab key

Focus moves to the **current date** in the calendar grid.

Use the arrow keys
← → ↑ ↓
to navigate between available dates.

Pressing Enter selects the focused date and updates the input field.

#### 4th Tab key

Moves focus to the next interactive element in the interface. The calendar popover closes.

***

## VoiceOver / Screen Reader

It's not necessary to explain how to use, open, or close the date picker when the text field receives focus — as long as its behavior is intuitive and accessible.