Search code examples
htmlwai-aria

How to trigger JAWS text-to-speech on button click?


My company is doing some ADA conformance revision. I need to have the button text read when the user interacts with it. Will that happen with aria-label or .. how do you do it?


Solution

  • The button text should be read when the user navigates to the button. That could be done with the tab or a screen reader shortcut key such as B to go to the next button, and several other ways.

    Are you saying you want the button label announced when the user navigates to it and when the user selects it? That sounds like unusual behavior but perhaps it makes sense in the context of your app.

    If you want something announced when the button is selected, you can do that with aria-live. You'd have to trick the screen reader into saying it. You can have a visually hidden element such as

    <div id="foo" aria-live="polite" class="sr-only"></div>
    

    (Note: See What is sr-only in Bootstrap 3? for info on the "sr-only" class.)

    When the button is selected, inject the text you want announced into the <div> and it'll be read.