Blazor DateTimePicker Accessibility

The Telerik UI for Blazor DateTimePicker component is WCAG 2.1 AA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role, and is tested against the popular screen readers.

Wai-Aria

Input 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-haspopup=grid`	Indicates the component has a Dialog Popup.
	`aria-expanded=true/false`	Announces whether the Popup is visible or not.
	`aria-controls=.k-calendar-container id`	Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`.
	`aria-activedescendant=.k-calendar-td.k-focus id`	Points to the focused item (date/month/year/hour/minute) in the Calendar Popup or the Time Popup. Should only be present when the Popup is open.
	`readonly=readonly` or `aria-readonly=true`	Attribute is rendered only when the DateTimePicker is readonly.
	`aria-invalid=true`	Attribute is rendered only when the combobox is in form and announces the valid state of the component.
	`tabindex=0`	The element should be focusable.
.k-disabled .k-input-inner	`disabled=disabled` or `aria-disabled=true`	Attribute is rendered only when the DateTimePicker is disabled.
.k-input-button	`role=button` or `nodeName=button`	The element should either be a `<button>` element or should have `role="button"` assigned.
	`aria-label`	The button needs an accessible name to be assigned to it.
	`tabindex=-1`	Button element should not be focusable.