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

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，在许多情况下可能会重复内容。

Answer 1

简短的回答

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

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

更长的答案

如果没有在页面上下文中看到它，虽然很难告诉您这是否是最佳实践。 需要考虑的几件事：-

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

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

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

Answer 2

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

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

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

WCAG 2.4.4：链接目的（在上下文中）期望一个“有意义的链接”。 拥有太多信息不是一个好习惯。 一个更好的选择是在<div>上提供 javascript 点击处理程序，而在此处的h3上只有 HTML 链接元素。

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