ToolBar - Accessibility

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

Orientation


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

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 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 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>

Find Assistance

Help Us Improve

Was this example helpful?