Skip to content

Date Picker Spin Button Example

Date Picker Spin Button Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

The following example uses the Spin Button Pattern to implement a date picker. It includes three spin buttons: one for setting the day, a second for month, and a third for year.

Similar examples include:

Example

Choose a Date
1
June
2019

Accessibility Features

  • The three spin buttons are wrapped in a group to help assistive technology users understand that all three elements together represent a date. The accessible name for the group includes a hidden div that contains a date string that reflects the current values of the three spin buttons. This enables screen reader users to easily perceive the date represented by the three buttons without having to navigate to all three buttons and remember the value of each one; it is the screen reader user equivalent to seeing the date at a glance.
  • The day spin button uses aria-valuetext to properly pronounce the day, e.g. first, second, third ...
  • The month spin button uses aria-valuetext to properly pronounce the month instead of the numeric value, e.g. January, February, ...
  • On hover, the up and down arrow images enlarge slightly, enlarging the effective target area for increasing or decreasing the spin button value.
  • Focusing a spin button enlarges the increase and decrease buttons to make perceiving keyboard focus easier.
  • The increase and decrease buttons are not contained within the div with role spinbutton so they can be separately focusable by users of touch screen readers. However, they are excluded from the page Tab sequence with tabindex="-1" because they are redundant with the arrow key support provided to keyboard users.

Keyboard Support

The spin buttons provide the following keyboard support described in the Spin Button Pattern.

Key Function
Down Arrow
  • Decreases value 1 step.
  • When focus is on the Day spin button and the value is the first day of the month, changes value to the last day of the month.
  • When focus is on the Month spin button and the value is January, changes value to December.
Up Arrow
  • Increases the value 1 step.
  • When focus is on the Day spin button and the value is the last day of the month, changes value to the first day of the month.
  • When focus is on the Month spin button and the value is December, changes value to January.
Page Down
  • Decreases the value 5 steps.
  • When focus is on the Day spin button and the value is the fifth day of the month or less, changes value to the last day of the month.
  • When focus is on the Month spin button and the value is the fifth month of the year or less, changes value to December.
Page Up
  • Increases the value 5 steps.
  • When focus is on the Day spin button and the value is any of the last five days of the month, changes value to the first day of the month.
  • When focus is on the Month spin button and the value is any of the last five months of the year, changes value to January.
Home Decreases to minimum value.
End Increases to maximum value.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
group div
  • Identifies the div as a group.
  • The group provides a means to inform assistive technology users that the three spin buttons are all related to the single purpose of choosing a date.
aria-labelledby="IDREFs" div
  • Contains two IDs that reference the div elements that provide the accessible name for the group.
  • One ID refers to the visible label Choose a Date.
  • The second ID refers to a hidden div that contains a string specifying the current date represented by the values of the three spin buttons, which is updated by JavaScript as users change the values of the spin buttons.
spinbutton div Identifies the div element as a spinbutton.
aria-label="NAME_STRING" div Defines the accessible name for each spin button (e.g. day, month and year).
aria-valuenow="NUMBER" div
  • Indicates the current numeric value of the spin button.
  • Updated by JavaScript as users change the value of the spin button.
aria-valuetext="DAY_NUMBER_STRING" or
aria-valuetext="MONTH_STRING"
div
  • For the Day spin button, provides screen reader users with a friendlier pronunciation of the number of the day of the month (i.e. first instead of one).
  • For the Month spin button, provides screen reader users with a friendlier announcement of the month (i.e., January instead of one).
aria-valuemin="NUMBER" div Indicates the minimum allowed value for the spin button.
aria-valuemax="NUMBER" div
  • Indicates the maximum allowed value for the spin button.
  • For the Day spin button, this property is updated based on the value of the Month spin button.
aria-hidden="true"
  • div.next
  • div.previous
For assistive technology users, hides the text showing the next and previous values that is displayed adjacent to the up and down arrow icons since it would otherwise add superfluous elements to the screen reader reading order that are likely to be more confusing than helpful.
aria-label="NAME_STRING" button Defines the accessible name for each increase and decrease button (Next Day, Previous Day, Next Month, Previous Month, Next year, and Previous Year).
tabindex="-1" button Removes the decrease and increase buttons from the page Tab sequence while keeping them focusable so they can be accessed with touch-based assistive technologies.

JavaScript and CSS Source Code

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top