1

Estoy simulando un lector de pantalla para mi pagina web. Lo que hago es que agrego todos los elementos del DOM dentro de un array y luego cuando el usuario presiona cierta combinación de teclas itero en el array y usando la API de speechSynthesis de html5 genero el audio de acuerdo al texto que tenga dicho elemento.

El problema es que quiero que vaya haciendo focus en el elemento que estoy "reproduciendo".

El código con el cual genero el array de elementos:

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;
}

Y con esto me encargo de iterar en el arreglo que obtengo cuando el usuario preciona 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);



        }
    }
}

La función que se encarga de "hablar"

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

1 respuesta 1

0

Primero deberías comprobar que el elemento que quieres que reciba el foco es susceptible de ese estado.

Aquí explicaron qué elementos puede recibirlo y su comportamiento: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus

En caso contrario, creo que deberías hacer esos cambios con CSS, por ejemplo ponerle un fondo y quitarlo cuando vaya a pasar a la siguiente sílaba.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.