在一个锚标签内嵌套多个标签有多容易？

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>

根据answer，我知道它有效。但它可访问吗？因为我正在使用屏幕阅读器 (JAWS) 审核具有类似文章结构的网站。读者一口气读完所有内容，这令人困惑（但我不是盲人，所以我不知道您是否习惯了）。它还会在标题之后读取 alt，这在许多情况下可能会重复内容。

Answer 1

简答

从广义上讲，它既有效又“可访问”，对屏幕阅读器用户来说是一种很好的体验——可能不是。

它将通过所有 WCAG 指导，让我们这么说吧。

更长的答案

没有在页面上下文中看到它，但很难告诉您这是否是最佳做法。需要考虑的几点：-

• 这些大型“链接卡”周围是否有足够的空白空间供行动不便/准确性/灵巧性问题的人安全地将手指放在移动设备上滚动页面。
• 如果链接卡获得焦点，则焦点指示器易于查看且对比度足够等（标准检查，但在卡类型链接上经常被遗忘）
• 如果屏幕阅读器用户通过标题循环浏览页面，无论就标题层次结构还是页面层次结构而言，卡片中都有 <h3> 是合乎逻辑的。
• alt 描述在其上下文中是否正确，如果图像不直接相关，它们可能更好地被屏幕阅读器用户隐藏，aria-hidden 或空（非空）alt 属性（alt="" NOT alt ）。我几乎肯定会说会是这种情况，但这又是你的判断。
• alt 与 <h3> 标题相同 - 这几乎可以肯定是一个很大的禁忌。 alt 属性应该在上下文中描述图像。如果alt 文本与标题相同，则使图像在屏幕阅读器中呈现/隐藏，如前一点所述。
• 这些<article> 元素在语义上是否正确？
• 它们是否包含在 <ul> 中，以便屏幕阅读器用户知道有多少项目？
• 超链接上的aria-label 是否适合使用精简版文本（覆盖超链接内的文本）？这取决于内容，因此请做出最佳判断。
• 在每篇文章的末尾添加一个看起来像按钮的超链接会更好吗？如果是这样，请确保它不只是说“阅读更多”（尽管在按一下按钮时，您可以将“阅读更多”作为按钮文本，并且在其前面有一些 visually hidden text 上面写着“惊人的救生员！医生讨厌他！”） .

如您所知，如果没有在上下文中看到它们，我们无法告诉您很多事情，但希望以上内容可以让您思考一些事情。

对于屏幕阅读器一口气读完所有内容，这是预期的行为，您只需要习惯它即可！当你习惯它时，你总是可以在设置中放慢语速或增加播音员的详细程度（因此它有更多关于你相对于其他元素的元素的细节）。

Answer 2

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

标题不是交互式元素。所以按照标准，这很好。

关于可访问性，文本链接未优化。

2.4.4: Link Purpose (In Context) 中的 WCAG 期待“有意义的链接”。拥有太多信息不是一个好习惯。一个更好的选择是在 <div> 上提供一个 javascript 点击处理程序，而在 h3 上只有 HTML 链接元素。

在您的示例中 “医生正在盯着病人看” 没有描述链接目标，不应该是链接文本替代的一部分。