Accessible Web Pages with Text-to-Speech
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Accessible Web Pages with Text-to-Speech

This project consists of a set of web pages along with associated css, and js resources that offer simple low clutter layouts, easy tab/enter navigation, and text-to-speech output. In addition, the pages have a crude editor built in offering users with limited technical skills means to construct customized pages. Together the page set was intended to offer simple alternative communication means, or a way for producing and presenting accessible curricula. I envisioned the set as a quick way to provide students at our school with easy-access materials that were very local, timely, compelling for them, and not covered by more full featured subscription services like Unique Learning and News2You.

The web page tempates in the collection can be used to construct a static website. All that is needed is a web browser, an editor like Geany, and a place to host the pages like Neocities, or even your hard drive. The simplest method for saving a page like the gridBuilder is to use "Save as webpage complete" which would store the page and resources on your computer. The gridBuilder pages can be printed and used as an offline picture based communication strategy. Also included in the set are simple 2 and 4 button communications pages that use local storage to store up to 12 setups. These might come in handy when a user's communication device is unavailable but the Internet and a browser are.

The templates work best in up-to-date browsers that support text-to-speech, flexbox and grid css layout standards, and on most platforms. The Google Chrome browser offers the best support for text-to-speech across platforms. Text-to-speech does have some issues. I haven't explored languages other than English yet. Other languages should be possible by resetting the definition on each template to refer to the 2 letter code of the target language. In some cases the text-to-speech in English may sound funny because it may be generated by a speech engine in another language in spite of my (inadequate) attempts to only use speech engines that comply with the web page's lang definition. In this case, you can see if another, more appropriate, voice is available by pressing alt-v on the keyboard. Another concession I had to make was to break long sections of text into puntuation teminated sentences and phrases in an attempt to avoid the length limits set by the Google speech engines. This causes the speech to pause in places where a human reader would not, as in Mr. (pause) Magoo. Also, tts speech engines don't always get it right when there is more than one pronounciation for a word like "read." And, abbreviations can cause the tts engine confusion as in St. Nicholas versus Elm St., or Dr. Strange versus Elm Dr.. So, it is better to test your text and maybe avoid some abbreviations.

In browsers other than Chrome, like Firefox, Edge or Opera, the text-to-speech will probably depend on platform local tts services. On a Linux device this can be pretty awful sounding. Setting a Linux machine up to have a good sounding tts voice is also a challenge. Again, Google Chrome is likely the best and easiest choice for Linux users.

Check out the sample pages at this website I use for show and tell: link to The neocities site may not have everything up-to-date, and not everything found here is on that site.