Should a landmark element have an aria-label when it also has an heading inside of it?

Question

A screen reader user has multiple options to access content on the page.
A list of all headings for example, but also a list of landmarks.
With aria-label, you can label a landmark.

Consider the following markup:

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

Are the aria-labels in the above example useful to a screen reader user, or are they overkill?

Answer 1

The behaviour of aria-label is the key to understanding when to use it.

So in the comments I asked whether these were posts inline in the page or excerpts linking to other pages.

The reason this is important is down to the behaviour of aria-label.

If you add aria-label to a container it will over-ride all of the content in that container.

So if these were just full articles the aria-label would replace the whole blog content.

Example 1 - actual articles on the page

For example:

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

Would only be read as "Why blueberries taste good" and all of the post content would be lost for screen reader users. (Kind of, obviously active elements such as links etc. still get read out and are accessible so it isn't straight forward but hopefully you get the idea).

As such in the above example the aria-label should be removed.

Example 2 - whole article is a link

Now if this was a list of posts with excerpts that are surrounded in a hyperlink we may not want the excerpt text read out as part of the hyperlink text.

For example:-

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

In the above example the whole article excerpt is part of the hyperlink text so we may decide it is better to override this and just have the article title as the link text.

However see the "final thoughts" section as I still think there is a preferable way to do this.

Your Example

In the example you gave I would not use aria-label at all.

Now this is partially down to the behaviour of aria-label as stated previously but more importantly down to how screen reader users navigate pages.

Screen readers have shortcuts for listing all the links on a page, cycling through headings and cycling through sections. This is the way that screen reader users "orientate" themselves and explore pages and the contents of the page.

Your example way of doing things is nice and accessible. Screen reader users can navigate by sections (<article>), headings <h2> or by hyperlinks.

Adding an aria-label is actually worse for screen reader users as they may or may not (depending on the screen reader and browser combination) be able to access the <h2>s anymore as you have overridden them.

Example 3 - same as yours but with the aria-label removed

<article>
    <h2>Oranges are orange</h2>
    <p>An article discussing the color of fruit</p>
    <a href="/oranges-are-orange">Read more</a>
  </article>

Proper use of aria-label

aria-label is used to add information where there isn't any (or to add contextual information portrayed visually in certain circumstances).

For example if you have social media icons as links to your social media channel then adding an aria-label is one way to allow the accessibility tree to provide meaningful information to a screen reader.

Use it sparingly and always think of aria-label as a last resort after you have exhausted all semantically appropriate options.

Final Thoughts on the above examples

I personally would use aria-hidden instead of aria-label for example 2 (where we have a list of articles where the whole article is a link).

So instead I would structure those as follows:

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

The reason for this is (as mentioned previously) we are now not potentially over-riding the <h2> so in all screen readers the user should now be able to discover this article via heading as well as hyperlink.