TreeList - WCAG 2.0 and Section 508 Accessibility Compliance

1Asia3,879,000,00043,820,000 km2 Delete
 8China1,340,480,0009,640,011 km21Delete
   34Shanghai9,495,7017,037 km28Delete
   35Beijing7,296,96216,801 km28Delete
   36Hong Kong7,055,0711,104 km28Delete
 9Japan127,380,000377,930 km21Delete
   37Tokyo13,010,2792,187 km29Delete
   38Kyoto1,465,917827 km29Delete
   39Osaka2,643,805222 km29Delete
   40Yokohama3,654,427437 km29Delete
 10India1,189,870,0003,287,263 km21Delete
   41Mumbai13,830,884437 km210Delete
   42Delhi12,565,9011,483 km210Delete
   43Bangalore5,438,065709 km210Delete
 13Thailand67,070,000513,120 km21Delete
   44Bangkok5,705,0611,568 km213Delete
   45Nonthaburi262,15839 km213Delete
   46Pak Kret178,11436 km213Delete
2Africa922,011,00030,370,000 km2 Delete
 14Algeria33,333,2162,381,740 km22Delete
   47Algiers3,518,083273 km214Delete
 15Cameroon17,795,000475,442 km22Delete
   48Yaoundé1,430,000180 km215Delete
 16Nigeria154,729,000923,768 km22Delete
   49Abuja778,567713 km216Delete
   50Lagos7,937,932999 km216Delete
 17Kenya34,707,817580,367 km22Delete
   51Nairobi3,138,295696 km217Delete
   52Mombasa707,400295 km217Delete
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
 19Mexico106,202,9031,972,550 km23Delete
   58Mexico City12,294,1931,485 km219Delete
   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
 5Antarctica1,00013,720,000 km2 Delete
6Europe731,000,00010,180,000 km2 Delete
 26France63,601,002547,030 km26Delete
   78Paris2,193,0312,723 km226Delete
   79Marseille1,604,5502,830 km226Delete
   80Lyon1,348,832954 km226Delete
 27United Kingdom60,587,000244,820 km26Delete
   81London7,556,9001,572 km227Delete
   82Birmingham1,016,800267 km227Delete
   83Leeds770,800551 km227Delete
   84Liverpool434,900111 km227Delete
 28Germany82,217,800357,021 km26Delete
   85Berlin3,395,189892 km228Delete
   86Hamburg1,743,627755 km228Delete
   87Munich1,259,677310 km228Delete
   88Cologne983,347405 km228Delete
 29Italy59,715,625301,230 km26Delete
   89Rome2,718,7681,285 km229Delete
   90Milan1,299,633183 km229Delete
   91Naples973,132117 km229Delete
 30Bulgaria7,621,337110,910 km26Delete
   92Sofia1,267,608492 km230Delete
   93Plovdiv380,694102 km230Delete
   94Varna356,847238 km230Delete
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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesCSharp.Accessibility.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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">
        <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>
        <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

Help Us Improve

Was this example helpful?