The diagram is hand-coded. It uses SVG animation to present an interactive demonstration, aria-live to make the commentary on what is happening accessible, and a script to make the animation keyboard-accessible.
Each object is self-contained, has a title with aria-labelledby to identify it. That makes it possible to navigate around with a screenreader and find out what pieces there are in the diagram.
The overall graphic has title and desc provided, the description labeled with aria-describedby.
A number of graphic objects are animated using SVG animate elements - these are all triggered by the event heat.click with a time offset as relevant - i.e. once you click the button marked "heat" everything runs automatically.
The heading text Heating water, from ice to steam uses role="heading" aria-level="1".
The status indicator is marked aria-live="polite" and uses <set attributeName="visibility"… to change the visibility of various text elements which are positioned in the same place.
The heat button has role="button" tabindex="o" and there is a script included so firing a keydown for the space bar while focused on the button generates a click event.
The water, and the burner, use set attributeName="aria-labelledby"… to change their title, but I haven't yet tested whether that does anything if you're focused on them.
I used a simple stylesheet for most of the components. The code is inline inside HTML, and the stylesheet is part of the HTML container:
There is no native way to start an animation from the keyboard. You can reliably make things focusable, using tabindex. But once you get there you need a mouseclick. The SVG accesskey attribute doesn't seem to be implemented. I had to use a script to fire a synthetic click event with a JS listener for a specific key code:
<script><![CDATA[
var heat=document.querySelector("#heat");
heat.addEventListener("keydown",start);
function start(e){
if (e.keyCode == 32 || e.keyCode == 13) {
var theClick = new MouseEvent("click");
heat.dispatchEvent(theClick);
}
}
]]></script>Using animate to change a value that doesn't have obvious interpolation - e.g. from visibility="hidden" to visibility="visible"Blink and Webkit will animate in discrete steps at the beginning of an animation, whereas Firefox does it in the middle of the duration. So I did the thing I meant to do as used set instead…
IE and Edge do not support SVG animation, so the demonstration doesn't work at all.
On MacOS 10.10 in Safari 10, the animation can be started purely from the keyboard although there is no focus indicator so it isn't clear that this works. The status is updated through VoiceOver as expected.
On MacOS 10.10 in Blink-based browsers Opera and Yandex, the animation can be started purely from the keyboard, the status is updated through VoiceOver as expected.
In Firefox 51 on MacOS 10.10, the animation works as in other browsers, and the overall description is offered through VoiceOver.
The people who made SVG, and then made it work, are many, and never get enough thanks. If you meet someone who implemented SVG, filed or fixed a bug, tested or taught SVG, please say thank you.
A few people explicitly helped with this demo. In no special order:
Stéphane Deschamps, Luis Calvo Díaz, Levon Spradlin, Léonie Watson, Whoever made the MSDN page I looked at