I’m working on a site right now which has basically a slide show near the top on the front page.
The slide show is made up of a definition list, which uses some Javascript to turn it into a slide show. It consists of a dt which sits on top of the dd. The dd has text and the slide show image as a background image.
Now, all that works just great.
My question involves what to do if Javascript is off…
The slide show has little marketing bits of information, etc., so it’s not just to look pretty, though the information is text, not part of the image. However, if I just let each image sit one after another, you have to scroll through a whole page to get through to the rest of the stuff (about 720px).
I’m thinking of maybe getting rid of the image and display the information in evenly spaced columns for each image.
The information is not merely decoration, and kind of provides my initial text for my page (I think, haven’t 100% decided yet. =p).
Something that isn’t typical of most slide shows though is that the image itself is just decorative, but the text isn’t. The text is also… text, not part of the image. That’s why I’m thinking of placing the text in columns, without the images. Each block of text is smaller than this paragraph, so they’d all likely fit in that space.
What do you guys think? I also like the overflow method (though my Javascript doesn’t use overflow: hidden =p).
And just a note, I love progressive enhancement and graceful degradation, so there is absolutely no HTML generated by Javascript other than what only makes sense unless Javascript there (namely lis for my slideshow buttons, and two little bits of helper text for other scripts). I also have my script add a class called “hasJS”, which causes the script to style itself differently with Javascript (to cooperate with the script).
Yeah, I was really talking about those scripts that insert HTML themselves. Some sites have practically no content at all with JS off, which is ridiculous, IMHO.
I’m not really sure what you are describing here. It sounds like you aren’t having a slideshow any more. There are lots of free sliders out there that are ready made and easy to use. I like Coyier’s Anything Slider. It’s easy to add overflow: auto to it.
I’d say it depends how important the slide-show content is.
If it’s not a critical function and more for looks I’d only show the first image in the slideshow if js is disabled.
Normally the thing to do is set the container for the slideshow to overflow: auto, so that if JS is off the user can scroll through the slideshow contents manually. This works better on some slideshows that others. The JS will usually insert overflow: hidden as an inline style, which overrides the overflow: auto in the stylesheet when JS is on.
In my example above the first image is the only visible one on the screen but the others are still in the source and visible to screen readers.
It’s progressively enhancing the 1 static image to multiple images if js is enabled.
It’s more of a general comment that the way the web is going with HTML5 there’s a lot more reason to believe that js is fast becoming a required technology. See “The New Twitter”…
I like to have fallbacks no matter what, even if it’s just a matter of pride. But I’m also thinking of people with screen readers etc. I like the content to be available to them as well. The ‘progressive enhancement’ movement certainly appeals to me.
EDIT: I do agree, though, that if the content is mere decoration, there’s probably no point in going to such lengths. In that case, you are probably doing screen readers a favor.
But I’m also thinking of people with screen readers etc. I like the content to be available to them as well. The ‘progressive enhancement’ movement certainly appeals to me.