Accessible Links on Websites

You have probably encountered phrases like “Click here for more information,” where “here” is the hyperlink. But what happens when you click on “here”? Does a new subpage open? Do you navigate to an external website or download a PDF file? Often, this can only be inferred from the surrounding text. In this article, we explain what to consider with “here” links and other types of links.

Links can be embedded in various ways on a website. Not only text elements but also images and icons can be linked. For example, the magnifying glass icon next to a search field is also a link. Users must always be clear about where a link leads or what action it triggers.

Text Links

People with visual impairments often use screen readers, which read out a list of all the links on a page. However, if these links are just called “here,” it is impossible for the users to know where the link leads. Therefore, all links on your website should be clearly labeled, ideally through the link text itself.

If this is not possible, accessibility can still be ensured if the purpose of the link can be inferred from the context. A descriptive heading or an explanatory text in the same paragraph can help make the link destination understandable.

A crucial point: links should not be distinguished from the rest of the text solely by a color change. An additional indication such as underlining or a symbol, like an arrow, can be helpful. For more information, refer to the checklist on colors.

Examples

Here are some examples of well-implemented links:

• Find our contacts under Contact.
• Download our accessibility brochure (PDF opens in a new window).
• Read more about our privacy policies on our information page.

Linked Images and Graphics

Accessibility must also be considered for linked graphics. Icons and symbols, such as a printer or magnifying glass icon, must also be described. These icons, which serve as control elements, should only describe the action performed. For example, a magnifying glass icon next to a search field should be described as “Start search.” An alt text that describes the magnifying glass itself is not necessary here. For linked images and graphics, the link destination should be apparent in the alt text.

Example

Logo of the City of Berlin

If the logo is linked, the alt text could be: “Coat of arms of the City of Berlin – Go to homepage.” Here, the link destination is added at the end.

<a href="https://www.berlin.de">
  <img src="berlin-logo.png" alt="Coat of arms of the City of Berlin – Go to homepage">
</a>

Checklist - Links

• Ensure all text links have meaningful labels.
• Avoid links labeled “here,” “more,” or “read more.”
• If such labels are unavoidable, ensure a descriptive context, such as appropriate headings or detailed text descriptions before the link.
• Links should not be recognizable only by a different color. Additional indications such as underlining or symbols, like an arrow, are recommended.
• For linked images and graphics, ensure the alt text either describes the link destination or the action to be performed.

By following these guidelines, you can ensure that your website’s links are accessible and user-friendly for everyone.