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

WCAG 2.0 and Section 508 Accessibility Compliance
3North America528,720,58824,490,000 km2 Delete
 18United States298,212,9009,629,091 km23Delete
   53New York8,391,8811,214 km218Delete
   54Washington599,657177 km218Delete
   55Los Angeles3,833,9951,290 km218Delete
   56Chicago2,853,114606 km218Delete
   57Houston2,257,9261,558 km218Delete
   101ccc100100 km218Delete
 19Mexico106,202,9031,972,550 km23Delete
   59Tijuana1,483,992637 km219Delete
   60Puebla1,485,941534 km219Delete
 20Cuba11,346,670110,860 km23Delete
   61Havana2,141,993721 km220Delete
   62Santiago de Cuba472,2551,023 km220Delete
   63Camagüey 324,9211,106 km220Delete
 21Canada32,805,0419,984,670 km23Delete
   64Ottawa812,1292,778 km221Delete
   65Toronto2,503,281630 km221Delete
   66Montreal1,620,693365 km221Delete
4South America382,000,00017,840,000 km2 Delete
 22Brazil186,112,7948,511,965 km24Delete
   67Brasília2,606,8855,802 km222Delete
   68São Paulo11,037,5931,522 km222Delete
 23Colombia42,954,2791,138,910 km24Delete
   69Bogotá6,840,1161,587 km223Delete
   70Medellín2,636,101382 km223Delete
   71Cali2,119,9084,977 km223Delete
 24Argentina41,033,2872,766,890 km24Delete
   72Buenos Aires3,050,728203 km224Delete
   73Córdoba1,309,536576 km224Delete
   74Rosario1,159,004225 km224Delete
 25Venezuela25,375,281912,050 km24Delete
   75Caracas5,196,5141,930 km225Delete
   76Maracaibo4,291,1991,393 km225Delete
   77Valencia2,196,0002,323 km225Delete
7Australia22,000,0009,008,500 km2 Delete
 31Australia22,515,4287,617,930 km27Delete
   95Sydney4,504,46912,144 km231Delete
   96Melbourne4,000,0008,806 km231Delete
   97Brisbane2,004,2625,904 km231Delete
   98Canberra351,868814 km231Delete
 32Papua New Guinea6,732,000462,840 km27Delete
   99Port Moresby307,643240 km232Delete
 33East Timor1,066,58214,874 km27Delete
   100Dili167,777372 km233Delete
Validate with WAVE

RadTreeList is compliant with Section 508, and Level AA of the WCAG 2.0 Guidelines . Run WAVE, the automated web accessibility evaluation tool, to check the accessibility level of the control yourself.

This example demonstrates how you can make Telerik's ASP.NET RadTreeList accessible by leveraging the settings for the different caption and summary properties of the rendered HTML elements.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" Inherits="Telerik.TreeListExamplesCSharp.Accessibility.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ 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" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<div class="demo-container no-bg">
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" ExpandCollapseColumnWidth="5px"
            DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" PageSize="20" EnableAriaSupport="true"
            AutoGenerateColumns="false" AllowPaging="false" AllowMultiItemSelection="true" AllowSorting="true"
            Summary="Table containing world locations." >
            <PagerStyle ChangePageSizeButtonToolTip="Change Page Size"
                ChangePageSizeComboBoxTableSummary="The table which holds the composite controls for the ChangePageSize RadComboBox control."
                ChangePageSizeComboBoxToolTip="Change Page Size"
                ChangePageSizeTextBoxToolTip="Change Page Size" GoToPageButtonToolTip="Go To Page"
                GoToPageTextBoxToolTip="Go To Page" />
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <Selecting AllowToggleSelection="true" AllowItemSelection="true" />
                <ClientMessages ExpandToolTip="Expand" CollapseToolTip="Collapse" />
            </ClientSettings>
            <Columns>
                <telerik:TreeListBoundColumn DataField="LocationID" UniqueName="LocationID" HeaderText="LocationID"
                    ForceExtractValue="Always" ReadOnly="true" HeaderStyle-Width="30px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LocationName" UniqueName="LocationName" HeaderText="Name"
                    HeaderStyle-Width="50px" >
                </telerik:TreeListBoundColumn>
                <telerik:TreeListNumericColumn DataField="Population" UniqueName="Population" HeaderText="Population"
                    DataFormatString="{0:#,#0}" HeaderStyle-Width="50px">
                </telerik:TreeListNumericColumn>
                <telerik:TreeListNumericColumn DataField="Area" UniqueName="Area" HeaderText="Area"
                    DataFormatString="{0:#,# km<sup>2</sup>}" HeaderStyle-Width="50px" >
                </telerik:TreeListNumericColumn>
                <telerik:TreeListBoundColumn DataField="ParentLocationID" UniqueName="ParentLocationID"
                    HeaderText="ParentID" ReadOnly="true" HeaderStyle-Width="50px" ForceExtractValue="Always">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete"
                    HeaderStyle-Width="50px" HeaderText="Delete column" ButtonType="LinkButton">
                </telerik:TreeListButtonColumn>
            </Columns>
        </telerik:RadTreeList>
    </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
            SelectCommand="SELECT [LocationID], [LocationName], [Population], [Area], [ParentLocationID] FROM [WorldLocations]"
            DeleteCommand="DELETE FROM [WorldLocations] WHERE [LocationID] = @LocationID"
            InsertCommand="INSERT INTO [WorldLocations] ([LocationName], [Population], [Area], [ParentLocationID]) VALUES (@LocationName, @Population, @Area, @ParentLocationID)"
            UpdateCommand="UPDATE [WorldLocations] SET [LocationName] = @LocationName, [Population] = @Population, [Area] = @Area, [ParentLocationID] = @ParentLocationID WHERE [LocationID] = @LocationID">
            <DeleteParameters>
                <asp:Parameter Name="LocationID" Type="Int32"></asp:Parameter>
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="LocationName" Type="String"></asp:Parameter>
                <asp:Parameter Name="Population" Type="Int64"></asp:Parameter>
                <asp:Parameter Name="Area" Type="Int64"></asp:Parameter>
                <asp:Parameter Name="ParentLocationID" Type="Int32"></asp:Parameter>
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="LocationName" Type="String"></asp:Parameter>
                <asp:Parameter Name="Population" Type="Int64"></asp:Parameter>
                <asp:Parameter Name="Area" Type="Int64"></asp:Parameter>
                <asp:Parameter Name="ParentLocationID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="LocationID" Type="Int32"></asp:Parameter>
            </UpdateParameters>
        </asp:SqlDataSource>
    </telerik:RadAjaxPanel>
    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance