问题描述
屏幕阅读器用户有多种选择来访问页面上的内容。
例如，所有标题的列表，还有地标列表。
使用 no_sus <- numeric()
x<-0
while (x <= 10)
{ print(crimes$id)
if (crimes$outcome_status_category == "Investigation complete; no SUSPECT identified" )
} x = x+1 }
，您可以标记地标。
考虑以下标记：
aria-label问题：
以上示例中的 <main>
<h1>My Blog items</h1>
<article aria-label="Why blueberries tast good">
<h2>Why blueberries tast good</h2>
<p>Some content about blueberries</p>
<a href="/why-blueberries-test-good">Read more</a>
</article>
<article aria-label="I don't like apples">
<h2>I don't like apples</h2>
<p>Text about why I don't like apples</p>
<a href="/i-dont-like-apples">Read more</a>
</article>
<article aria-label="Oranges are orange">
<h2>Oranges are orange</h2>
<p>An article discussing the color of fruit</p>
<a href="/oranges-are-orange">Read more</a>
</article>
</main>
对屏幕阅读器用户有用吗，还是它们太过分了？
解决方法
aria-label 的行为是理解何时使用它的关键。
所以在评论中我问这些是页面内嵌的帖子还是链接到其他页面的摘录。
这很重要的原因在于 aria-label 的行为。
如果您将 aria-label 添加到容器它将覆盖该容器中的所有内容。
因此，如果这些只是完整的文章，aria-label 将替换整个博客内容。
示例 1 - 页面上的实际文章
例如：
<article aria-label="Why blueberries taste good">
<h2>Why blueberries taste good</h2>
<p>Some content about blueberries which could be hundreds of paragraphs long</p>
</article>
只会被阅读为“为什么蓝莓味道好”，屏幕阅读器用户将丢失所有帖子内容。 （链接等明显活跃的元素仍然可以被读出并且可以访问，所以它不是直截了当的，但希望你能理解）。
因此，在上面的示例中，aria-label 应该被删除。
示例 2 - 整篇文章是一个链接
现在，如果这是一个包含在超链接中的摘录的帖子列表，我们可能不希望摘录文本作为超链接文本的一部分读出。
例如：-
<article>
<a href="somewhere" aria-label="Why blueberries taste good">
<h2>Why blueberries taste good</h2>
<p>Some content about blueberries which could be hundreds of paragraphs long</p>
</a>
</article>
在上面的例子中，整篇文章摘录是超链接文本的一部分，所以我们可能决定最好覆盖它，只将文章标题作为链接文本。
但是，请参阅“最后的想法”部分，因为我仍然认为有一种更好的方法可以做到这一点。
你的例子
在您给出的示例中，我根本不会使用 aria-label。
现在这部分归结于 aria-label 的行为，如前所述，但更重要的是归结为屏幕阅读器用户导航页面的方式。
屏幕阅读器具有列出页面上所有链接、循环浏览标题和循环浏览部分的快捷方式。这是屏幕阅读器用户“定位”自己并浏览页面和页面内容的方式。
您的处事方式很好且易于理解。屏幕阅读器用户可以按部分 (<article>)、标题 <h2> 或超链接进行导航。
对于屏幕阅读器用户来说，添加 aria-label 实际上更糟糕，因为他们可能会也可能不会（取决于屏幕阅读器和浏览器组合）在您覆盖它们后再次访问 <h2> .
示例 3 - 与您的示例相同，但删除了 aria-label
<article>
<h2>Oranges are orange</h2>
<p>An article discussing the color of fruit</p>
<a href="/oranges-are-orange">Read more</a>
</article>
正确使用 aria-label
aria-label 用于在没有信息的地方添加信息（或在某些情况下添加视觉描绘的上下文信息）。
例如，如果您将社交媒体图标作为指向社交媒体频道的链接，那么添加 aria-label 是一种允许辅助功能树向屏幕阅读器提供有意义信息的方法。
谨慎使用它，并在用尽所有语义上合适的选项后始终将 aria-label 视为最后的手段。
对上述示例的最终想法
我个人会在示例 2 中使用 aria-hidden 而不是 aria-label（我们有一个文章列表，其中整篇文章是一个链接）。
因此，我将其结构如下：
<article>
<a href="somewhere">
<h2>Why blueberries taste good</h2>
<!--using `aria-hidden` on the excerpt text so that the `<h2>` is more likely to be discoverable using headings shortcuts-->
<div aria-hidden="true">
<p>Some content about blueberries which could be hundreds of paragraphs long</p>
</div>
</a>
</article>
这样做的原因是（如前所述）我们现在不会覆盖 <h2>，因此在所有屏幕阅读器中，用户现在应该能够通过标题和超链接找到这篇文章。
不过分——但您可以使用 aria-labelledby 来引用标题的 ID 以避免文本重复。