Splitter - WCAG 2.0 and Section 508 Accessibility Compliance

Pane1
Pane2
Pane3
Main Pane
Pane1
Pane2
Pane3
Validate with WAVE
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSplitter is compliant with Section 508 and Level A of the WCAG 2.0 Guidelines. Run WAVE, the automated web accessibility evaluation tool, to check the accessibility level of the control yourself.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.Accessibility.DefaultCS" %>

<!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>
</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-wide">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="200"
            Width="800">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="none">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22">
                    <telerik:RadSlidingPane ID="Pane1" Title="Pane1" runat="server" Width="150">
                        Pane1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150">
                        Pane2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150">
                        Pane3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MiddlePane" runat="server">
                Main Pane
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar2" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server" Width="22" Scrolling="none">
                <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22" DockedPaneId="Radslidingpane2"
                    SlideDirection="Left">
                    <telerik:RadSlidingPane ID="Radslidingpane1" Title="Pane1" runat="server" Width="150">
                        Pane1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150">
                        Pane2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150">
                        Pane3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>

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

Find Assistance

Help Us Improve

Was this example helpful?