TreeList - WCAG 2.0 and Section 508 Accessibility Compliance

World locations
LocationIDNamePopulationAreaParentIDDelete column
 
World locations
World locations
1Asia3,879,000,00043,820,000 km2  
Edit form
World locations
Edit properties for Location with ID: 1
Edit controls
World locations
 
 8China1,340,480,0009,640,011 km21 
   34Shanghai9,495,7017,037 km28 
   35Beijing7,296,96216,801 km28 
   36Hong Kong7,055,0711,104 km28 
 9Japan127,380,000377,930 km21 
   37Tokyo13,010,2792,187 km29 
   38Kyoto1,465,917827 km29 
   39Osaka2,643,805222 km29 
   40Yokohama3,654,427437 km29 
 10India1,189,870,0003,287,263 km21 
   41Mumbai13,830,884437 km210 
   42Delhi12,565,9011,483 km210 
   43Bangalore5,438,065709 km210 
 13Thailand67,070,000513,120 km21 
   44Bangkok5,705,0611,568 km213 
   45Nonthaburi262,15839 km213 
   46Pak Kret178,11436 km213 
2Africa922,011,00030,370,000 km2  
 14Algeria33,333,2162,381,740 km22 
World locations
World locations
Page size:
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.

  • 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 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"
            DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" PageSize="20" EnableAriaSupport="true"
            AutoGenerateColumns="false" AllowPaging="true" AllowMultiItemSelection="true" AllowSorting="true"
            Summary="Table containing world locations." Caption="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" />
            <EditFormSettings CaptionDataField="LocationID" CaptionFormatString="Edit properties for Location with ID: {0}"
                AutoGeneratedColumnEditorsTableWrapperSummary="The table which holds all edit controls generated from the corresponding column editors."
                AutoGeneratedColumnEditorsTableWrapperCaption="Edit controls"
                FormMainTableSummary="The table which holds the edit form item and helps update and insert records."
                FormMainTableCaption="Edit form">
            </EditFormSettings>
            <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="50px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LocationName" UniqueName="LocationName" HeaderText="Name"
                    HeaderStyle-Width="170px" ItemStyle-HorizontalAlign="Center">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListNumericColumn DataField="Population" UniqueName="Population" HeaderText="Population"
                    DataFormatString="{0:#,#0}" HeaderStyle-Width="140px" ItemStyle-HorizontalAlign="Right">
                </telerik:TreeListNumericColumn>
                <telerik:TreeListNumericColumn DataField="Area" UniqueName="Area" HeaderText="Area"
                    DataFormatString="{0:#,# km<sup>2</sup>}" HeaderStyle-Width="120px" ItemStyle-HorizontalAlign="Right">
                </telerik:TreeListNumericColumn>
                <telerik:TreeListBoundColumn DataField="ParentLocationID" UniqueName="ParentLocationID"
                    HeaderText="ParentID" ReadOnly="true" HeaderStyle-Width="60px" ForceExtractValue="Always">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListEditCommandColumn UniqueName="EditCommandColumn" HeaderStyle-Width="100px">
                </telerik:TreeListEditCommandColumn>
                <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete"
                    HeaderStyle-Width="50px" HeaderText="Delete column">
                </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?