带有字段集图例的 Apple 语音问题的可访问性答案

【问题标题】：Accessibility on Apple voice over issue with fieldset legend带有字段集图例的 Apple 语音问题的可访问性
【发布时间】：2021-09-27 16:36:37
【问题描述】：

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

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>

【问题讨论】：

能否提供示例代码？也许是 CodePen 或 JSFiddle？我知道 iOS / VoiceOver 的这个问题，但不是 macOS / VoiceOver。
@aardrian 更新了代码 sn-p。应用在标签上的 css 是为了将标签隐藏在普通用户的视线之外。
你的意思是对 sighted 用户隐藏它，而不是普通用户。另外，请记住，整整三分之一的屏幕阅读器用户都不戴金光闪闪。您使用的 CSS 是什么？离屏？剪辑？显示属性？

标签： macos safari accessibility fieldset wcag

【解决方案1】：

根据 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/

【讨论】：

【解决方案2】：

请注意，最近的 OSX (11.5.2) 在最新的 safari (14.1.2) 版本中重新引入了双倍的“VoiceOver 阅读文本”。

示例：

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

上面的sn-p读取<legend>里面的所有东西两次，唯一的解决方法是完全删除图例并依靠 aria-label 来保存图例文本....

如果你有时间，请提交一个错误报告，越多越好

【讨论】：