当一个地标元素里面也有一个标题时，它是否应该有一个 aria-label？
Should a landmark element have an aria-label when it also has an heading inside of it?
屏幕 reader 用户有多个选项来访问页面上的内容。
例如所有标题的列表，还有地标列表。
使用 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 对屏幕reader 用户有用吗，还是它们太过分了？
aria-label 的行为是理解何时使用它的关键。
所以在评论中我问这些是 post 内嵌在页面中还是摘录 link 到其他页面。
这很重要的原因在于 aria-label。
如果您将 aria-label 添加到容器 ，它将 over-ride 该容器中的所有内容 。
因此，如果这些只是完整的文章，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>
只会被解读为“为什么蓝莓味道不错”，所有 post 内容对于屏幕 reader 用户来说都会丢失。 （有点明显的活动元素，例如 links 等。仍然可以读出并且可以访问，所以它不是直截了当的，但希望你明白了）。
因此，在上面的示例中，aria-label 应该被删除。
示例 2 - 整篇文章是 link
现在，如果这是包含在 hyperlink 中的摘录的 post 列表，我们可能不希望将摘录文本作为 hyperlink 的一部分读出文字.
例如：-
<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>
在上面的例子中，整篇文章的摘录都是 hyperlink 文本的一部分，因此我们可能决定最好覆盖它，只将文章标题作为 link 文本。
但是请参阅“最终想法”部分，因为我仍然认为有更好的方法来做到这一点。
你的榜样
在你给出的例子中我根本不会使用aria-label。
现在这部分归因于 aria-label 的行为，如前所述，但更重要的是归因于屏幕 reader 用户浏览页面的方式。
屏幕 reader 具有列出页面上所有 link、循环浏览标题和循环浏览各节的快捷方式。这是屏幕 reader 用户“定位”自己并浏览页面和页面内容的方式。
您的示例做事方式很好而且易于理解。屏幕 reader 用户可以按部分 (<article>)、标题 <h2> 或 hyperlinks 导航。
添加 aria-label 实际上对屏幕 reader 用户来说更糟糕，因为他们可能会也可能不会（取决于屏幕 reader 和浏览器组合）访问 <h2>s，因为你已经覆盖了它们。
示例 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 用于在没有信息的地方添加信息（或在某些情况下添加视觉描绘的上下文信息）。
例如，如果您的社交媒体频道中有 link 等社交媒体图标，那么添加 aria-label 是允许可访问性树向屏幕提供有意义信息的一种方式 reader.
请谨慎使用它，并始终将 aria-label 视为最后的手段，在您用尽所有语义上合适的选项后。
对上述示例的最终思考
我个人会使用 aria-hidden 而不是 aria-label 例如 2（我们有一个文章列表，其中整篇文章是 link）。
所以我会按如下方式构建它们：
<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>
原因是（如前所述）我们现在可能 over-riding <h2> 所以在所有屏幕 reader 中用户现在应该能够发现这个通过标题和 hyperlink.
文章
不过分 -- 但您可以使用 aria-labelledby 来引用 header 的 ID 以避免文本重复。
屏幕 reader 用户有多个选项来访问页面上的内容。
例如所有标题的列表，还有地标列表。
使用 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 对屏幕reader 用户有用吗，还是它们太过分了？
aria-label 的行为是理解何时使用它的关键。
所以在评论中我问这些是 post 内嵌在页面中还是摘录 link 到其他页面。
这很重要的原因在于 aria-label。
如果您将 aria-label 添加到容器 ，它将 over-ride 该容器中的所有内容 。
因此，如果这些只是完整的文章，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>
只会被解读为“为什么蓝莓味道不错”，所有 post 内容对于屏幕 reader 用户来说都会丢失。 （有点明显的活动元素，例如 links 等。仍然可以读出并且可以访问，所以它不是直截了当的，但希望你明白了）。
因此，在上面的示例中，aria-label 应该被删除。
示例 2 - 整篇文章是 link
现在，如果这是包含在 hyperlink 中的摘录的 post 列表，我们可能不希望将摘录文本作为 hyperlink 的一部分读出文字.
例如：-
<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>
在上面的例子中，整篇文章的摘录都是 hyperlink 文本的一部分，因此我们可能决定最好覆盖它，只将文章标题作为 link 文本。
但是请参阅“最终想法”部分，因为我仍然认为有更好的方法来做到这一点。
你的榜样
在你给出的例子中我根本不会使用aria-label。
现在这部分归因于 aria-label 的行为，如前所述，但更重要的是归因于屏幕 reader 用户浏览页面的方式。
屏幕 reader 具有列出页面上所有 link、循环浏览标题和循环浏览各节的快捷方式。这是屏幕 reader 用户“定位”自己并浏览页面和页面内容的方式。
您的示例做事方式很好而且易于理解。屏幕 reader 用户可以按部分 (<article>)、标题 <h2> 或 hyperlinks 导航。
添加 aria-label 实际上对屏幕 reader 用户来说更糟糕，因为他们可能会也可能不会（取决于屏幕 reader 和浏览器组合）访问 <h2>s，因为你已经覆盖了它们。
示例 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 用于在没有信息的地方添加信息（或在某些情况下添加视觉描绘的上下文信息）。
例如，如果您的社交媒体频道中有 link 等社交媒体图标，那么添加 aria-label 是允许可访问性树向屏幕提供有意义信息的一种方式 reader.
请谨慎使用它，并始终将 aria-label 视为最后的手段，在您用尽所有语义上合适的选项后。
对上述示例的最终思考
我个人会使用 aria-hidden 而不是 aria-label 例如 2（我们有一个文章列表，其中整篇文章是 link）。
所以我会按如下方式构建它们：
<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>
原因是（如前所述）我们现在可能 over-riding <h2> 所以在所有屏幕 reader 中用户现在应该能够发现这个通过标题和 hyperlink.
不过分 -- 但您可以使用 aria-labelledby 来引用 header 的 ID 以避免文本重复。