Telerik UI for ASP.NET AJAX

RadGrid for ASP.NET AJAX satisfies the requirements of "Section 508" for software accessibility, as well as those for level AA (in compliance with the W3C Web Accessibility Guidelines 2.0).

This online example demonstrates how you can make RadGrid accessible by leveraging the settings for the different caption, tooltip and summary properties of the rendered HTML elements.

Property

Description

GridButtonColumn.ToolTip

Gets or sets the ToolTip property of each of the GridDataItem buttons.

GridCheckBoxColumn.ToolTip

Gets or sets the ToolTip property of each of the GridDataItem checkbox controls.

GridEditCommandColumn.ToolTip

Gets or sets the ToolTip property of each of the GridDataItem buttons.

GridClientSelectColumn.ToolTip

Properties that control the visual appearance of RadGrid and all tables in the hierarchy.

RadGrid.PagerStyle.GoToPageTextBoxToolTip

The ToolTip that will be applied to the GoToPage TextBox control.

RadGrid.PagerStyle.GoToPageButtonToolTip

The ToolTip that will be applied to the GoToPage input element.

RadGrid.PagerStyle.ChangePageSizeTextBoxToolTip

The ToolTip that will be applied to the ChangePageSize TextBox control.

RadGrid.PagerStyle.ChangePageSizeButtonToolTip

The ToolTip that will be applied to the ChangePageSize Button control.

RadGrid.PagerStyle.ChangePageSizeComboBoxTableSummary

The summary attribute that will be applied to the table which holds the ChangePageSize RadComboBox control.

RadGrid.PagerStyle.ChangePageSizeComboBoxToolTip

The ToolTip that will be applied to the input element in the ChangePageSize RadComboBox control.

RadGrid.GridTableView.EditFormSettings.FormMainTableSummary

The summary attribute for the table that wraps the whole GridEditFormItem.

RadGrid.GridTableView.EditFormSettings.AutoGeneratedColumnEditorsTableWrapperSummary

The summary attribute for the table which holds all cells created from the grid column editors GridEditFormItem

RadGrid.GroupingSettings.MainTableSummary

The summary attribute for the table that wraps the GridGroupPanel

RadGrid.GroupingSettings.NestedTableSummary

The summary attribute for the table second level table in the GridGroupPanel

RadGrid.GroupingSettings.GroupItemsWrapperTableSummary

The summary attribute for the table which holds all group items in the GridGroupPanel

RadGrid.GroupingSettings.MainTableCaption

The caption for the table that wraps the GridGroupPanel

RadGrid.GroupingSettings.NestedTableCaption

The caption for the table second level table in the GridGroupPanel

RadGrid.GroupingSettings.GroupItemsWrapperTableCaption

The caption for the table which holds all group items in the GridGroupPanel

GridBoolColumnEditor.ToolTip

The ToolTip that will be applied to the CheckBox control.

GridTextColumnEditor.ToolTip

The ToolTip that will be applied to the column editor initialized control.

Covering this criterion is very important when you would like to make your components accessible to people with disabilities.

The Section 508 standards are listed on the official government site:

Section 508

Here are the code snippets from the aforementioned sample:

CopyASPX
<head runat="server">
  <link type="text/css" rel="stylesheet" href="Skins/Sunset/Grid.Sunset.css" />
  <style type="text/css">.RadGrid_<%= MyGrid1.Skin %> th input
    {
         border:0px;         
         background-color: Transparent;         
         font-weight:bold;         
         cursor: pointer;         
         color:White;         
         text-align:left;        
    }        
    .RadGrid_<%= MyGrid1.Skin %> th, .RadGrid_<%= MyGrid1.Skin %> td         
    {
        white-space:nowrap;        
    }
  </style>
</head>
<body class="BODY">
  <form runat="server" id="mainForm" method="post" style="width: 100%;">
  <div>
    <telerik:MySection508Grid ID="MyGrid1" Skin="Sunset" DataSourceID="SqlDataSource1"
      AllowPaging="true" AllowSorting="true" runat="server" OnColumnCreated="MyGrid1_ColumnCreated">
      <mastertableview caption="Customers" summary="Customers">              
         <PagerTemplate>                
                    Change page:              
            <asp:Button ID="Button1" ToolTip="Previous Page" CommandName="Page" CommandArgument="Prev"CssClass="rgPagePrev" runat="server" />                    
            <asp:Button ID="Button2" ToolTip="Next Page" CommandName="Page" CommandArgument="Next" CssClass="rgPageNext" runat="server" />
         </PagerTemplate>         
      </mastertableview>
    </telerik:MySection508Grid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
      ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address FROM Customers" />
  </div>
  </form>
</body>