Read Aloud

This feature uses the speechSynthesis API to read out the text on the webpage. This is useful for visually impaired users who do not have a screenreaders, or any other users who might want to listen to the content of your page rather than read it.


The parameter in this method is optional. If you do not provide a parameter, the widget will automatically look for the relevant content in your webpage in the following list. If the first one is not found, it will go on to the next, and so on. When it finds the element, it extracts the plain text and reads it out.

Order Query Description
0 parameter value The element from query provided as parameter.
1 [data-read-aloud] The element with data-read-aloud data attribute.
2 [role="main"] The element with role="main" ARIA attribute.
3 main The <main> element.
4 article The <article> element.
5 section The <section> element.
6 body > * The first child of the <body> element.
7 body The <body> element.
8 html The <html> element.

You can also add the attribute data-read-aloud to an element to make it the default read aloud element. If you provide a parameter, the content in that element will be read out.

Semantic Code

Ideally, your webpage should contain one (and no more) main tag wherein all the primary content is present. However, due to framework constrains, if you're stuck with a div, make sure you add role="main" to allow screenreaders find it faster.

You can add this method to a button with a simple onclick event, for example:

<button onclick="agastya.readAloud('.read-aloud-demo')">Read Aloud This Section</button>
<button onclick="agastya.readAloud()">Read Aloud Everything</button>