Question

var x = 0;
$(document).ready(function(){
 $("#start-game").click(function(){
   $("#app-focus").attr("tabindex", "-1").focus();
   $("#confirm").text("click confirmation " + x++);
 });
});

#app-wrap { position:absolute; left:-9999px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app-wrap" role="application">
  <div id="app-focus" aria-hidden="true"></div>
</div>

<input type="button" id="start-game" value="begin">
<div id="confirm"></div>

我正在创建一个使用屏幕阅读器在网页上播放的音频小游戏。为了使它工作，我将焦点放在div中的一个元素，其中包含role =“application”，这样我就可以使用javascript事件处理程序等。

我遇到的唯一问题是，在Mac Voiceover上，当我在div role =“application”中的元素上设置焦点时，它宣布：“您目前正在Web内容中使用Web应用程序。与该组中的项目互动，按下大写向下移动向下箭头。要退出此网络区域，请按大写向上移动向上箭头。“

我需要屏幕阅读器在登陆应用程序时不要发布任何内容。我一直在尝试不同类型的元素，并添加role =“presentation”，或者aria-hidden =“true”等等。我似乎无法保持沉默。这不可能吗？还是有其他人对Mac VO有运气吗？

编辑：应用程序div位于可见页面之外，位置为：absolute;左：-9999px;这个应用程序div中有一个div，当按下按钮开始游戏时，我在编程时专注于jQuery，然后添加tabindex =“ - 1”。

编辑：我添加了一个演示此内容的代码段。该公告略有不同，因为该片段在一个框架内，但我看到相同的行为。第一次单击打开Mac Voice Over的按钮时，它将显示有关您所在元素以及如何退出该元素的信息。

编辑：Snippet在Safari上不起作用，请试试Chrome。 Chrome代码段在我的网站上就像Safari一样。

防止Mac Voiceover Screen Reader宣布以编程为中心的元素？

0 个答案: