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

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?

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 landmark element it will just label that container without affecting the content inside and is useful for labelling your landmarks for screen reader users.

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 be read as "Why blueberries taste good" and all of the post content would still be accessible for screen reader users.

As such the above example is a good idea (there is a fine balance here as this does mean that we now have a region and a heading saying the same thing, which can (depending on how a user is navigating) cause duplication, but generally the benefits of labelling the region out-weigh the duplication).

An even better idea is to use aria-labelledby="[id]" as that way your article landmark would have the same label as the heading, so it is easier to maintain.

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

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 (that is a lot of text within a link).

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 only "Why blueberries taste good" would now be what is read out to a screen reader, and the rest of the content would no longer by exposed.

This could work, but it does mean that now screen reader users no longer have access to the expert, see the "final thoughts" section as I still think there is a preferable way to do this.

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>
        </a>
                <p>Some content about blueberries which could be hundreds of paragraphs long</p>
     </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.

Now if you want to make it so that the whole article region is clickable, we can do a CSS trick

article {
  position: relative;
  padding: 20px;
}

article a:focus{
   outline: none;
}

article a::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border: 1px solid #888;
}

article:has(a:hover) {
  background-color: #eee;
}

article:has(a:focus) {
  outline: 2px solid #222;
  outline-offset: 2px;
}

<article>
            <a href="somewhere">
                <h2>Why blueberries taste good</h2>
            </a>
                    <p>Some content about blueberries which could be hundreds of paragraphs long</p>
         </article>

Additionally now your links have meaning (the "read more" problem is solved here).