Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 12 Next »

Visual Example


Acceptance Criteria

As a screen reader and keyboard only user I should:

  • be able to navigate to and access the calendar form field by using the “TAB” key on the keyboard

  • be able to:

a) type the dates in the form field, OR

b) pick the dates from the calendar widget

  • be able to press the “ENTER” key on the keyboard to activate the calendar button

  • be able to either:

a) use the “TAB” key on the keyboard to navigate through the months and years in the calendar widget, OR

b) user the arrow keys to and navigate through the dates for the current month and then continue to the next month

  • be able to use the left/right ←/→ arrow keys on the keyboard to navigate between dates in the calendar widget

  • be able to use the “ENTER” key on the keyboard to select a date in the calendar widget

As a screen reader user I should:

When the calendar form field has keyboard focus: 

  • the screen reader should announce the month, day and year format to enter

When the calendar button has keyboard focus: 

  • the screen reader should announce “Choose date button. To activate press ENTER.

When the calendar widget has been activated: 


Markup and Code

Please see the following recommended code example of a date picker and calendar widget.

It is fully accessible to both keyboard only and screen reader users.

View Markup, CSS and JS Code

  • No labels