New to Telerik UI for ASP.NET Core? Start a free 30-day trial

TimeDurationPicker Accessibility

Out of the box, the Telerik UI for ASP.NET Core TimeDurationPicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.

The TimeDurationPicker is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 AA standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus and is tested against the most popular screen readers.

WAI-ARIA

This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.

TimeDurationPicker Wrapping Element

Selector	Attribute	Usage
`.k-input-inner`	`role=combobox`	The input element should follow the `combobox` specification.
	`label for` or `aria-label` or `aria-labelledby`	The input needs an accessible name to be assigned to it.
	`aria-expanded=true/false`	Announces whether the Popup is visible or not.
	`aria-haspopup=dialog`	Indicates the component has a Dialog Popup
	`aria-controls=.k-popup id`	Points to the popup element. Signifies that the `combobox` element controls the `dialog` popup.
	`readonly` or `aria-readonly`	Attribute is rendered only when the DatePicker is readonly.
`.k-invalid .k-input-inner,.ng-invalid .k-input-inner`	`aria-invalid=true`	Attribute is rendered only when the picker is in form and announces the valid state of the component.
`.k-disabled .k-input-inner`	`disabled=disabled` or `aria-disabled=true`	Attribute is rendered only when the DatePicker is disabled.
`.k-input-button`	`aria-hidden=true`	The button element must be hidden from the assistive technologies.
	`tabindex=-1`	Button element must not be focusable.
`k-timedurationpicker.k-disabled .k-button`	`disabled` or `aria-disabled=true`	Attribute is rendered only when the picker is disabled.

Selector	Attribute	Usage
`.k-time-list`	`role=listbox`	The timelist elements must have `listbox` role assigned.
	`aria-label` or `aria-labelledby`	The listbox needs an accessible name to be assigned to it.
`.k-time-list .k-reset`	`role=none/presentation`	The k-rest `<ul>` element semantic meaning must be removed from the accessibility tree.
`.k-time-list .k-item`	`role=option`	The available options in the listbox must be marked as such.
	`aria-selected=true/false`	Selected option must have its `aria-selected` attribute set to `true`.

Resources

WAI-ARIA specification for combobox

WAI-ARIA specification for listbox

Section 508

The TimeDurationPicker is fully compliant with the Section 508 requirements.

Testing

The TimeDurationPicker has been extensively tested automatically with axe-core and manually with the most popular screen readers.

To report any accessibility issues, contact the team through the Telerik Support System.

Screen Readers

The TimeDurationPicker has been tested with the following screen readers and browsers combinations:

Environment	Tool
Firefox	NVDA
Chrome	JAWS
Microsoft Edge	JAWS

Test Example

To test the TimeDurationPicker component, refer to the TimeDurationPicker Accessibility Demo.

For details on how the TimeDurationPicker keyboard navigation works, refer to the TimeDurationPicker Keyboard Navigation article.