New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WAI-ARIA Support

April 2024
April 2024
SMTWTFS
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011

The RadCalendar RadDatePicker and RadDateTimePicker controls have WAI-ARIA support which can be easily enabled by setting EnableAriaSupport="true". For the RadDatePicker and RadDateTimePicker the property should be set for the composite picker control and not separately for its embedded controls.

In the following demo two additional TextBoxes are added in order to show that when ARIA support for the RadCalendar is enabled and the calendar has keyboard navigation switched on, tabbing through the calendar moves out the focus instead of navigating through the dates.

Focus the first textbox and tab through the Calendar control to see that when ARIA support for the RadCalendar is enabled and the calendar has keyboard navigation switched on, tabbing through the calendar moves out the focus instead of navigating through the dates.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="TextBox1" Width="100%" EmptyMessage="Focus and Tab"></telerik:RadTextBox>
            <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar2" EnableAriaSupport="true" EnableMultiSelect="false"
                EnableKeyboardNavigation="true" runat="server" Width="100%">
            </telerik:RadCalendar>
            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="TextBox2" Width="100%"></telerik:RadTextBox>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance