Internet Explorer 中的 JAWS,不读取标题宽度 tabindex="0"
JAWS in Internet Explorer, not reading heading width tabindex="0"
我正在开发在悬停卡片时显示描述文本的小部件,为了使其易于访问,当标题具有标签焦点时描述文本也会打开,因此我在标题中添加了 tabindex="0",
我面临的问题是在Internet Explorer和Jaws屏幕上reader,当标签焦点转移到标题文本时,不会读出标题。
我尝试添加 aria-label 和 role="document" 仍然面临同样的问题。
还经历了这个 ,与将 aria-label 应用于跨度相关的解决方案不起作用,
与添加屏幕 reader 相关的点只有文本(带有 sr-only class )将导致其他屏幕 reader 中的双文本问题,例如 NVDA 和 Iphone.
以下是 DOM 结构的样子:
<div class="card contaienr">
<div class="card">
<div class="content">
<h3 tabindex="0" aria-level="3" role="heading">
<span>
Heading Text 1
</span>
</h3>
<div>
<span>
Description text
</span>
</div>
</div>
</div>
<div class="card">
<div class="content">
<h3 tabindex="0" aria-level="3" role="heading">
<span>
Heading Text 1
</span>
</h3>
<div>
<span>
Description text
</span>
</div>
</div>
</div>
</div>
在我的例子中,卡片标签中的列表项角色导致了问题,
如果我们从那里删除角色,这个问题就解决了。
我正在开发在悬停卡片时显示描述文本的小部件,为了使其易于访问,当标题具有标签焦点时描述文本也会打开,因此我在标题中添加了 tabindex="0",
我面临的问题是在Internet Explorer和Jaws屏幕上reader,当标签焦点转移到标题文本时,不会读出标题。
我尝试添加 aria-label 和 role="document" 仍然面临同样的问题。
还经历了这个
以下是 DOM 结构的样子:
<div class="card contaienr">
<div class="card">
<div class="content">
<h3 tabindex="0" aria-level="3" role="heading">
<span>
Heading Text 1
</span>
</h3>
<div>
<span>
Description text
</span>
</div>
</div>
</div>
<div class="card">
<div class="content">
<h3 tabindex="0" aria-level="3" role="heading">
<span>
Heading Text 1
</span>
</h3>
<div>
<span>
Description text
</span>
</div>
</div>
</div>
</div>
在我的例子中,卡片标签中的列表项角色导致了问题, 如果我们从那里删除角色,这个问题就解决了。