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.
1 2 3 4 5 6 | 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.
1 2 3 4 5 6 7 8 9 10 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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
