Is there a way to Show/Hide elements without CSS?

Question

Hello All,

I am making one Web UI 508 compliant and one requirement states "working with Web UI when CSS is disabled". We have several places where we show/hide elements using style=display:inline and style=display:none and calling them accordingly using JS function calls. When i disable the CSS (using WAT2.0), the hidden elements are also being shown which does not make the UI good. We have these kind of things in several places like collapsed/expanded descriptions, popups on mousemove etc.,

Is there any other way to show/hide elements other than using style tags? Please advice!

Thanks & Regards Prasanna Ram

Answer 1

This sounds cumbersome, but you could build a simple library that actually removes the nodes from the DOM and inject them back when they're needed. You could still have an object that saves all the removed nodes as variables, so that you don't have to recreate them when inserting.

I must say, though, that when requirements specify that the site should work with CSS disabled, that rarely means it's supposed to function exactly the same way in all respects with CSS disabled. If you've got an expand-/collapsible list, for instance, I'd assume that an acceptable compromise for those with CSS disabled would be to always show the content of all items in the list.

Answer 2

I'm not really sure this is possible. It sounds like the design of the page really should be around this requirement.

I think you should approach this as if you didn't have any JavaScript either. Then you would have to rely on page refreshes to show/hide elements. I.e. when you click to show/hide something, refresh the page, and then you server-side code would perform the logic of whether the field was incldued on the page.

If it is an input field, I suppose it could still be included as a hidden field?

This may sound a bit clunky, but is actually quite a good thing, as you are moving along the path to unobtrusive JavaScript

Answer 3

You can remove the elements from the DOM instead of hiding them, but I don't think there's a good reason to do so. As far as I know, screen readers will respect display: none, and I can't think of any other reason a client should support scripting, but not CSS...

What you should do is make sure that the site is still usable with scripting disabled (as long as it's an actual site and not a web app): progressive enhancement/graceful degradation are the key phrases here...

Answer 4

In this case do it with javascript. Just remove element from body tag and place it back when needed.

window.holder = [];
function switchNodes(source, target){
    var parentNode = source.parentNode;
    if(parentNode && !target.parentNode){
        parentNode.insertBefore(target,source);
        parentNode.removeChild(source);
        return true;
    }

    return false;
}

function show(node){
    for(var i=0,item;item = holder[i];i++){
        if(item.node == node){
            var span = item.span;
            switchNodes(span, node); 
            holder.splice(i,1);
            return true;
        }
    }

    return false;
}

function hide(node){
    var span = document.createElement("span");
    if(switchNodes(node,span)){
        holder.push({node: node, span : span});
        return true;
    }
    return false;
}

Answer 5

Section 508 seems to be some kind of US regulation for web accessibility.

Having things that dynamically hide and show on mouse move or clicking is not all that good for accessibility. Screen reader software tends to be fairly simple, and won't necessarily know how to handle dynamic changes to a page.

I'd suggest designing your pages to use clean semantic HTML that looks good with CSS off, and then use CSS and JavaScript to make the page more attractive or powerful where it's supported. Also try previewing your site in Links during development.

Answer 6

You can also consider to show/hide the elements in the server side. Instead of using Javascript, just submit the form to the server and make use of the power of taglibs and EL in JSP.

E.g.

<c:if test="${someCondition}">
    <p>This is displayed if ${someCondition} evaluates to true.</p>
</c:if>

An extra benefit is that this would also make your Javascript unobtrusive, which is certainly highly appreciated when talking about accessibility.

Answer 7

Web UI 508 compliance requires that all content that is available to a user with style or script be accessible to users without- often this means hyperlinking to static pages, but it can also involve using server side code to simulate dynamic scripts.

An accessible site is always easiest to develop by starting with a site that is accessible, and then adding style and script features as supported.

Answer 8

## I usually I use this way: ##

  if (this.RadioButtonList1.SelectedValue == "Date") { this.divByDate.Attributes.Add("style", "display:block"); }
    else { divByDate.Attributes.Add("style", "display:none"); }

Answer 9

I think of the web as nothing but a continuous string of characters, so with my methodology, you can grab the innerHTML of an element and modify it to dynamically manipulate the source of the page. There's a few ways to go about this.

1. Simply remove content within a parent element by setting its innerHTML to a blank string.

   document.getElementById('myElement').innerHTML = '';
   

2. Another cheap trick I have used is to add HTML comments in my source so I can add "tags" of sorts and grab text between them with a regular expression.

   <body>
     <!--Start-->
       <div>Hello World.</div>
     <!--End-->
     <div>Au revoir.</div>
   </body>
   

   You could then do a JavaScript regular expression to replace everything between your tags.

   document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, '');
   

   The regular expression finds the tag and then zero or more whitespace or non-whitespace characters followed by my tag and replaces it with a blank string, leaving you with the following.

   <body>
     <div>Au revoir.</div>
   </body>
   

3. And of course, you could always use a JavaScript library (jQuery, Mootools, Prototype, etc.) to help you do some of this. These libraries have methods for removing DOM objects.

If you want to be able to write the content back, simply save it to a variable and insert an HTML comment with an identifier inside of it. Do another regular expression replace and it's back.