Appendix JS_C_A11

Requirement: Maintain a logical focus order for interactive components.

Details: Use scripting to re-order content in the DOM.

<ol id="demo">
    <li><a href="...">New South Wales</a></li>
    <li><a href="...">Victoria</a></li>
    <li><a href="...">Queensland</a></li>
    <li><a href="...">Western Australia</a></li>
    <li><a href="...">South Australia</a></li>
    <li><a href="...">Tasmania</a></li>
    <li><a href="...">Australian Capital Territory</a></li>
    <li><a href="...">Northern Territory</a></li>
</ol>

var list = document.getElementById('demo');
 
function clean(element)
{
    for(var x = 0; x < element.childNodes.length; x ++)
    {
        var child = element.childNodes[x];
        if(child.nodeType == 8 
            || (child.nodeType == 3 
                && !/\S/.test(child.nodeValue)))
        {
            element.removeChild(element.childNodes[x --]);
        }
        if(child.nodeType == 1)
        {
            clean(child);
        }
    }
}
 
clean(list);
 
list.addEventListener('keydown', function(e)
{
    if((e.keyCode == 38 || e.keyCode == 40) && !e.shiftKey) 
    {
        var target = e.target;
        do
        {
            if(target.nodeName.toLowerCase() == 'li')
            {
                break;
            }
        }
        while(target = target.parentNode);
 
        if(target)
        {
            if(e.keyCode == 38 && target.previousSibling)
            {
                target.parentNode.insertBefore(
                     target, 
                     target.previousSibling);
            }
            else if(e.keyCode == 40 && target.nextSibling)
            {
                target.parentNode.insertBefore(
                     target, 
                     target.nextSibling.nextSibling);
            }
            target.firstChild.focus();
 
            e.preventDefault();
        }    
    }
}, false);