Smart.TimePicker - 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.

TimePicker provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-valuenow, aria-valuemin, aria-valuemax 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 TimePicker component represents a dialog and as such it has the role "dialog". It allows to pick the time via user interaction. There are many different controls inside the template of the TimePicker that have different roles that describe their purpose. For example:

• heading - the header section of the TimePicker that contains buttons allowing to change the time selection view.
• slider - the content of the TimePicker that allows to pick hours/minutes.

The following ARIA attributes are used in the TimePicker:

• aria-disabled - indicates that interaction with the TimePicker is disabled.
• aria-hidden - indicates that the element does not take part in the interaction with the TimePicker and will not be mapped to the accessibility API. In practise it hides containers that do not have any usefull information for the assistive technologies.
• aria-level - indicates the nesting level of the header.
• aria-valuemax - indicates the maximal possible value of the time range that can be picked.
• aria-valuemin - indicates the minimal possible value of the time range that can be picked.
• aria-valuenow - indicates the currently picked value. It can be an hour or a minute depending on the time view.

Keyboard Interaction

The TimePicker component contains multiple focusable controls inside it's template. The users can navigate between them using the TAB key on the keyboard.

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