Accessible names for links

Normal text link

Use an aria-label to give more information.

Read more

Better solution: use the screen-reader-text class to give more information.

Read more about cats on Wikipedia

Best solution: provide everyone with the same information.

Read more about cats on Wikipedia

An image as link

The alt text will become the link text.


Preferred solution: add text to the icon. The alt text of the image can stay empty: alt="".


For very strict reviewers, add all info in an aria-label, plus give the image an alt text.

Wikipedia logoWikipedia

Link an SVG

Make sure the link has an accessible name.

Link to a Mastodon account, using an only SVG as icon

No accessible name in this construction, this is wrong.

Add an accessible name with an aria-label on the SVG.

Use an aria-label on the link

Use the aria-label="Mastodon" on the link.

Use screen-reader-text

Use a span with the class="screen-reader-text" on the text "Mastodon" inside the link, to hide from vision, but announced by a screen reader.


Fourth option: connect the title to the SVG

Give the SVG a title, an aria-labelledby and a role="img".


Preferred option: add link text

Add the text Mastodon inside the link and hide svg from the accessibility tree with aria-hidden="true".