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, 43 minutes, 44 seconds
Drag a column header and drop it here to group by that column
Customers
Edit columnCustomerIDContact NameCompanyAddressDelete column
Customers
QUEDEBernardo BatistaQue DelíciaRua da Panificadora, 12
Edit controls
Customers

 
QUEENLúcia CarvalhoQueen CozinhaAlameda dos Canàrios, 891
QUICKHorst KlossQUICK-StopTaucherstraße 10
RANCHSergio GutiérrezRancho grandeAv. del Libertador 900
RATTCPaula WilsonRattlesnake Canyon Grocery2817 Milton Dr.
REGGCMaurizio MoroniReggiani CaseificiStrada Provinciale 124
RICARJanete LimeiraRicardo AdocicadosAv. Copacabana, 267
RICSUMichael HolzRichter SupermarktGrenzacherweg 237
ROMEYAlejandra CaminoRomero y tomilloGran Vía, 1
SANTGJonas BergulfsenSanté GourmetErling Skakkes gate 78
SAVEAJose PavarottiSave-a-lot Markets187 Suffolk Ln.
SEVESHari KumarSeven Seas Imports90 Wadhurst Rd.
SIMOBJytte PetersenSimons bistroVinbæltet 34
SPECDDominique PerrierSpécialités du monde25, rue Lauriston
SPLIRArt BraunschweigerSplit Rail Beer & AleP.O. Box 555
SUPRDPascale CartrainSuprêmes délicesBoulevard Tirou, 255
THEBILiz NixonThe Big Cheese89 Jefferson Way Suite 2
THECRLiu WongThe Cracker Box55 Grizzly Peak Rd.
TOMSPKarin JosephsToms SpezialitätenLuisenstr. 48
TORTUMiguel Angel PaolinoTortuga RestauranteAvda. Azteca 123
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