Date Picker

Date pickers enable a customer to select a single date or a date range, such as a payment date or a statement period requiring start and end dates. Date pickers are used to display past, present, or future dates. Use date pickers when you are asking the user for a date, a date range, or for scheduling tasks.

Use Cases

User should be able to:

  • Have clear labels in order to communicate with users and provide context. Labels must be persistent. The label cannot be visually hidden. Relying on color or shape alone excludes users with visual impairments or color blindness cannot perceive color or subtle changes in shape effectively. In addition, turning off the label violates WCAG 2.1 Guideline 1.3.1: Info and Relationships and WCAG 2.1 Guideline 1.4.1: Use of Color. If the progress value is only visual, screen readers cannot interpret and announce it without a an accessible label. If the progress value is.
  • Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.

Interaction and Style

Relevant WCAG Requirements

  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1
  • Meaningful Sequence

    Present content in a meaningful order. This ensures that the content makes sense when read by a screen reader or other assistive technology, even when styles are turned off.

    WCAG 2.1 Understanding 1.3.2
  • Sensory Characteristics

    Instructions do not rely solely on sensory characteristics such as shape, size, visual location, orientation, or sound. This means that users with sensory disabilities can still understand the content.

    WCAG 2.1 Understanding 1.3.3
  • Use of Color

    Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    WCAG 2.1 Understanding 1.4.1
  • Contrast (Minimum)

    Text and images of text must have a contrast ratio of at least 4.5:1...

    WCAG 2.1 Understanding 1.4.3
  • Reflow

    Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels; or for horizontal scrolling content at a height equivalent to 256 CSS pixels.

    WCAG 2.1 Understanding 1.4.10
  • Keyboard

    Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.

    WCAG 2.1 Understanding 2.1.1
  • No Keyboard Trap

    Ensure that keyboard navigation can always move focus forward and backward. This means no part of the site should 'trap' keyboard focus.

    WCAG 2.1 Understanding 2.1.2
  • Keyboard (No Exception)

    All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

    WCAG 2.1 Understanding 2.1.3
  • Focus Order

    If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

    WCAG 2.1 Understanding 2.4.3
  • Focus Visible

    Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

    WCAG 2.1 Understanding 2.4.7
  • Label in Name

    For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

    WCAG 2.1 Understanding 2.5.3
  • Target Size

    The size of the target for pointer inputs is at least 44 by 44px.

    WCAG 2.1 Understanding 2.5.5
  • Concurrent Input Mechanisms

    Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.

    WCAG 2.1 Understanding 2.5.6
  • Labels or Instructions

    Labels or instructions are provided when content requires user input.

    WCAG 2.1 Understanding 3.3.2
  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

Keyboard Navigation

KeyAction
TabFocuses the date picker input field.
Arrow Keys (Up/Down)Navigates through calendar dates.
Enter/SpacebarSelects a date or activates calendar view.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.