苹果电话语音与fieldset图例问题的可访问性

我正在使用Mac（10.8.5）和Safari [6.2.4]。我创建了一个字段，用于对我的输入进行分组，并为其添加图例文本。我也应用了css来隐藏UI中的图例 - 但是图例和标签在DOM中可用。苹果电话语音与fieldset图例问题的可访问性

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>

来源

2017-04-19 Dhanasekaran Shanmuganandam

你能提供的示例代码？也许CodePen或JSFiddle？我知道这个问题与iOS/VoiceOver，但不是macOS/VoiceOver。 – aardrian

@aardrian更新了代码片段。应用于标签上的CSS就是将标签从正常用户的视线中隐藏起来。 –

您的意思是将其隐藏于* sighted *用户，而不是普通用户。另外，请记住，三分之一的屏幕阅读器用户不会流光溢彩。什么是你使用的CSS？关闭屏幕？修剪？显示属性？ – aardrian

根据PowerMapper，这是与OSX 10.11解决的问题：

VoiceOver的OS X更好 - 造成问题的VoiceOver OSX 10.10，但是现在的VoiceOver OSX 10.11

OK从VoiceOver的OSX 10.10和Safari 8.0.6

输出：

传奇不读 - 没有IND中包含是/否的选择是

音频采样什么ication谈到这一点：

是，选定的单选按钮，两个之一。是的，选中单选按钮，其中之一。

代码为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/

来源

2017-04-20 22:13:36 aardrian

苹果电话语音与fieldset图例问题的可访问性

回答

相关问题