Smart.DateTimePicker - Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

DateTimePicker provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-expanded, aria-hidden and others. They are applied to the corresponding elements inside the template of the components.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

The DateTimePicker component includes a date input field and a button that opens a date picker that implements the dialog design pattern. The dialog contains a calendar that uses the grid pattern to present buttons that allow the user to pick a date from the Calendar.

The following ARIA attributes are used in the DateTimePicker:

• aria-disabled - indicates that interaction with the DateTimePicker is disabled.
• aria-hidden - indicates that the element does not take part in the interaction with the DateTimePicker and will not be mapped to the accessibility API. For example, the arrow icons inside the repeat buttons that control the month/year navigation do not affect the behavior of the element and do not provide information for the assistive technology.
• aria-haspopup - indicates that the DateTimePicker has a popup that can be triggered. The poup contains Date and Time controls for date/time selection.
• aria-selected - indicates whether a date from the popup is currently selected ot not. Used by the Calendar component that is nested inside the popup of the DateTimePicker.
• aria-valuemax - used by the TimePicker element inside the popup of the DateTimePicker, this attribute indicates the maximum value of it's scale (whether it's hours or minutes).
• aria-valuemin - indicates the minimum possible time that the TimePicker can select. The TimePicker component is used inside the popup of the DateTimePicker to pick hours/minutes.
• aria-valuenow - indicates the current value of the TimePicker that is used inside the popup for time selection.
• aria-owns - used to indicate that the DateTimePicker is the parent owner of the popup. Since the DOM hierarchy cannot be used to represent the relationship between the popup and the DateTimePicker, the property is used to indicate their visual, functional and contextual parent/child relationship.
• aria-describedby - indicates that there's an element that describes the input inside the DateTimePicker. That element is a string that represents the hint for the DateTimePicker's input.
• aria-label - defines a string that labels the elements that provide information or user interaction. Since DateTimePicker has many controls this attribute is frequently used inside the template of the element, for example: the value input, the repeat buttons that control the value, the drop down button that opens the Calendar/Time popup and others.
• aria-labelledby - identifies the element that labels the input of the DateTimePicker. The input has a separate label container that can be used to specify the label for the input.
• aria-expanded - indicates that the popup of the DateTimePicker is expanded.

Keyboard Interaction

The DateTimePicker element features several components ( Calendar and TimePicker ) that have their own keyboard navigation. Keyboard handling depends on the currently focused component.

The following keyboard shortcuts are available to interact with the DateTimePicker:

Additional information on WAI-ARIA for the SMART Framework can be found here.