JavaScript SpeechSynthesis API

Date:

Share post:

As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string.

The Code

You can direct the browser to utter speech with window.speechSynthesis and SpeechSynthesisUtterance:

window.speechSynthesis.speak(
    new SpeechSynthesisUtterance('Hey Jude!')
)

speechSynthesis.speak will robotically tell the user anything you provide as a SpeechSynthesisUtterance string. Support for this API is available in all modern browsers.

I wouldn’t consider speechSynthesis as a replacement for native accessibility tools, but this API could be used to improve what native tools provide!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
  • 9 More Mind-Blowing WebGL Demos
  • Create a Sheen Logo Effect with CSS
  • CSS :target

    CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location’s hash.  Let’s have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with…

  • Create a Clearable TextBox with the Dojo Toolkit

    Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it’s all in the details.  I was recently using my iPhone and it dawned on my how awesome the “x” icon is in its input elements.  No holding the delete key down.  No pressing it a…


Source link
spot_img

Related articles

When to Trust AI Tech Answers (And When to Call Us)

Recently, we’ve fielded a spate of questions from people who have used an AI chatbot to help with...

8 Finance Event Activations that Spur Creativity and Innovation

In an industry driven by data, regulation, and risk mitigation, creativity might not be the first word that...

AMD FSR 4 now available in over 85 games

Delivering incredible graphics without compromising performance remains a priority for gamers and developers alike. Enter AMD FidelityFX™...