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 0 hours, 46 minutes, 4 seconds
Drag a column header and drop it here to group by that column
Customers
Edit columnCustomerIDContact NameCompanyAddressDelete column
Customers
LAMAIAnnette RouletLa maison d'Asie1 rue Alsace-Lorraine
Edit controls
Customers

 
LAUGBYoshi TannamuriLaughing Bacchus Wine Cellars1900 Oak St.
LAZYKJohn SteelLazy K Kountry Store12 Orchestra Terrace
LEHMSRenate MessnerLehmanns MarktstandMagazinweg 7
LETSSJaime YorresLet's Stop N Shop87 Polk St. Suite 5
LILASCarlos GonzálezLILA-SupermercadoCarrera 52 con Ave. Bolívar #65-98 Llano Largo
LINODFelipe IzquierdoLINO-DelicatesesAve. 5 de Mayo Porlamar
LONEPFran WilsonLonesome Pine Restaurant89 Chiaroscuro Rd.
MAGAAGiovanni RovelliMagazzini Alimentari RiunitiVia Ludovico il Moro 22
MAISDCatherine DeweyMaison DeweyRue Joseph-Bens 532
MEREPJean FresnièreMère Paillarde43 rue St. Laurent
MORGKAlexander FeuerMorgenstern GesundkostHeerstr. 22
NORTSSimon CrowtherNorth/SouthSouth House 300 Queensbridge
OCEANYvonne MoncadaOcéano Atlántico Ltda.Ing. Gustavo Moncada 8585 Piso 20-A
OLDWORene PhillipsOld World Delicatessen2743 Bering St.
OTTIKHenriette PfalzheimOttilies KäseladenMehrheimerstr. 369
PARISMarie BertrandParis spécialités265, boulevard Charonne
PERICGuillermo FernándezPericles Comidas clásicasCalle Dr. Jorge Cash 321
PICCOGeorg PippsPiccolo und mehrGeislweg 14
PRINIIsabel de CastroPrincesa Isabel VinhosEstrada da saúde n. 58
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