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

WAI-ARIA Support

The RadSearchBox control has WAI-ARIA support which can be easily enabled by setting its EnableAriaSupport property to true.

When enabled, the SearchBox renders appropriate ARIA roles, states, and live regions to improve accessibility for assistive technologies such as screen readers.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SearchBox_Examples_Accessibility_and_Internationalization_WAI_ARIA_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
            CssClass="searchBox" Width="460" DropDownSettings-Height="300"
            DataSourceID="SqlDataSource1"
            DataTextField="fullName"
            DataValueField="id"
            HighlightFirstMatch="true"
            DataKeyNames="sport,birthday,country"
            EmptyMessage="Search"
            Filter="StartsWith"
            EnableAriaSupport="true"
            MaxResultCount="20">
            <SearchContext DataSourceID="SqlDataSource2" DataTextField="name" DataKeyField="id" DropDownCssClass="contextDropDown"></SearchContext>
        </telerik:RadSearchBox>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>" SelectCommand="SELECT * FROM [athletes]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>" SelectCommand="SELECT [id], [name] FROM [sports] WHERE ([category] IS NULL) ORDER BY [name]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance