如何在锚点标签内嵌套多个标签？嵌套是否容易实现？

Question

以下HTML是否易于访问？

    <a id="myClickbaitArticlePreview" href="someUrl">
      <h3>Amazing lifehack! Doctors hate him!</h3>
      <img alt="doctor is staring down a patient" src="procativeThumbnail">
      <p>Compelling copy</p>
    </a>

我知道根据这个答案，这是有效的。但是它是否易于访问呢？因为我正在使用屏幕阅读器（JAWS）审核一个结构类似的文章网站。屏幕阅读器会一口气读完所有内容，这很令人困惑（但我不是盲人，所以不知道你是否习惯这种方式）。它还会在标题后面读取alt属性，这在许多情况下可能会重复内容。

- Bar Akiva

Answer 1

简短回答

从技术上讲，这是有效的，并且在宽泛的意义上来说，“可访问性”也可以，但对于屏幕阅读器用户来说可能不是很好的体验。

但这将符合所有 WCAG 指南。

较长回答

不过，如果没有在页面上看到上下文，很难告诉您是否这是最佳实践。需要考虑以下几点：

• 是否有足够的空白间距使得在移动设备上具有机动 / 准确度 / 灵活性问题的人安全地放置手指来滚动页面中的大型“链接卡片”。
• 如果链接卡片获得焦点，焦点指示器是否易于看到并具有足够的对比度等（这是常规检查项目，但常常被遗忘在卡片类型链接上）。
• 如果屏幕阅读器用户通过标题循环页面，那么在卡片中是否应该有一个 <h3>，无论是在标题层次结构还是在页面层次结构方面都是逻辑的。
• 在其上下文中，alt 描述是否正确，如果图像与直接相关，则对于屏幕阅读器用户，它们可能最好使用 aria-hidden 或空的（而不是 null 的） alt 属性（alt="" 而不是 alt）。我几乎可以肯定地说这将是情况，但这又取决于您的判断。
• alt 与 <h3> 标题相同-这几乎肯定是一个大忌。alt 属性应在上下文中描述图像。如果 alt 文本与标题相同，则使图像表现为演示文稿/对屏幕阅读器隐藏，如前一点所述。
• 应该使用 <article> 元素以保持语义正确吗？
• 它们是否包含在 <ul> 中，以便屏幕阅读器用户知道有多少个项目？
• 在超链接上是否使用 aria-label 以缩小版本的文本为适当（以覆盖超链接内部的文本）？这取决于内容，因此请根据最佳判断使用。
• 每篇文章末尾是否更好地使用类似按钮的样式的超链接？如果是，请确保它不仅仅说“阅读更多”（虽然您可以将“阅读更多”作为按钮文本，并在其前面添加一些可视隐藏文本，如“惊人的生活技巧！医生恨他！”）。

您可以看出，如果没有在上下文中看到它们，我们就不能告诉您太多。但希望以上内容能给您一些思考的启示。

关于屏幕阅读器一口气读完所有内容的情况，这是预期行为，你需要适应！你可以在设置中降低语速或增加播报者的详细程度（这样它可以更详细地说明你所在的元素与其他元素的关系），以便你逐渐适应。

- GrahamTheDev

Answer 2

根据HTML标准，a元素具有透明的内容模型，唯一的例外是它不能包含交互式元素。

标题不是交互式元素。因此，根据标准，这很好。

关于可访问性，文本链接没有进行优化。

WCAG在2.4.4：链接目的（上下文中）中期望“有意义的链接”。拥有过多信息并不是一个好的做法。更好的替代方案是在<div>上提供javascript点击处理程序，同时只在这里使用HTML链接元素h3。

在您的示例中，"医生正在盯着病人"并未描述链接目标，不应成为链接文本替代品的一部分。

- Adam