html - 当一个地标元素内部也有一个标题时，它应该有一个 aria-label 吗？

Question

屏幕阅读器用户有多种选项来访问页面上的内容。
例如，所有标题的列表，还有地标的列表。
使用 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 对屏幕阅读器用户有用，还是太过分了？

Answer 1

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用于在没有信息的地方添加信息(或在某些情况下添加以视觉方式描绘的上下文信息)。

例如，如果您将社交媒体图标作为社交媒体 channel 的链接，则添加 aria-label是允许辅助功能树向屏幕阅读器提供有意义的信息的一种方法。

谨慎使用它并始终想到 aria-label在用尽所有语义上适当的选项后，作为最后的手段。

对上述示例的最终思考

我个人会使用aria-hidden而不是aria-label例如 2(我们有一个文章列表，其中整篇文章是一个链接)。

因此，我将按如下方式构建它们:

<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>因此，在所有屏幕阅读器中，用户现在应该能够通过标题和超链接找到这篇文章。