14. Oktober 2023

Website vorlesen lassen / Text2Speech für barrierefreie/-arme Websites

Um Barrierefreiheit oder -armut auf Websites umzusetzen, ist häufig auch eine Vorlesefunktion erforderlich. Mit Hilfe des jQuery-Plug-ins „articulate.js“ kann man das „Speech Synthesis Interface“ der Web Speech API des Browsers nutzen.

Da „articulate.js“ standardmäßig kein UI bereitstellt, habe ich folgendes Script geschrieben, das einen „Vorlese-Button“ auf der Website einfügt:

Der Button ist so gestaltet, dass er sich ideal mit dem Plug-in „One Click Accessibility“ kombinieren lässt. „One Click Accessibility“ stellt weitere Funktionen bereit, die die Barrierearmut unterstüzten.

„articulate.js“ bietet noch umfangreiche Konfigurationsmöglichkeiten. Mehr Infos dazu finden sich hier: https://github.com/acoti/articulate.js