html - HTML 是否可以读取链接而不是标签？

Question

您好，我有以下关于辅助功能的问题，我正在使用 JAWS 屏幕阅读器软件来测试我的代码，但遇到以下问题:

JAWS 读出类别的标题标签，但它并不代表类别且重复两次。软件显示“创建案例破折号链接”；“创建案例破折号链接”。

该软件应该阅读应该是“问一个问题”

请告知，我的 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 读取您的链接，则它们应该具有 A) 链接文本，即 <a> 之间有意义的内容。和</a> ，或 B) aria-label属性不能为空。

你在这里:

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

在 JAWS 看来，此链接什么都没有。我的意思是，没什么。解决此问题的最简单方法是添加 aria-label属性，如下所示:

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

然后，当焦点落在该链接上时，JAWS 就会知道要读什么。否则，由于它是一个链接，因此必须以某种方式公布优先数据，它会尝试至少获取某些内容并读取(相对)URL，这就是您听到“创建案例”的原因.
另一个链接是一个更麻烦的情况。你有一个链接，一个div在里面，还有一个 img里面div 。这里 JAWS 也很困惑，因为链接文本又是空白的，所以它可能应该读取 alt图像的属性，但该图像在另一个 div 中，所以不确定 div 是否应被视为链接内容。哦，是的，有一个空的 span而且，它是链接的第一个元素，因此会出现更多困惑。
如果我是你，我也会简单地添加一个 aria-label 如果您也需要阅读该链接。如果 span不需要，仅用于装饰目的，请将其隐藏在 JAWS 的视野之外，否则您也会遇到一些难以察觉的麻烦。之后，如果您在该链接上听到两次“提问”，请隐藏 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>