1

For example, let's say I have a link whose text, by itself, doesn't do a great job of explaining its meaning:

<div>To complete your transaction, please click <a href="#">here<a>.</div>

Say a user using is using an assistive voiceover interface and the Tab button to navigate the page.

For discussion, let's ignore a suggested solution, putting meaningful text inside the anchor element itself.

What is the next best solution? Adding an aria-label with meaningful text? For example:

<div>To complete your transaction, please click <a aria-label="To complete your transaction, please click here">here<a></div>

Will this be redundant for the user? Is there a better alternative?

1

Firstly, make sure you even need an <a> tag. If the link doesn't navigate to another page then you should be using a <button> tag.

Yes, you can use the aria-label as you have described and you can also use the normal <a href="#" **title=""**> title tag instead, as all screen readers use that in the absence of an aria-label tag.

However, in your example, there is a more robust and accepted way to do it because the label text you are trying to emphasise is already on the page so you should use the attribute aria-labelledby="" instead.

This is the correct solution for your exact example scenario (because the relevant text is already on the page).

<div id="your-id">To complete your transaction, please click <a aria-labelledby="your-id">here<a></div>

You should only use aria-label="" if the text you're after can't be found on the page.

You can still use aria-labelledby="" even if that text is somewhere else on the page. For example, you could just wrap that text in a span tag like so:

<span id="your-id">To complete your transaction...</span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.