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

WAI-ARIA Support

December 2024
December 2024
SMTWTFS
4824252627282930
491234567
50891011121314
5115161718192021
5222232425262728
532930311234

The ASP.NET AJAX Calendar, 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