Code du widget de synthèse vocale pour l’accessibilité : une option audio pour chaque visiteur

Tous les visiteurs ne lisent pas une page de la même manière. Les personnes malvoyantes, celles qui ont des difficultés de lecture ou les yeux fatigués, et celles qui font simplement plusieurs choses à la fois préfèrent souvent écouter. Un widget de synthèse vocale leur offre cette option à la demande, à côté de votre contenu existant.

Un widget de synthèse vocale est une option supplémentaire, pas un substitut à un HTML accessible. Une bonne structure de titres, des textes alternatifs, un contraste suffisant et la navigation au clavier restent essentiels, et les utilisateurs de lecteurs d’écran en dépendent. Le widget ajoute par-dessus une voie audio pratique.

Ajoutez le widget

Créez un widget Voix dans Widgets et copiez le code :

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

Le haut des articles longs ou des pages d’aide est un bon emplacement, avec un libellé court comme « Écouter ce texte ». Les visiteurs collent ou saisissent un passage et l’entendent lu à voix haute, avec un lien de téléchargement s’ils veulent conserver l’audio.

Des réglages utiles

• Des libellés clairs : rédigez un titre et un libellé de bouton qui disent exactement ce qui se passe, par exemple « Lire à voix haute ».
• Un texte du champ utile : indiquez aux visiteurs quoi coller, comme « Collez un paragraphe pour l’écouter ».
• Un message d’erreur bienveillant : en cas de problème, les visiteurs voient votre message plutôt qu’une erreur technique.
• Thème : le thème Selon le visiteur suit la préférence claire ou sombre du visiteur, que beaucoup de personnes règlent pour leur confort.
• Une voix posée : choisissez une voix claire, au débit modéré, et testez-la avec votre propre texte.

Assurez sa fiabilité

Une fonctionnalité d’accessibilité qui cesse de fonctionner est pire que pas de fonctionnalité du tout : mettez donc des garde-fous en place.

• Clé API : chaque widget fonctionne avec l’une de vos clés API. Utilisez une clé dédiée (la dernière option de la liste des clés de l’éditeur est Créer une nouvelle clé API) et donnez-lui une limite de dépense quotidienne qui vous convient.
• Alertes : activez M’envoyer un e-mail quand un widget échoue dans Paramètres, Contrôles des widgets. Vous recevez au plus un e-mail par widget et par jour lorsqu’un problème que vous pouvez corriger survient, comme un solde vide.
• L’état en un coup d’œil : la liste des widgets indique la dernière utilisation de chaque widget et sa dernière erreur.

Autorisez vos sites

Indiquez les domaines sur lesquels le widget peut fonctionner dans Paramètres, Sites du widget. Pour les tests en local, ajoutez localhost:3000 ou le port que vous utilisez.

Pour en savoir plus sur les modèles de synthèse vocale, consultez la documentation de synthèse vocale et configurez votre widget sur la page des widgets.