S5 and Incremental Rendering of Graphics

S⁵ is moving quickly – within the last few days, it has seen three revisions — the most important of which is seen in the 1.1a3 version with incremental display. If you aren’t aware, S⁵ provides a framework for creating well-structured and accessible presentation materials. We’ve been using Opera Show for our accessibility presentations at WATS.ca for the past year or so, but I was immediately attracted to S⁵ because of its cross-browser compatibility.

I decided to try S⁵ for a presentation I was giving last night, and I wanted a particular graphic to render incrementally. Here’s how I did it using the incremental display from the first alpha release to incorporate incremental rendering: S⁵1.1a3.

A Preview

Before you see the code – I’ve posted a copy of the actual slide I used. See the demonstration slide deck.

For what it’s worth, I didn’t spend a lot of time reworking Eric’s templates. I changed a few colours and fonts and that is about it. (If you are interested, the full presentation is available as well: Web Accessibility and Usability: The Human Factor.)

In essence, I applied Dave Shea‘s CSS Sprites approach to create an ordered list of items to display incrementally, each with its own background image that is absolutely positioned on the screen. The slide starts with a “greyed out” version of the graphics and then changes them as the ordered list displays incrementally through the magic and goodness that is S⁵.

The end result is incremental display of the graphic components in the order that you want them to appear. In theory, you could use this strategy to place other graphics whereever you wanted them to appear. The only issue I’ve found so far with incremental rendering is that if you revisit a slide you’ve already viewed, the last item in the list is still considered the “current” one. Not really a big deal — it is the first time through where it really counts.

The HTML Code

1. <ol id=”schematic” class=”inc”>
2. <li id=”phil”>Philosophy</li>
3. <li id=”imp”>Implementation</li>
4. <li id=”aware”>Awareness</li>
5. </ol>

The CSS

1. ol#schematic {
2. list-style-type: none;
3. }
5. ol#schematic li {
6. display: inline;
7. text-indent: -999px;
8. }
10. ol#schematic li#phil {
11. position: absolute;
12. left: 200px;
13. top: 150px;
14. width: 187px;
15. height: 118px;
16. background-image: url(../pix/philosophy_gr.gif);
17. background-repeat: no-repeat;
18. }
20. ol#schematic li#aware {
21. position: absolute;
22. left: 400px;
23. top: 150px;
24. width: 187px;
25. height: 118px;
26. background-image: url(../pix/awareness_gr.gif);
27. background-repeat: no-repeat;
28. }
30. ol#schematic li#imp {
31. position: absolute;
32. left: 600px;
33. top: 150px;
34. width: 187px;
35. height: 118px;
36. background-image: url(../pix/implementation_gr.gif);
37. background-repeat: no-repeat;
38. }
40. ol#schematic li#phil.current {
41. left: 200px;
42. background-image: url(../pix/philosophy.gif);
43. background-repeat: no-repeat;
44. }
46. ol#schematic li#aware.current {
47. left: 400px;
48. background-image: url(../pix/awareness.gif);
49. background-repeat: no-repeat;
50. }
52. ol#schematic li#imp.current {
53. left: 600px;
54. background-image: url(../pix/implementation.gif);
55. background-repeat: no-repeat;
56. }

The Printable View

I also used the .handout class to show the images in the printable version – it will display the ordered list, as well as the raw graphics themselves, and a definition list that explained my thoughts behind the diagram of how I saw the relationship fitting together. I could have used headings and paragraphs, but I felt the definition list more closely matched the structure that I was aiming to demonstrate with the graphic.

1. <div class=”handout”>
2. <img src=”./pix/philosophy.gif” alt=”” />
3. <img src=”./pix/awareness.gif” alt=”” />
4. <img src=”./pix/implementation.gif” alt=”” />
5. <dl>
6. <dt>Philosophy of Web Accessibility</dt>
7. <dd>Part of this philosophy…</dd>
8. <dt>Implementation of Techniques</dt>
9. <dd>This encompasses best practices…</dd>
10. <dt>Awareness</dt>
11. <dd>Awareness serves as a bridge between…</dd>
12. </dl>
13. </div>