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

Question

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?

score 3 · Accepted Answer · answered May 23 '19 at 00:45

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.

score 0 · Answer 2 · answered May 31 '19 at 13:35

0

A Screen Reader will announce the title of the button when it comes into tab focus, and let the user know that it's a button to begin with. As a base requirement though, a native <button> element should be used since the functionality is already built in. With that said, you don't need any other particular aria tags by default.

answered May 31 '19 at 13:35

Paolo F

23
5

In my use case, I needed to announce a corrosion ding pop-up with the button. Using aria-live and aria-labelledby on the pop-up suffices. – roberto tomás May 31 '19 at 14:56

score 0 · Answer 3 · answered Jun 24 '19 at 11:36

I'm guessing you just want to know how to mark up a button so that JAWS says its text when the user tabs or cursors to it. If it's a native button with text written on it: <button>Next</button> JAWS will read it automatically. If it's an input:button with a text value: <input type="button" value="Next" /> again, JAWS will speak its text automatically. If it's a button with an icon: <button><span class="fas fa-arrowRight"></span></button> mark it up like this and JAWS will speak its name (remember to change the aria-label text if you're using a different language): <button aria-label="Next"><span aria-hidden="true" class="fas fa-arrowRight"></span></button> Hope this helps.

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

3 Answers3