Forum

[patrickclancey]

I'm seeing a lot of aria-label attributes getting added to links and buttons that just mirror the tag's text. For example...

<a href="/about-us" aria-label="About Us">About Us</a>

I assume if the underlying HTML is already semantic then there is no value to adding an area-label?

For the case where the text does need further explanation, there are a few options aria-label, visually hidden text, title and title attribute e.g.

<!-- option 1 aria-label -->
<a href="..." target="_blank" aria-label="Some page. Opens in a new window">Some page</a>

<!-- option 2 visually hidden text -->
<a href="..." target="_blank">Some page <span class="sr-text">Opens in a new window</span></a>

<!-- option 3 title -->
<a href="..." target="_blank" title="Opens in a new window">Some page</a>

I would normally go for option #2 (visually hidden text) if it's possible but is the aria-label option preferred in this situation?

Many thanks

[ArisRamos]

Yes, I would agree with you. While Aria is designed to help with Accessibility, screen readers are not necessarily obliged to follow this. As such while Aria does work in most case for most screen readers there are cases where it does not. In my opinion if there is a way to make code accessible using standard HTML I would recommend using this approach. This ensures that you are following a standard that would generally be accepted by browsers. In the example you have provided that would be Option 2.