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

WCAG 2.0 and Section 508 Accessibility Compliance

  • Left
  • Center
  • Right
  • Justify
  • Text style
    • Bold
    • Italic
    • Underline
Validate with WAVE
  • Orientation

This example shows the accessibility features of RadToolBar for ASP.NET AJAX.

WAVE is a free web accessibility evaluation tool, which checks for compliance issues with many of the Section 508 and WCAG guidelines. Have in mind that only humans can determine whether a web page is accessible - the above validation link is provided for the sake of completeness.

The control is also visible in Windows High Contrast mode when using Simple skin.

Telerik RadToolBar for ASP.NET AJAX is level AA accessible (in compliance with the W3C Web Accessibility Guidelines 2.0) as well as Section 508 compliant.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="ToolBar.Examples.Accessibility.DefaultCS" %>

<%@ 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 rel="stylesheet" type="text/css" href="styles.css" />
</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 size-narrow">
        <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1" EnableRoundedCorners="false"
            EnableShadows="false" AccessKey="T">
            <Items>
                <telerik:RadToolBarButton Text="<u>L</u>eft" CheckOnClick="true" Checked="true" Group="Align"
                    AccessKey="L">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="<u>C</u>enter" CheckOnClick="true" Group="Align"
                    AccessKey="C">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="<u>R</u>ight" CheckOnClick="true" Group="Align" AccessKey="R">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="<u>J</u>ustify" CheckOnClick="true" Group="Align"
                    AccessKey="J">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarDropDown Text="T<u>e</u>xt style" AccessKey="E">
                    <Buttons>
                        <telerik:RadToolBarButton Text="<u>B</u>old" CheckOnClick="true" AllowSelfUnCheck="true"
                            AccessKey="B" Group="Bold">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="<u>I</u>talic" CheckOnClick="true" AllowSelfUnCheck="true"
                            AccessKey="I" Group="Italic">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="<u>U</u>nderline" CheckOnClick="true" AllowSelfUnCheck="true"
                            AccessKey="U" Group="Underline">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
            </Items>
        </telerik:RadToolBar>
    </div>
    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Orientation" Orientation="Vertical" Expanded="true">
        <Views>
            <qsf:View>
                <asp:RadioButtonList runat="server" ID="OrientationOptions" OnSelectedIndexChanged="OrientationOptions_SelectedIndexChanged"
                    AutoPostBack="true" Style="margin-left: 20px;">
                    <asp:ListItem Text="Horizontal" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="Vertical"></asp:ListItem>
                </asp:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance