Steve Dennis published a stunning experiment using some advanced features of CSS3, such as animations and borders. The main problem with this kind of experiments (I've been there myself) is notifying to assistive technologies (which don't support CSS at all) that all the markup inserted in a given element has only a visual purpose, that is, that they don't need to read it and they can actually skip it.
Since most of the CSS experiments I've seen so far use some kind of wrapper to show their contents, it would be useful if web developers use an hidden element to inform assistive technologies users that what they're reading is actually a visual demo, like so:
<div id="experiment"> <div id="experiment-notice"> This is a visual experiment made with CSS3 that shows a whale falling from the sky into the ocean. Thanks to CSS3, the whole demo is animated. </div> <!-- experiment content here --> </div>
You can hide this notice very easily:
#experiment-notice {
position: absolute;
top: -1000em;
width: 1px;
height: 1px;
overflow: hidden;
}
By doing so, users who surf the web with assistive technologies can actually get a full experience of your contents. I'd like to thank Michele Diodati who first pointed out this issue viewing my experiments.