在选项卡到页面上的第一个元素后,JAWS屏幕阅读器继续读取其他元素

问题描述 投票:0回答:1

我正在构建一个Angular应用程序,并且在IE 11中对Jaws的可访问性支持存在一些问题。

我的页面看起来类似于:

<div id="start-tabbing-from-here" aria-label="Press tab to begin" tabindex="-1"></div>
<h1 tabindex="0" aria-label="Some title">Some title</h1>
<p tabindex="0" aria-label="Some text">Some text</p>
<button tabindex="0" aria-label="Btn1">Btn1</button>
<button tabindex="0" aria-label="Btn2">Btn2</button>
<button tabindex="0" aria-label="Btn3">Btn3</button>
<button tabindex="0" aria-label="Btn4">Btn4</button>

当我确定页面元素已经加载时,我会使用JQuery“关注”#start-tabbing-from-here id。

目的是一旦用户开始标记,用户将按页面顺序移动元素。即:首先关注的是下一个“标签”上的“某个标题”,它会在大声朗读每个元素的内容时移动到“某些文本”。

在Chrome(linux / windows / mac)以及Mac上的Safari中,我得到了预期的行为。

在IE中出现了一些非常奇怪的事情:在第一个选项卡上,它不仅开始读取第一个元素,而且还开始读取页面顺序中的所有元素。即JAWS将会读到:'某些标题有些文字Btn1 ......'然后突然它将从第一个元素开始'重置',然后最后一次大声朗读。

实质上会发生这样的事情:用户选项卡一次,焦点移动到'某个标题'。然后JAWS大声朗读:“一些标题有些文字Btn1 Btn2有些标题”然后它将停止阅读,页面将开始按照我的预期行事。

在我看来,“重置”发生在固定的时间点或读取特定数量的单词后。例如。如果我将我的元素内容更改为:

<div tabindex="-1" id="start-tabbing-from-here">
 <h1 tabindex="0" aria-label="Some title">Some title</h1>
 <p tabindex="0" aria-label="Some longer text that is here">Some longer text that is here</p>
 <button tabindex="0" aria-label="Btn1">Btn1</button>
 <button tabindex="0" aria-label="Btn2">Btn2</button>
 <button tabindex="0" aria-label="Btn3">Btn3</button>
 <button tabindex="0" aria-label="Btn4">Btn4</button>
</div>

JAWS可能会读到:'某些标题有些标题更长的文字'。

我对此行为感到困惑,并不确定从何处开始调试。我真的希望得到一些意见! :)

html internet-explorer-11 jaws-screen-reader
1个回答
0
投票

在页面加载时,JAWS倾向于从上到下读取页面。如果在页面加载时将焦点移动到特定元素,JAWS可能会从该点读取页面到底部。这是预期的行为,大多数用户都知道如何阻止JAWS阅读。如示例所示,给所有内容提供tabindex是一个坏主意。这意味着所有键盘用户,无论他们是否使用屏幕阅读器,都必须通过大量静态元素来访问他们想要与之交互的链接,按钮或表单元素,这对于具有RSI或类似条件的用户来说可能是痛苦的。它也无助于盲人用户,因为JAWS和其他屏幕阅读器具有内置的阅读和导航键击,用户不倾向于依赖Tab键。通过在页面顶部提供跳转链接,将焦点移动到H1标题,最好让用户能够将焦点移动到唯一内容的开头。如果它不适合您的设计,您可以隐藏它,直到用户选中它然后使其可见。如果你有一个令人信服的理由移动焦点,那么将它移动到H1标题。

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