在一个锚标记内嵌套多个标记有多方便？

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 1

简短回答

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

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

更长的答案

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

• 这些大型“链接卡”周围是否有足够的空白，供行动不便/准确性/灵巧性有问题的人安全地放置手指在移动设备上滚动页面。
• 如果链接卡已聚焦，则焦点指示器易于查看和足够的对比度等（要检查的标准内容，但在卡类型链接上经常被遗忘）
• 如果屏幕阅读器用户通过标题循环页面，那么无论是在标题层次结构还是页面层次结构方面，卡片中都有

  <h3>

  是否符合逻辑。
• alt 描述在其上下文中是否正确？如果图像不直接相关，则最好使用

  aria-hidden

  或空（非空）alt 属性（

  alt=""

  NOT

  alt

  ）对屏幕阅读器用户隐藏它们。我几乎肯定会说情况会是这样，但这又是你的判断。

• alt

  与

  <h3>

  标题相同 - 这几乎肯定是一个大禁忌。

  alt

  属性应该在上下文中描述图像。如果

  alt

  文本与标题相同，则使图像呈现/对屏幕阅读器隐藏，如上一点所述。
• 这些元素应该是

  <article>

  才能在语义上正确吗？
• 它们是否包含在

  <ul>

  中，以便屏幕阅读器用户知道有多少个项目？
• 超链接上的

  aria-label

  以及文本的压缩版本是否合适（覆盖超链接内的文本）？这取决于内容，因此请使用最佳判断。
• 在每篇文章末尾设置一个看起来像按钮的超链接会更好吗？如果是这样，请确保它不只是说“阅读更多”（尽管在按下按钮时，您可以将“阅读更多”作为按钮文本，并在之前有一些视觉上隐藏的文本，上面写着“惊人的生活窍门！医生讨厌他！”它）。

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

至于屏幕阅读器一口气读完所有内容，这是预期的行为，你只需要习惯它！当您习惯时，您可以随时放慢设置中的语速或增加播音员的冗长程度（这样它可以更详细地说明您相对于其他元素所处的元素）。

Answer 2

根据 HTML 标准，

a

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

标题不是交互元素。所以根据标准来说这很好。

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

2.4.4 中的 WCAG：链接目的（在上下文中） 期望“有意义的链接”。拥有太多信息并不是一个好的做法。更好的替代方案是在 <div>

 上提供 javascript 单击处理程序，同时仅在 

h3

 上提供 HTML 链接元素。

在您的示例中

“医生正在盯着病人”没有描述链接目的地，不应成为链接文本替代的一部分。

Answer 3

您所需要做的就是向完全描述链接目的/目的地的标签添加一个 aria-label 。当焦点切换到链接上时，这将覆盖嵌套的 H3 文本以及嵌套的 alt 属性，但仍然让屏幕阅读器用户可以自由地按标题导航且仅听到标题文本，以及按图形导航且仅听到alt 属性。