HTML 读出 link 而不是标签的可访问性？

Question

您好，我有以下关于辅助功能的问题，我正在使用 JAWS 屏幕 reader 软件来测试我的代码，我有以下问题：

JAWS 读出类别的标题标签，但它不代表类别及其重复两次。该软件显示 "Create case dash link"；"Create case dash link"。

软件应该看的应该是请教问题”

请指教，我的HTML在下面

<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>

<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">

<span class="icon icon--signs"></span>

<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
 </a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>

Answer 1

JAWS 说的对，从它的角度看没什么可看的。好吧，几乎没有。
如果您希望使用默认设置的 JAWS 读取您的 links，它们应该具有 A) link text，即 <a> 之间有意义的内容和 </a>，或 B) 不应为空的 aria-label 属性。

你在这里：

<a class="icon-feature__link" href="/support/create-case/"></a>

这个 link 在 JAWS 看来什么都没有。我的意思是，虚无缥缈。解决此问题的最简单方法是添加 aria-label 属性，如下所示：

<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>

然后当焦点落在 link 上时，JAWS 就会知道要阅读什么。否则，由于它是 link，因此必须以某种方式宣布的优先级数据，它会尝试至少获取一些内容并读取（相对）URL，这就是为什么您会听到 "Create Case".
另一个 link 是一个更麻烦的案例。你有一个 link，里面有一个 div，div 里面有一个 img。这里JAWS也是一头雾水，因为link text又是一片空白，所以它大概应该读取图片的alt属性，但是这张图片在另一个div，所以不确定div是否应该读成link的内容。哦，对了，还有一个空的 span，它是 link 的第一个元素，所以更加混乱了。
如果我是你，我也会简单地添加一个 aria-label 如果你也需要 link 被阅读。如果不需要 span 并且仅用于装饰目的，请将其从 JAWS 的视图中隐藏起来，否则您也会遇到一些难以察觉的麻烦。之后，如果你在那个link上听到两次"Ask Question"，把div和图片一起隐藏起来，你就不需要了（这最后一点要讨论，需要测试得更彻底):

<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>

HTML 读出 link 而不是标签的可访问性？

Accessibility for HTML reading out link and not label?

html

accessibility

jaws-screen-reader