OrgChart - WCAG 2.0 and Section 508 Accessibility Compliance

  • Team: Management
    • CEO
    • CTO
    • Team: Unit
      • Unit Managers
      • Team Leaders
      • Team: Development
        • Developers
        • QAs

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

This example shows the accessibility features of RadOrgChart for ASP.NET AJAX. The ImageAltText property is set to render non-empty alt atributes for the images.

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

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

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.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>
</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-medium">
        <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1" Skin="Simple">
            <Nodes>
                <telerik:OrgChartNode>
                    <RenderedFields>
                        <telerik:OrgChartRenderedField Text="Team: Management" />
                    </RenderedFields>
                    <GroupItems>
                        <telerik:OrgChartGroupItem Text="CEO" ImageAltText="ceo" />
                        <telerik:OrgChartGroupItem Text="CTO" ImageAltText="cto" />
                    </GroupItems>
                    <Nodes>
                        <telerik:OrgChartNode>
                            <RenderedFields>
                                <telerik:OrgChartRenderedField Text="Team: Unit" />
                            </RenderedFields>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Unit Managers" ImageAltText="unit managers" />
                                <telerik:OrgChartGroupItem Text="Team Leaders" ImageAltText="team leaders" />
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode ColumnCount="2">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team: Development" />
                                    </RenderedFields>
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="Developers" ImageAltText="developers" />
                                        <telerik:OrgChartGroupItem Text="QAs" ImageAltText="QAs" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                    </Nodes>
                </telerik:OrgChartNode>
            </Nodes>
        </telerik:RadOrgChart>
        <hr class="clear-float" />
    </div>
    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?