WebReader A screen reader for everyone, everywhere

About

What is WebReader

WebReader is a free and open source JavaScript library developed for modern web browsers. Built using emerging functionality, WebReader can be integrated into any web page.

Underneath, WebReader relies on the Web Speech API to offer speech recognition and speech synthesis functionality.

It integrates a subset of the features provided by classic screen readers.

A major advantage of WebReader is that it does not require any additional software to be installed on a user's machine, apart from a supported web browser.

It is built with the hope to help users with disabilities better interact with web pages.

The intention is not to replace screen readers, but with basic features embedded into a web page, any user with an internet connection and a headset will be able to browse a website.

It frees people form constantly looking at the screen which is useful for anyone which is on the move.

Main features

Orientation

Find where you are on the page; what elements and how many are there.

Read

Read specific elements on the page; with navigation to the next and previous elements.

Find

Focus just on the main content; in future also locate elements containing specific words.

Follow

Follow links; jump to other elements and pages.

Guide

How to embed WebReader

1. Include the web-reader.min.js file into your website before the closing body tag:

<script src="path/to/web-reader.min.js"></script>

2. Add a script tag after the one referencing the library and paste the following lines:

var webReader = new WebReader();

webReader.enableShortcuts();

How to use WebReader

1. Press CTRL + SPACE or touch the floating WebReader icon on the screen. WebReader is now listening. The WebReader icon will pulse and an audio clue will be provided.

2. Speak a command. WebReader will listen, decipher and respond. You can repeat the interaction to begin a new query or perform a related query.

WebReader can currently understand English, Italian, and French commands.
We are working on adding support for additional languages.

To view planned features, please visit the GitHub repository.

Checkout the feature list and backlog for an up to date list and please suggest features if they aren’t already listed.

Commands you can trial

  • Read all the headers.
    Say:
    Read all headers
  • Read all the headers of a given type (e.g. H1).
    Say:
    Read all H1
  • Read all the links.
    Say:
    Read all links
  • Read all the links inside an element (e.g. header)
    Say:
    Read links inside header
  • Read the main content.
    Say:
    Read main content
  • Read the page title.
    Say:
    Read page title
  • Read a summary of the page.
    Say:
    Read page summary
  • Search and focus on the main content.
    Say:
    Find main content
  • Go to the previous page.
    Say:
    Go to previous page
  • Go to the next page.
    Say:
    Go to next page
  • Go to the homepage.
    Say:
    Go to homepage
  • Follow a link.
    Say:
    Go to link
  • Read the current element again.
    Say:
    Read again
  • Read the previous element.
    Say:
    Read previous
  • Read the next element.
    Say:
    Read next