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