Focus an item when iterating over the

I am simulating a screen reader for my web page. What I do is that I add all the elements of the DOM inside an array and then when the user presses some combination of keys in the array and using the speechSynthesis API of html5 I generate the audio according to the text that has that element.

The problem is that I want to make focus in the element that I am "reproducing".

The code with which I generate the array of elements:

function walkDOM(main) {
    var arr = [];
    var loop = function(main) {

        do {

            if(main.hasChildNodes())
                loop(main.firstChild);
            else if(main.nodeName === "IFRAME"){
                var documentIframe = main.contentWindow.document;
                loop(documentIframe.getElementsByTagName("body")[0]);
            }
            else if(main.nodeName !== "#comment") {
                arr.push(main);
            }
        }
        while (main = main.nextSibling);

    };
    loop(main);
    return arr;
}

And with this I am in charge of iterating in the arrangement that I get when the user presses ctrl + space

function PulsarTecla(e) {   
    var e = e || event;

    if(e.ctrlKey && e.keyCode == 32){
        allElements = walkDOM(document.body);
        console.log(allElements);
        for(var i = 0; i < allElements.length; i++){
            console.log(allElements[i])
            allElements[i].parentNode.focus(); // hago focus en el padre del texto sin embargo no aparece nada en pantalla

            habla(allElements[i].textContent);



        }
    }
}

The function that is responsible for "talking"

function habla(palabra) {
        speech = window.speechSynthesis;
        voz = speechSynthesis.getVoices()[3];
        utterThis = new SpeechSynthesisUtterance(palabra, voz, 1, 1);
        speechSynthesis.speak(utterThis);
}