Calendar - WAI-ARIA Support

December, 2016
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?