Degrade RadTabStrip accessibility

[bnye]

I have a simple RadTabStrip and MultiPage combination. However, I want to be sure that they work if a user doesn't have Javascript enabled. Unfortunately, I can't seem to get this to work. I tried using querystirngs and the preventing postback in the OnClientTabSelcting, but that didn't work. I tried ajaxifying them using RadAjaxProxyManager (its a usercontrol) and using values to identify the selected tab, but that didn't seem to Ajaxify the RadMultiPage when Javascript was enabled. And am I missing something simple here?

[Paul]

Hi bnye,

While we do our best to provide fully accessible controls, the ASP.NET WebForms methodology itself does not provide out-of-the-box accessibility due to its nature - that is, because postbacks are inaccessible (for example, the LinkButton renders a javascript: link).

Having that said, you can create a website that is accessible using RadControls - in the case of RadTabStrip, this can be achieved by setting the proper NavigateUrl. This way the control will not rely on postbacks and therefore will be accessible. Unfortunately, this also renders the PageViews unusable (one page will be needed for each tab). Also, as mentioned, some features cannot degrade gracefully (the scrolling of tabs, etc.)

Let me know if you have more concerns about the accessibility of the controls.

Sincerely yours,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[bnye]

I see what you mean. However, if there was a way to prevent the NavigateURL when javascript is enabled.

This the effect I was going for (try it with javascript and without)

https://wwws.mint.com/login.event?task=S

Sincerely,

Ben

[Paul]

Hello bnye,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadScriptBlock runat="server">

        <script type="text/javascript">
            function pageLoad()
            {
                var tabStrip = $find( "<%=RadTabStrip1.ClientID %>");
                for (var i=0; i< tabStrip.get_allTabs().length; i++)
                {
                    tabStrip.get_allTabs()[i].get_linkElement().href = "";
                }
            }
        </script>

    </telerik:RadScriptBlock>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
        <Tabs>
            <telerik:RadTab runat="server" Selected="True" Text="Root RadTab1" NavigateUrl="http://www.google.com">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab2" NavigateUrl="http://www.google.com">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="RadPageView1" runat="server">
            RadPageView1</telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server">
            RadPageView2</telerik:RadPageView>
    </telerik:RadMultiPage>
</form>

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[bnye]

Paul -

Perfect. Thanks.