Along with Michael at Valley Web Designs, we are currently developing a Dreamweaver extension for this solution. Please be sure to check back very soon for this!
- Popup-blocker friendly.
- I do not open a new window, the "slideshow"is displayed within the same document.
- Browser friendly.
- This solution works in most browsers (including IE5 Win and Mac, FF 0.8, NN6, etc.) and should degrade nicely in others.
- Image-off friendly.
- I am using the DOM with my Image replacement technique to create and then hide text links. This text shows when images are "turned off".
- CSS-off friendly.
- The slideshow is fully accessible even if the document is unstyled.
- Screen-reader friendly.
- I am using the DOM to create text links so screen-readers should speak title and description. There is nothing in the slideshow that is not already available to screen-reader users.
- Keyboard friendly.
- It is possible to use tabbing navigation to navigate through the images from the slideshow.
When the slideshow is closed, focus is set to the appropriate thumbnail (along with a visual clue), allowing users to tab "from there".
In case there is no style support the user does not experience a "page jump".
- Web-standards friendly.
- I am using unobtrusive DOM scripting to create the slideshow on the fly.
There are no hidden containers (
div, ...) nor attributes to pollute the HTML markup.
What appears in the "slideshow" is nothing other than the value of these 3 attributes:
- Bandwidth friendly.
- Images are not loaded with the document, they are only downloaded at the user's request.
- Web Accessibility Guidelines friendly.
- Larger images are accessible without DOM support.
Documents linked through the
longdescattribute are more accessible.
- User friendly.
- No popup windows, no page refresh.
- Larger images should appear in full above the fold.
- A counter keeps track of the navigation through the gallery.
- A mouse click on the larger image closes the slideshow.
- Web author friendly.
- The larger image in the slideshow is not a background image, but an
IMGelement. So there is no image size constraint and text should not overlap regardless of user settings.
Important: I recently found out that the SEO Links Extension for Firefox disables the caption below the image.
The show-hide behavior of the Definition List on this page is powered by easyFAQ.
Please use this form to report bugs and errors.