Telerik blogs

As you may know accessibility standards require a web page to work when JavaScript is disabled. In this blog post I will show you how to make RadMenu work even without JavaScript. I will also show how to make JAWS reader "see" all items rendered by RadMenu (even the hidden ones).

Disabling JavaScript

First we need to find a way to disable JavaScript in our browser of choice. For FireFox you need to install the web developer toolbar plugin. Then you can easily use the "Disable JavaScript" option:

image

In Internet Explorer you should first edit the security settings for the zone in which your test page is. Be careful to select the right zone - if you are testing locally you need to customize the "Local Intranet" zone:
 image

Then set the "Active scripting" option to "Disable":

image

Making RadMenu open when JavaScript is disabled

By default RadMenu items open in response of the JavaScript mouseover event. This means that when JavaScript is disabled items won't open. Fortunately most modern browsers support the ":hover" pseudo CSS class on every HTML element. This allows the menu items to open only by using CSS:

<style type="text/css" title="RadMenu-Pure-Css">   
    .RadMenu .rmItem:hover > .rmSlide,   
    .RadMenu .rmItem:hover > .rmSlide .rmGroup   
    {      
        display: block;      
        overflow: visible;      
    }      
    .RadMenu .rmItem:hover .rmSlide   
    {      
        top: 100%;      
        left: 0;      
    }      
    .RadMenu .rmItem .rmItem:hover .rmSlide   
    {      
        top:0;      
        left: 100%;      
    }      
    .RadMenu .rmVertical .rmItem   
    {      
        float:none;   
    }     
</style> 
 
 

Have in mind that animations will not work (remember that JavaScript is disabled). This CSS will affect the normal RadMenu behavior if JavaScript is enabled. To remove it we can use a few lines of JavaScript:

<body>   
    <script type="text/javascript">   
        //<!--   
        var styles = document.getElementsByTagName("style");   
        for (var i = 0; i < styles.length; i++)   
        {   
            if (styles[i].title == "RadMenu-Pure-Css")   
            {   
                styles[i].parentNode.removeChild(styles[i]);   
                break;   
            }   
        }   
        //-->   
    </script> 
 
 

That code will run only if JavaScript is enabled and remove the workaround stylesheet (based on its title).

What about older browsers which are still widely used?

Internet Explorer 6 supports the ":hover" pseudo CSS class only for "a" elements. This means that the aforementioned workaround will not work at all. What can we do about this? We can simply show all items to the user in case JavaScript is disabled. Here is the CSS:

<style type="text/css" title="RadMenu-Pure-Css">   
    div.RadMenu div.rmSlide,   
    div.RadMenu ul.rmGroup,   
    div.RadMenu ul.rmRootGroup   
    {      
        display: block;      
        overflow: visible;   
        position:static;   
        float:none;   
    }   
    div.RadMenu li.rmItem   
    {   
        float:none;   
    }   
</style> 

Here is how the final result looks like:

image

Again you can hide it from browsers which have enabled JavaScript by using the code from the previous paragraph.

What about postbacks?

RadMenu is using JavaScript in order to postback when the user subscribes to the ItemClick event. When JavaScript is disabled the ItemClick event simply won't fire. Fortunately there is a workaround - using the ItemTemplate and controls which postback without JavaScript:

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Hay">   
    <ItemTemplate>   
        <asp:Button runat="server" ID="Button1"   
            CommandArgument="<%# Container.UniqueID%>"   
            Text="<%#Container.Text %>" OnCommand="Button1_Command" />   
    </ItemTemplate>   
 </telerik:RadMenu> 

The <asp:Button /> control does not require JavaScript in order to postback as it renders as <input type="submit" />. By assigning CommandArgument we can later determine which RadMenuItem initiated the postback:

protected void Button1_Command(object sender, CommandEventArgs e)   
{   
    RadMenuItem menuItem = (RadMenuItem) Page.FindControl((string)e.CommandArgument);   
    Label1.Text = menuItem.Text;   

We shall also need some CSS to make the buttons look more than regular menu items:

<style type="text/css">   
div.RadMenu li.rmItem input   
{   
    padding:0;   
    margin:0;   
    border:0 none;   
    background: transparent;   
    font: normal 11px/17px arial,sans-serif;   
    height: 17px;   
}   
</style> 

And that's all! Clicking the button (which looks like a menu item) will trigger its Command event.

JAWS reader compatibility

By default JAWS reader will not read all menu items rendered by RadMenu. This is so because invisible items are inside an element whose display CSS attribute is set to none (for performance and cross browser reasons). However with some CSS (do you recognize the pattern :) ) you can make the items hidden by setting the left CSS attribute:

<style type="text/css">  
        div.RadMenu .rmSlide,   
        div.RadMenu .rmSlide .rmGroup   
        {      
            display: block !important;   
            left: -999px;   
        }  
</style> 

In Interent Explorer JAWS will also tell us that there are some frames. These are the IFRAMEs generated by RadMenu required to properly overlay windowed HTML elements (such as dropdownlists). If you don't have any dropdownlists which RadMenu should overlay you can use the following CSS to hide those IFRAMEs from JAWS:

div.RadMenu .rmSlide iframe   
{   
    display:none;     

I hope this helps. And don't forget to enable JavaScript back after finished testing :)

[Download]


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.