Write Descriptive Links
Write descriptive links
When you add links to a page, the link’s text should explain where it leads. People using screen readers will jump directly to buttons and links with the tab key, so you can’t assume users will read the words around your link.
If a link says something like “Click here,” users might not know where it’s going. Phrase the text as a complete action, like “File a request on 311.”
Sometimes people add title text to their links, which appears when users hover the link with their mouse. However, it doesn’t show on mobile devices and may not work with assistive technology. Rather than adding title text, just make sure your link text is descriptive.
When an image is used as a link, its alt text should state the link’s destination, not the image contents. For example, a faucet icon that links to a portal where users can pay their water bill should have the alt text “Pay water bill”, not “Faucet”.
If your image is meant to convey information, you should use the alt text like normal and move the link to adjacent text instead of the image.
When you have an icon link next to descriptive link text, best practice is to group both together as one link (<a> tag in HTML). If you’re able to set it up that way, set the icon’s alt text to null (alt=””) instead of describing the link destination. Screen readers will see that they’re grouped together and ignore the image while reading the link text