Normal text link
Use an aria-label to give more information.
Better solution: use the screen-reader-text class to give more information.
Best solution: provide everyone with the same information.
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.
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 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.
MastodonFourth option: connect the title to the SVG
Preferred option: add link text
Add the text Mastodon inside the link and hide svg from the accessibility tree with aria-hidden="true".
Mastodon