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.
- Helps comprehension for students, staff, faculty, and visitors with any sort of reading disability (e.g., dyslexia).
- Provides an extra “learning modality” for students with various cognitive disabilities (ADHD, etc.).
- May help students, staff, faculty, and visitors with mild to moderate vision disabilities.
- Assists language acquisition for non-native speakers of English.
- Can be used by all students to review publicly served content or as a general study aid.
- Helps build overall awareness of disability access and usability.
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
Implementing ReadSpeaker in a Web Page
In the head of your HTML page, add the following script tag (after jQuery, if using that library):
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.
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.