Web Speech API – nawigacja na stronie z audiodeskrypcją

Zaprzyjaźniałem się ostatnio z możliwościami Web Speech API przy okazji tworzenia nawigacji po aplikacji webowej. Konieczna była funkcjonalność odczytująca opisy aktywnych elementów. Posłużyłem się w tym celu interfejsem SpeechSynthesis, który jest już obecnie dość dobrze wspierany przez wiodące przeglądarki. Przyjąłem, że powinienem brać pod uwagę te elementy, które posiadają niepsute atrybuty aria-label, aria-labelledby lub aria-describedby. Dodatkowo chciałem, aby obsługiwane były również formularze i ich etykiety.

Demo Web Speech API

Przygotowałem prostą stronę z nawigacją i niewielkim formularzem.

Demo znajduje się tutaj.
Cały kod umieściłem na GitHub.

Strona z nawigacją i formularzem

Kod Web Speech API

Na początek pobrałem wszystkie interesujące mnie elementy.

let describedElements = document.querySelectorAll(`[aria-label]:not([aria-label=""]), [aria-labelledby]:not([aria-labelledby=""]), [aria-describedby]:not([aria-describedby=""]), input[id]:not([id=""]), select[id]:not([id=""]), textarea[id]:not([id=""])`);
let speechLang = lang;

for (const element of describedElements) {
    element.onfocus = () => { readMeNow(element) };
}

let describedElements = document.querySelectorAll(`[aria-label]:not([aria-label=""]), [aria-labelledby]:not([aria-labelledby=""]), [aria-describedby]:not([aria-describedby=""]), input[id]:not([id=""]), select[id]:not([id=""]), textarea[id]:not([id=""])`);

let speechLang = lang;

for (const element of describedElements) {

element.onfocus = () => { readMeNow(element) };

}

Następnie przygotowałem prostą funkcję, która ma odebrać tekst do przeczytania i spróbować go przeczytać na głos. Do celów testowych przyjąłem język angielski ( en-US). Można użyć języka polskiego ( pl-PL) jeśli odczytywany tekst jest w naszej rodzimej mowie.

function readMeNow(element) {
    speechSynthesis.cancel();

    let text = getElementDescription(element);

    let message = new SpeechSynthesisUtterance(text);
    message.lang = 'en-US';

    speechSynthesis.speak(message);
}

function readMeNow(element) {

speechSynthesis.cancel();

let text = getElementDescription(element);

let message = new SpeechSynthesisUtterance(text);

message.lang = 'en-US';

speechSynthesis.speak(message);

}

Pozostałych ustawień dla klasy SpeechSynthesisUtterance nie używam w tym przykładzie, ale łatwo nimi manipulować za pomocą kilku właściwości.

Należą do nich:

lang – ustawianie języka
pitch – wysokość / ton dźwięku
rate – szybkość wymowy
text – tekst
voice – rodzaj głosu
volume – głośność

Funkcja getElementDescription próbuje pobrać tekst z elementu aria-label lub innych, opisanych wyżej.

function getElementDescription(element) {
    let label = element.getAttribute('aria-label');
    let labelledby = element.getAttribute('aria-labelledby');
    let describedby = element.getAttribute('aria-describedby');
    let id = element.getAttribute('id');

    if(label)
    {
        return label;
    }
    else if(labelledby)
    {
        return (document.getElementById(labelledby)).getAttribute('aria-label');
    }
    else if(describedby)
    {
        return (document.getElementById(describedby)).textContent;
    }
    else if(id)
    {
        return (document.querySelector(`[for=${id}]`)).textContent;
    }

    return '';
}

function getElementDescription(element) {

let label = element.getAttribute('aria-label');

let labelledby = element.getAttribute('aria-labelledby');

let describedby = element.getAttribute('aria-describedby');

let id = element.getAttribute('id');

if(label)

{

return label;

}

else if(labelledby)

{

return (document.getElementById(labelledby)).getAttribute('aria-label');

}

else if(describedby)

{

return (document.getElementById(describedby)).textContent;

}

else if(id)

{

return (document.querySelector(`[for=${id}]`)).textContent;

}

return '';

}

Efekt końcowy

Demo Web Speech API: https://webroad.pl/demo/audio-described-navigation

Kod na GitHub: https://github.com/michalkortas/audio-described-navigation

Tagi: audiodeskrypcja • nawigacja • SpeechSynthesis • SpeechSynthesisUtterance • top • Web Speech API

Web Speech API – nawigacja na stronie z audiodeskrypcją

Demo Web Speech API

Kod Web Speech API

Efekt końcowy

Dodaj komentarz Anuluj pisanie odpowiedzi

Partner technologiczny

Najnowsze komentarze

pjotruh

mizzo

odnowienie certyfikatu

domin

Ban