Search code examples
htmlaccessibilityjaws-screen-readerwcag

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

Solution

  • 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.