Grid - WCAG 2.0 and Section 508 Accessibility Compliance

Next database reset in 1 hours, 26 minutes, 35 seconds
Drag a column header and drop it here to group by that column
Customers
Edit columnCustomerIDContact NameCompanyAddressDelete column
Customers
ALFKIMaria AndersAlfreds FutterkisteObere Str. 57
Edit controls
Customers

 
ANATRAna TrujilloAna Trujillo Emparedados y heladosAvda. de la Constitución 2222
ANTONAntonio MorenoAntonio Moreno TaqueríaMataderos 2312
AROUTThomas HardyAround the Horn120 Hanover Sq.
BERGSChristina BerglundBerglunds snabbköpBerguvsvägen 8
BLAUSHanna MoosBlauer See DelikatessenForsterstr. 57
BLONPFrédérique CiteauxBlondesddsl père et fils24, place Kléber
BOLIDMartín SommerBólido Comidas preparadasC/ Araquil, 67
BONAPLaurence LebihanBon app'12, rue des Bouchers
BOTTMElizabeth LincolnBottom-Dollar Markets23 Tsawassen Blvd.
BSBEVVictoria AshworthB's BeveragesFauntleroy Circus
CACTUPatricio SimpsonCactus Comidas para llevarCerrito 333
CENTCFrancisco ChangCentro comercial MoctezumaSierras de Granada 9993
CFFDE Alfreds Futterkiste 
CHOPSYang WangChop-suey ChineseHauptstr. 29
COMMIPedro AfonsoComércio MineiroAv. dos Lusíadas, 23
CONSHElizabeth BrownConsolidated HoldingsBerkeley Gardens 12 Brewery
DRACDSven OttliebDrachenblut DelikatessenWalserweg 21
DUMONJanine LabruneDu monde entier67, rue des Cinquante Otages
EASTCAnn DevonEastern Connection35 King George
Customers
Page size:
 92 items in 5 pages

Validate with WAVE
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" Inherits="Telerik.GridExamplesCSharp.GeneralFeatures.Accessibility.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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: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%"
                EnableAriaSupport="true" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="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>

Find Assistance

Help Us Improve

Was this example helpful?