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

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

添加到地标元素，它只会标记该容器，而不会影响内部内容，并且对于为屏幕阅读器用户标记地标非常有用。

示例 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-labelledby="[id]"

，这样您的文章地标将具有与标题相同的标签，因此更容易维护。

<article aria-labelledby="blueberries">
        <h2 id="blueberries">Why blueberries taste good</h2>
        <p>Some content about blueberries which could be hundreds of paragraphs long</p>
     </article>

示例 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

视为最后的手段。

对上述示例的最终思考

我个人会使用

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>

，因此在所有屏幕阅读器中，用户现在应该能够通过标题和超链接发现这篇文章。

Answer 2

不过分——但您可以使用

aria-labelledby

引用标题的 ID 以避免文本重复。