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

WAI-ARIA Support

RadWindow with Content Template

RadWindow with external page

Predefined dialogs

The RadWindow control has WAI-ARIA support which can be easily enabled by setting EnableAriaSupport="true". By that, the aria atttributes will be automatically rendered in the dialog's wrapper element.

Optionally, you can adjust the aria-label, aria-labelledby and aria-describedby attributes by using the Label, LabelledBy and DescribedBy properties in the AriaSettings tag.

<telerik:RadWindow runat="server" ID="RadWindow1" EnableAriaSupport="true">
    <AriaSettings Label="[Label]" LabelledBy="[Element_ID]" DescribedBy="[Element_ID]" />
</telerik:RadWindow>

You can find more information about WAI-ARIA support in RadWindow in the WAI-ARIA Support article.


Please, note that an issue with the use of WAI-ARIA in HTML documents is that they don’t validate. When you run a HTML document containing ARIA attributes through the W3C Validator it shows errors in the results for any ARIA attributes. The HTML 4.01 specification and its DOCTYPE declarations (DTD) Strict, Transitional, Frameset , do not include any information about the WAI ARIA attributes and you cannot have a valid HTML 4.01 document which includes, elements, attributes, and attribute values, not detailed in its DTD’s.


By specification, the first input in a dialog should get the focus when the dialog is opened. This is done out of the box for the predefined dialogs (radalert, radconfirm and radprompt) and for other RadWindows it should be done by the developer.

  • ContentPage.aspx
    • ContentPage.aspx
    • DefaultCS.aspx
  • contentScripts.js
    • contentScripts.js
    • scripts.js
  • styles.css
<%@ Page Language="C#" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <link href="styles.css" rel="stylesheet" type="text/css" />
        <script src="contentScripts.js" type="text/javascript"></script>
    </head>
<body onload="document.getElementById('firstName').focus();">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="theScriptManager" runat="server" />
        <script type="text/javascript">
            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow;
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                return oWindow;
            }
            function closeWin() {
                GetRadWindow().close();
            }

        </script>
        <div class="contentDiv">
            <h4 style="margin-left: 60px;">This is test window content</h4>
            <br />
            <div class="inputWrap">
                <label id="firstNameLabel" for="firstName">
                    First Name</label>
                <input type="text" name="first-name" id="firstName" />
            </div>
            <div class="inputWrap">
                <label for="lastName">
                    Last Name</label>
                <input type="text" name="last-name" id="lastName" />
            </div>
            <div class="inputWrap">
                <label for="email">
                    Email</label>
                <input type="text" name="email" id="email" />
            </div>
            <div class="inputWrap">
                <telerik:RadButton RenderMode="Lightweight" ID="regBtn" OnClientClicked="closeWin" CssClass="submitBtn" Text="Submit" AutoPostBack="false" runat="server" />
            </div>
        </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance