JAWS is reading the form labels twice instead of single time

I faced some strange behavior with the JAWS reader where it was reading the question labels twice.

In the below code, I added an aria-labelledby for the radio group which referenced the question id from the 'p' tag.

<div class="form-group">
  <p id="question1">What is your favourite color? <span class="sr-only">select one color</span></p>
  <div class="radio-group" role="radiogroup" aria-labelledby="question1">

  ... radio button 1 ... 
... radio button 1 ... 
... radio button 1 ... 

  </div> 
</div>

Am I missing anything here?

Thanks

You aren't missing anything. If you navigate in the page with arrow keys using the virtual (browse) cursor, you effectively read "What is your favorite color ?" twice.

• The first time is for the paragraph
• The second time is for the div with role radiogroup, which references the previous seen paragraph as a label

You can make it be read only once, but I strongly discourage you to go for any of these solutions, as they are all bad:

• Simply remove aria-labelledby Problem: "what is your favorite color ?" won't be read anymore if the user navigates with tab
• Remove the paragraph and put "What is your favorite color ?" directly in aria-label. Problem: sighted users won't see it anymore
• Put the paragraph off-screen with CSS. Problem: same as above
• Set the paragraph to be display:none Problem: same as above, and additionally it's kind of borderline design: it will probably work with some screen readers, but not with some others. The behavior isn't well specified in that case.

Side question: why are you using <div role=radiogroup"> instead of <fieldset> and <legend> ? It would certainly be better if you could use the later.