Maintaining accessibility when creating dynamic element driven by JavaScript

Clients these days require to have dynamic flashy style pages, but a lot of organisations need to maintain their website accessible to a wide audience, whether they don't want to lose potential customers, but also discrimination laws force them to do so.
jQuery and others frameworks offer to create sliders and other rich GUIs rapidly, but try to disable Javascript (easiest when using FireFox to install web developer tool and the disable menu will do the trick) and you found out things stop working.
One of the tricks to achieve both nice looking accessible slider is to use list element and style it with CSS. Generaly you want to create a scroll down list that people can navigate even with a mouse and in the onLoad or onReady event of the JavaScript you hide the vertical scroll bar and style the element.

jQuery("#myDiv").css('overflow','hidden'); 

Javascript enabled

Javascript disabled

In the second image on the right side of the image you can spot the scroll bar and the white line just above the white helmet the person wears is the seperation between seperate items in the list.

The HTML sample is where class is the CSS style, I used in this example the default one, but you can modify and create new ones based on the default one.

<div class="jcarousel-skin-tango" id="mydiv">
  <ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
  </ul>
</div>
The mechanism is based on JavaScript and I used jCarousel.js
that is a plugin for jQuery.