The Captcha Audio

To provide accessibility to visually impaired users, Captcha's distorted image can be represented in an audio format. Every alphanumeric character is read out using the NATO phonetic alphabet.

By default, an audio button that provides a voice-over for the respective image is rendered next to the Telerik UI Captcha . A slider that allows the user to adjust the volume of the audio is also provided.

Enabling Captcha Audio

The Telerik UI Catpcha server-side provider creates an audio file based on the content of the image. To enable voice-over of the CAPTCHA in your project:

1. Add the Telerik UI Captcha server-side provider to your project.

2. Add the AudioHandler option to your Captcha.

   @(Html.Kendo().Captcha()
       .Name("Captcha")
       .Handler(handler => handler.Action("Reset", "Captcha"))
       .AudioHandlerFunction("audioHandler")
       // Other options omitted for brevity.
   )
   

   <kendo-captcha name="captcha">
       <handler url="@Url.Action("Reset", "Captcha")" />
       <audio-handler function-handler="audioHandler" />
       // Other options omitted for brevity.
   </kendo-captcha>
   

3. Send a request to the remote endpoint and include the Captcha's ID as an additional parameter.

   function audioHandler(args) {
       //pass the name of the action "Audio" and the name of the controller (in this case "Captcha") to the Url.Action method. Add captchaId as a parameter:
       args.success("@Url.Action("Audio", "Captcha")?captchaId=" + args.data.CaptchaID);
   }
   

4. Use the CaptchaHelper.SpeakText() method to create a wav File. Return it to the client-side.

   public ActionResult Audio(string captchaId)
   {
       var sessionValue = HttpContext.Session.GetString("captcha_" + captchaId);
       CaptchaImage captcha = JsonConvert.DeserializeObject<CaptchaImage>(sessionValue);
   
       byte[] bmpBytes;
   
       using (MemoryStream audio = CaptchaHelper.SpeakText(captcha))
       {
           bmpBytes = audio.ToArray();
       }
       return File(bmpBytes, "audio/wav");
   }
   

5. The Telerik UI Captcha starts the voice-over of the image after the user clicks the audio button.

See Also

• Basic Usage of the Captcha HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the Captcha TagHelper for ASP.NET Core (Demo)

• Server-Side API