Accessibility on Apple voice over issue with fieldset legend

Question

I am using Mac (10.8.5) and Safari [6.2.4]. I have created a field set to group my inputs and added a legend text to it. I have also applied css to hide the legend from the UI - but the legend and label are available in the DOM.

NVDA on Windows/IE works fine as expected. It reads the field set legend and it reads the label of the input.

But in above Mac/Safari combination, Apple Voice over is not reading the legend. Is there anything to do with the Mac/Safari versions?

  <fieldset >
<legend class="screen-read-only">Please sign in to this application</legend>

<div >
    <div >
        <label for="USER" class="screen-read-only">Enter your email or username here to test screen reader in MAC</label>
                    <input class="no-inline-checker ng-pristine ng-invalid ng-invalid-required ng-touched" tabindex="0" type="text" id="USER" name="USER" placeholder="Username or Email Address" data-ng-model="email" required="" data-autocorrect="off" data-autocapitalize="off" data-test-id="myr-signIn-emailAddress" aria-required="true" aria-invalid="true"> 
                  <span class="inline-checker icon-error sign-in ng-hide" data-ng-show="submitted &amp;&amp; form.USER.$error.required" aria-hidden="true"></span>
          </div>
   </div>
   <div class="row overrite-margin">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"><div class="myr-remember-me row"><span data-test-id="myr-singin-rememberMe" class="myr-checkbox col-xs-1" tabindex="0"><input data-ng-model="rememberMe" type="checkbox" name="rememberMe" id="rememberMe" class="myr-checkbox-input ng-pristine ng-untouched ng-valid" tabindex="0" aria-checked="false" aria-invalid="false"> <label for="rememberMe" class="myr-checkbox-box"><span class="screen-read-only">Remember me checkbox</span></label></span> 
    <span translate="_remember_me">Remember Me</span></div></div>
</div>
  </fieldset>

Can you provide sample code? Perhaps a CodePen or JSFiddle? I am aware of this issue with iOS / VoiceOver, but not macOS / VoiceOver. — aardrian, Apr 20 '17 at 00:36
@aardrian updated the code snippet. css applied on label is to hide the label from the sight of normal user. — Dhana, Apr 20 '17 at 02:37
You mean hide it from a *sighted* user, not a normal user. Also, remember that a full third of screen reader users are not bling. What is the CSS you are using? Off-screen? Clipped? Display property? — aardrian, Apr 20 '17 at 12:16

score 0 · Answer 1 · answered Apr 20 '17 at 22:13

According to PowerMapper, this is an issue that was resolved with OSX 10.11:

VoiceOver OS X Better - caused problems in VoiceOver OSX 10.10, but now OK in VoiceOver OSX 10.11

Output from VoiceOver OSX 10.10 and Safari 8.0.6:

Legend not read - no indication of what Yes/No choices are for

Audio sample included speaks this:

Yes, selected radio button, one of two. Yes, selected radio button, one of two.

Code for the PowerMapper test:

<fieldset>
 <legend>I agree to terms and conditions</legend>
 <label><input name='radio_with_legend1' type='radio' checked='checked'>Yes</label>
 <label><input name='radio_with_legend1' type='radio'>No</label>
</fieldset>
<fieldset>
 <legend>Sign me up to the newsletter</legend>
 <label><input name='radio_with_legend2' type='radio' checked='checked'>Yes</label>
 <label><input name='radio_with_legend2' type='radio'>No</label>
</fieldset>

Source: https://www.powermapper.com/tests/screen-readers/labelling/fieldset-with-yes-no-radio-buttons/

score 0 · Answer 2 · answered Sep 27 '21 at 08:36

please be aware that recent OSX (11.5.2) has re-introduced the doubling of "VoiceOver read text" in the latest safari (14.1.2) version.

example:

<fieldset>
        <legend>I agree to terms and conditions</legend>
        <label><input name='radio_with_legend1' type='radio' checked='checked'>Yes</label>
        <label><input name='radio_with_legend1' type='radio'>No</label>
    </fieldset>
    <fieldset>
        <legend>Sign me up to the newsletter</legend>
        <label><input name='radio_with_legend2' type='radio' checked='checked'>Yes</label>
        <label><input name='radio_with_legend2' type='radio'>No</label>
    </fieldset>

The above snippet reads everything inside <legend> twice, the only fix is to remove legend completely and rely on aria-label to hold legend text ....

please file a bug report on this if you have the time, the more the merrier

Accessibility on Apple voice over issue with fieldset legend

2 Answers2