Appendix JS_G_A1

Requirement: All non-text content has an equivalent text alternative.

Details: Visually-dynamic information (such as a progress meter) should have a text equivalent.

Refer to the JS_G_A1 live demo for a working example.

<p id="demo">
    <span><em>Progress: 0%</em></span>
</p>

var meter = document.getElementById('demo');
var visual = meter.getElementsByTagName('span').item(0);
var text = meter.getElementsByTagName('em').item(0);
 
var maxwidth = 200;
var progress = 0;
 
var timer = window.setInterval(function()
{
    progress += 2;
 
    text.firstChild.nodeValue = 'Progress: ' + progress + '%';
 
    visual.style.width = ((maxwidth / 100) * progress) + 'px';
 
    if(progress === 100)
    {
        window.clearInterval(timer);
    }
 
}, 100);