如何停止 Apple VoiceOver 双重阅读包含多个元素的标题？

问题描述 投票：0回答：2

如果我有以下 HTML：

<html>
  <body>
    <h2>
      Buy our awesome product!
    </h2>
  </body>
</html>

...Apple VoiceOver 会说：

“标题级别 2，购买我们出色的产品”

这很棒，值得期待。

但是，如果我把它改成这样：

<html>
  <body>
    <h2>
      Buy our <i>awesome</i> product!
    </h2>
  </body>
</html>

Apple VoiceOver 会说：

“标题级别 2、3 项，购买我们的...真棒...产品...购买我们的...真棒...产品”

（添加“3 个项目”，在元素之间暂停，并且重要的是，重复标题）

我希望 VoiceOver 的发音方式与不使用斜体时完全相同。

当然，我希望不要让它说“3 项”并删除停顿，但是 主要担心的是它重复了标题。我尝试过使用 ，使用类，并将所有内容都包含在

中，正如其他人在类似问题上所建议的那样，但到目前为止我尝试过的任何事情似乎都无法阻止重复。我觉得我一定错过了一些简单的东西，对吧？或者真的没有办法在不出现 VoiceOver 故障的情况下设计部分标题的样式吗？

可能相关或有帮助，我发现这个问题似乎只出现在标题中。如果我对以下代码运行 VoiceOver，它只会被读取一次，就好像斜体或单独的元素根本不存在一样：

<p>
  Buy our <i>awesome</i> product!
</p>

我在 Chrome 和 Safari 上都会出现此问题。我没有测试过其他浏览器。

如果可能的话，我更喜欢 HTML/CSS 解决方案，并避免使用 javascript hack，因为我不是 javascript 专业人士。

披露：

  • 是的，我正在使用
    <i>
    之外的样式来专门设置标题的某些元素的样式，但上面是一个更简单的示例，并产生相同的结果。
  • 我的问题页面实际上是运行一些脚本，如 Google 标签管理器和 jquery，但即使我使用上面的 HTML 创建一个完全裸露的测试页面，我也会得到完全相同的结果。

在我看来，这是一个 VoiceOver 错误，而且不容易解决。

去年，我使用 VoiceOver 运行了各种 测试用例，发现避免您在 VoiceOver 中描述的体验的唯一方法是使用 

role="text"
。这将阻止 VoiceOver 将每个子元素视为单独的标题，如 YouTube 上 Patrick H Lauke 的演示和解释所示。例如： <h2><span role="text"><span style="display: block;color: red;">This is styled text</span> and this is a new line</span></h2> 

当
role="text"

（非官方规范）应用于容器元素时，它将强制 VoiceOver 重新计算标题元素的可访问名称，将其减少为单个元素。这适用于 macOS 和 iOS。

我还使用 
aria-label
 进行了测试，尝试在 VoiceOver 中解决这些问题，但没有找到合适的解决方案。
但是，VoiceOver 现在似乎在我测试的每项技术中都有更一致的体验。虽然 VoiceOver 现在将标题读取为单个公告，但它也始终公告元素内有多个项目。我正在进一步测试这一点。


您可能想尝试我在
我的测试用例
中使用的技术之一，但请谨慎使用。但是，现在可能没有什么可以用作解决方法。
    


好吧，我想这有点像黑客，但这就是最终对我有用的东西：

<html>
  <body>
    <h2 aria-label="Buy our awesome product!">
      <span aria-hidden="true">
        Buy our <i>awesome</i> product!
      </span>
    </h2>
  </body>
</html>


    



    
    html
    
    accessibility
    
    voiceover
    
    
2个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        


在我看来，这是一个 VoiceOver 错误，而且不容易解决。


去年，我使用 VoiceOver 运行了各种  测试用例，发现避免您在 VoiceOver 中描述的体验的唯一方法是使用 
role="text"
。这将阻止 VoiceOver 将每个子元素视为单独的标题，如 YouTube 上 Patrick H Lauke 的演示和解释所示。例如：
<h2><span role="text"><span style="display: block;color: red;">This is styled text</span> and this is a new line</span></h2>



当 
role="text"
（非官方规范）应用于容器元素时，它将强制 VoiceOver 重新计算标题元素的可访问名称，将其减少为单个元素。这适用于 macOS 和 iOS。
我还使用 
aria-label
 进行了测试，尝试在 VoiceOver 中解决这些问题，但没有找到合适的解决方案。
但是，VoiceOver 现在似乎在我测试的每项技术中都有更一致的体验。虽然 VoiceOver 现在将标题读取为单个公告，但它也始终公告元素内有多个项目。我正在进一步测试这一点。


您可能想尝试我在
我的测试用例
中使用的技术之一，但请谨慎使用。但是，现在可能没有什么可以用作解决方法。
    




      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


<html>
  <body>
    <h2 aria-label="Buy our awesome product!">
      <span aria-hidden="true">
        Buy our <i>awesome</i> product!
      </span>
    </h2>
  </body>
</html>


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.