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.