Listen

OSU Readspeaker Implementation Guide

ReadSpeaker is a product that speech-enables web pages. If you click the Listen link at the top of this page you can see it in action.

Though ReadSpeaker can enhance the accessibility of web pages, it is important to stress that ReadSpeaker is not an alternative to coding web pages with accessibility in mind, using standards-based web development practices. ReadSpeaker is not a blindness product. Severely visually impaired users will continue to access your pages using screen readers that are installed on their own computers. ReadSpeaker does not interfere with screen reader performance.

Nevertheless, ReadSpeaker:

The Ohio State University Web Accessibility Center pays for ReadSpeaker for use on any public-facing web page hosted on a university server. Our license currently extends through March 2016, and we plan on renewing for following years. You can use ReadSpeaker on pages in your web site with URLs containing *.osu.edu or *.ohio-state.edu.

Implementing ReadSpeaker in a Web Page

In the head of your HTML page, add the following script tag (after jQuery, if using that library):


<script src="http://f1.na.readspeaker.com/script/5204/ReadSpeaker.js?pids=embhl"></script>

In the body, where you want the Listen button rendered, put the following code:


<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
    <a rel="nofollow" class="rsbtn_play" title="Listen to this page using ReadSpeaker" href="http://app.na.readspeaker.com/cgi-bin/rsent?customerid=5204&lang=en_us&readid=[READID]&url=[ENCODED_URL]">
        <span class="rsbtn_left rsimg rspart"><span class="rsbtn_text"><span>Listen</span></span></span>
        <span class="rsbtn_right rsimg rsplay rspart"></span>
    </a>
</div>

In the code block, modify [READID] (do not include the brackets) to the ID attribute of the element containing the content that is to be read, for example, #main-content or similar. ReadSpeaker should not be set to read everything on the page, just the main content.

In the code block, modify [ENCODED_URL] (do not include the brackets) to the encoded URL of the page that should be read. You must use an encoded URL.

You can have ReadSpeaker skip over content by including class="rs_skip" on the element.

Placement of Listen Button

Our recommendation is that the Listen button is placed near the text that is to be read. Also see the ReadSpeaker Listen Button Placement Best Practices.

Skinning ReadSpeaker

ReadSpeaker can be skinning to align with the colors of your web site. See the ReadSpeaker simple skinning guide for information. Also, feel free to use any of the ReadSpeaker Listen button images in your design.

ReadSpeaker Plug-ins for Drupal and WordPress

ReadSpeaker has made plug-ins for popular CMS and blog tools. Here are links for plug-ins for Drupal 7, Drupal 6, and WordPress 2.5 and later.