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

WCAG 2.0 and Section 508 Accessibility Compliance

Next database reset in 1 hours, 6 minutes, 39 seconds
Drag a column header and drop it here to group by that column
Customers
Edit columnCustomerIDContact NameCompanyAddressDelete column
Customers
FAMIAAria CruzFamilia ArquibaldoRua Orós, 92
Edit controls
Customers

 
FISSADiego RoelFISSA Fabrica Inter. Salchichas S.A.C/ Moralzarzal, 86
FOLIGMartine RancéFolies gourmandes184, chaussée de Tournai
FOLKOMaria LarssonFolk och fä HBÅkergatan 24
FRANKPeter FrankenFrankenversandBerliner Platz 43
FRANRCarine SchmittFrance restauration54, rue Royale
FRANSPaolo AccortiFranchi S.p.A.Via Monte Bianco 34
FURIBLino RodriguezFuria Bacalhau e Frutos do MarJardim das rosas n. 32
GALEDEduardo SaavedraGalería del gastrónomoRambla de Cataluña, 23
GODOSJosé Pedro FreyreGodos Cocina TípicaC/ Romero, 33
GOURLAndré FonsecaGourmet LanchonetesAv. Brasil, 442
GREALHoward SnyderGreat Lakes Food Market2732 Baker Blvd.
GROSRManuel PereiraGROSELLA-Restaurante5ª Ave. Los Palos Grandes
HANARMario PontesHanari CarnesRua do Paço, 67
HILAACarlos HernándezHILARION-AbastosCarrera 22 con Ave. Carlos Soublette #8-35
HUNGCYoshi LatimerHungry Coyote Import StoreCity Center Plaza 516 Main St.
HUNGOPatricia McKennaHungry Owl All-Night Grocers8 Johnstown Road
ISLATHelen BennettIsland TradingGarden House Crowther Way
KOENEPhilip CramerKöniglich EssenMaubelstr. 90
LACORDaniel ToniniLa corne d'abondance67, avenue de l'Europe
Customers
Page size:
 91 items in 5 pages

RadGrid 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 RadGrid 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.GridExamplesVBNET.GeneralFeatures.Accessibility.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="demo" class="demo-container no-bg">
        <script type="text/javascript">
            function requestStart(sender, args) {
                sender.activeElement = $telerik.getElementQuery(document.activeElement);
            }

            function responseEnd(sender, args) {
                if (sender.activeElement) {
                    $telerik.$(sender.activeElement).focus();
                }
            }
        </script>
        <telerik:RadAjaxPanel runat="server" EnableAriaSupport="true" ClientEvents-OnRequestStart="requestStart" ClientEvents-OnResponseEnd="responseEnd">
            <div>
                <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080"></asp:Label>
                <asp:Label ID="Label2" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000"></asp:Label>
            </div>
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" ShowStatusBar="true" Width="100%" 
                AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="true" EnableAriaSupport="true"
                PageSize="20"
                AllowPaging="True" GridLines="None" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
                AllowAutomaticUpdates="True" OnItemCreated="RadGrid1_ItemCreated" OnItemDeleted="RadGrid1_ItemDeleted"
                OnItemUpdated="RadGrid1_ItemUpdated" OnItemInserted="RadGrid1_ItemInserted" ShowGroupPanel="true">
                <GroupingSettings MainTableCaption="Grouping Table" NestedTableCaption="Nested Grouping Table"
                    GroupItemsWrapperTableCaption="Group Items Table"
                    MainTableSummary="The table which holds all grouping nested tables and is used as a wrapper."
                    NestedTableSummary="The nested grouping table which holds the group items table holding all grouped column items."
                    GroupItemsWrapperTableSummary="The table holding all group items which are positioned in the group panel." />
                <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" />
                <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True"
                    CommandItemDisplay="Top" Name="Customers" Caption="Customers" Summary="Table holding Customers records.">
                    <Columns>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit column" UniqueName="EditCommandColumn">
                        </telerik:GridEditCommandColumn>
                        <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                            DataField="CustomerID" UniqueName="CustomerID" MaxLength="5">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                            DataField="ContactName" UniqueName="ContactName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                            DataField="CompanyName" UniqueName="CompanyName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Address" HeaderText="Address" HeaderButtonType="TextButton"
                            DataField="Address" UniqueName="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn ConfirmText="Delete this customer?" ButtonType="ImageButton"
                            CommandName="Delete" Text="Delete" UniqueName="DeleteColumn" HeaderText="Delete column">
                        </telerik:GridButtonColumn>
                    </Columns>
                    <EditFormSettings CaptionDataField="CustomerID" CaptionFormatString="Edit properties for Customer 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>
                </MasterTableView>
                <ClientSettings AllowKeyboardNavigation="true" AllowDragToGroup="true">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true"></Selecting>
                    <KeyboardNavigationSettings EnableKeyboardShortcuts="true" 
                        AllowActiveRowCycle="true"></KeyboardNavigationSettings>
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [Address]) VALUES (@CustomerID, @CompanyName, @ContactName, @Address)"
            SelectCommand="SELECT * FROM [Customers]" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [Address] = @Address WHERE [CustomerID] = @CustomerID">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="Address" Type="String"></asp:Parameter>
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="Address" Type="String"></asp:Parameter>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </UpdateParameters>
        </asp:SqlDataSource>
        <br />
        <div>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>
        </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance