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

WAI-ARIA Support

This article demonstrates how to enable and use the WAI-ARIA support of the RadWindow and RadWindowManager controls.

The WAI-ARIA Suite defines an approach to make web content and web applications more accessible to people with disabilities. RadWindow and RadWindowManager offer WAI-ARIA support.

In order to enable the WAI-ARIA support, set the RadWindow / RadWindowManager control's EnableAriaSupport property to true as shown in the example below.

Example 1: Setting the EnableAriaSupport property for RadWindow and RadWindowManager

<telerik:RadWindow RenderMode="Lightweight" EnableAriaSupport="true" runat="server" ID="RadWindow1"></telerik:RadWindow>
<telerik:RadWindowManager RenderMode="Lightweight" EnableAriaSupport="true" runat="server" ID="RadWindowManager1"></telerik:RadWindowManager>
RadWindow1.EnableAriaSupport = true;
RadWindowManager1.EnableAriaSupport = true;
RadWindow1.EnableAriaSupport = true
RadWindowManager1.EnableAriaSupport = true

By enabling the WAI-ARIA support, RadWindow and RadWindowManager will automatically set the aria-labelledby attribute to the id of the dialog's title element. In order to facilitate the WAI-ARIA support, you should configure the dialog with Title.

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.

RadWindowManager will populate the same aria-related settings to all managed dialogs. If a certain RadWindow needs different settings, you should further configure them by using its inner AriaSettings tag, and thus, to override the ones derived from RadWindowManager (Example 3).

Example 2: Adjusting aria-label and aria-describedby attributes in RadWindow.

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1" EnableAriaSupport="true">
    <AriaSettings Label="Label for this dialog." DescribedBy="describe_dialog" />
    <ContentTemplate>
        <p id="describe_dialog">
            The text here describes the dialog. 
        </p>
    </ContentTemplate>
</telerik:RadWindow>

Example 3: Adjusting aria-label and aria-describedby attributes in RadWindowManager.

<telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager1" EnableAriaSupport="true">
    <AriaSettings LabelledBy="[Element_ID]" />
    <Windows>
        <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
            <AriaSettings Label="Label for this dialog." DescribedBy="describe_dialog" />
            <ContentTemplate>
                <p id="describe_dialog">
                    The text here describes the dialog. 
                </p>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

Example 4: Customizing RadAlert template and adjusting the aria-describedby attribute.

<telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager2" EnableAriaSupport="true">
    <AriaSettings DescribedBy="describe_id" />
    <AlertTemplate>
        <div class="rwDialogPopup radalert">
            <div class="rwDialogText" id="{0}_message">
                <p>Basic text that does not describe the purpose of this alert.</p>
                <%-- The element assigned in the DescribedBy property will be populated dynamically by calling the radalert() method. --%>
                <p id="describe_id">{1}</p>
            </div>

            <div>
                <a onclick="$find('{0}').close(true);"
                    class="rwPopupButton" href="javascript:void(0);">
                    <span class="rwOuterSpan">
                        <span class="rwInnerSpan">##LOC[OK]##</span>
                    </span>
                </a>
            </div>
        </div>
    </AlertTemplate>
</telerik:RadWindowManager>


<script>
    function pageLoad() {
        $find("<%= RadWindowManager1.ClientID %>").radalert("The text that defines the purpose of the alert dialog.", 200, 200, "Title of the alert");
    }
</script>

The implementation of the WAI ARIA support is achieved entirely client-side (using JavaScript) by appending different attributes and appropriate WAI-ARIA roles to the DOM elements. This is done because an HTML document containing ARIA attributes will not pass validation if they are added on the server.

According to the WAI-ARIA specifications, the first input in a dialog should get the focus when the dialog opens. This is done out of the box for the RadAlert, RadConfirm and RadPrompt dialogs. For custom RadWindows, this should be done by the developer.

RadWindows in the Windows collection of a RadWindowManager, or ones dynamically created by a manager, will inherit the value of its EnableAriaSupport property.

See Also

In this article