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

WAI-ARIA Support

November 2024
November 2024
SMTWTFS
44272829303112
453456789
4610111213141516
4717181920212223
4824252627282930
491234567

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