Speech widget code for accessibility: offer an audio option to every visitor
Some visitors prefer to listen rather than read. A speech widget gives them an audio option with one line of code. Here is how to set it up thoughtfully.
Published:
Not every visitor reads a page the same way. People with low vision, reading difficulties or tired eyes, and people who are simply multitasking, often prefer to listen. A text to speech widget gives them that option on demand, alongside your existing content.
A speech widget is an extra option, not a replacement for accessible HTML. Proper headings, alt text, contrast and keyboard navigation still matter, and screen reader users rely on them. The widget adds a convenient audio path on top.
Add the widget
Create a Speech widget in Widgets and copy the code:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
A good spot is near the top of long articles or help pages, with a short label such as "Listen to this text". Visitors paste or type a passage and hear it read aloud, with a download link if they want to keep the audio.
Settings that help
- Clear labels: write a title and button label that say exactly what happens, for example "Read aloud".
- A helpful placeholder: tell visitors what to paste, such as "Paste a paragraph to hear it".
- A friendly error text: if something goes wrong, visitors see your message instead of a technical error.
- Theme: the auto theme follows the visitor's light or dark preference, which many people set for comfort.
- A steady voice: choose a clear, moderately paced voice and test it with your own text.
Keep it reliable
An accessibility feature that stops working is worse than none, so put the guard rails in place:
- API key: every widget runs under one of your API keys. Use a dedicated one (the last option in the editor's key list is Create new API key) and give it a daily spend limit you are comfortable with.
- Alerts: turn on Email me when a widget fails under Settings, Widget controls. You get at most one email per widget per day when something you can fix goes wrong, such as an empty balance.
- Health at a glance: the widget list shows when each widget was last used and its last error.
Allow your sites
List the domains where the widget may run under Settings, Widget sites. For local testing, add localhost:3000 or the port you use.
Learn more about speech models in the speech docs and set up your widget on the widgets page.