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

    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

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