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

WAI-ARIA Support

October 2024
October 2024
SMTWTFS
40293012345
416789101112
4213141516171819
4320212223242526
44272829303112
453456789

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.

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="VB"  %>


<%@ 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