Apple字段的可访问性与fieldset图例的问题

时间:2017-04-19 21:59:17

标签: macos safari accessibility fieldset wcag

我正在使用Mac(10.8.5)和Safari [6.2.4]。我创建了一个字段集来对输入进行分组,并为其添加了一个图例文本。我还应用了css来隐藏UI中的图例 - 但是图例中提供了图例和标签。

Windows / IE上的NVDA正常工作正常。它读取字段集图例,并读取输入的标签。

但是在上面的Mac / Safari组合中,Apple Voice over并没有阅读传奇。与Mac / Safari版本有什么关系吗?

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

1 个答案:

答案 0 :(得分:0)

根据PowerMapper,这是一个用OSX 10.11解决的问题:

  

VoiceOver OS X更好 - 导致VoiceOver OSX 10.10出现问题,但现在可以在VoiceOver OSX 10.11中使用

VoiceOver OSX 10.10和Safari 8.0.6的输出:

  

传说未读 - 没有迹象表明是/否选择

包含的音频样本说明了这一点:

  

是的,选择单选按钮,两个中的一个。是的,选择单选按钮,两个中的一个。

PowerMapper测试代码:

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

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