Calendar Best Practice

Calendar

Last Updated: 12/15/2011

A calendar is used to provide a visual representation of the current month and year so that a user can easily select a date.

Challenges faced by disabled users when using a calendar are:

Being able to enter a date without using the calendar
Understanding how a date needs to be entered
Using the calendar with the keyboard

Example

Download

New Window

Application Date:

Enter as mm/dd/yyyy

Build It
Basic Test
Advanced Test

Dates can be entered directly through the keyboard
A disabled user must be able to manually enter text into any date field:

default.htm (excerpt)
```
<input id="date" …/>
```
Instructional text is properly associated with any date input box
Use a combination of tags and attributes to associate text with the date's input box:

default.htm (excerpt)
```
<label for="date">Application Date:</label>
<input aria-describedby="dateHelpText" id="date" … title="Application Date: mm/dd/yyyy"/>
<div class="helpText" id="dateHelpText">Enter as mm/dd/yyyy</div>
```
Let's break this code down:
1. Add a <label> tag around text that directly corresponds to the control:
```
<label for="date">Application Date:</label>
<input id="date" …/>
```
2. Add a title attribute to provide any additional instructional text:
```
<input title="Application Date: mm/dd/yyyy" …/>
```
3. Use the ARIA's describedby attribute to attach instructional text to the control:
```
<input aria-describedby="dateHelpText" …/>
<div … id="dateHelpText">Enter as mm/dd/yyyy</div>
```
Remove the calendar control from the tab order
Because of limitations in Assistive Technology, we suggest removing any calendar control from the tab order by setting the tabindex attribute to -1:

common.js (excerpt)
```
button.setAttribute("tabIndex", "-1");
```

NO TEST METHOD...