Write link text for accessibility

Good link text improves the accessibility of your website by informing your website visitors of the link's purpose. For the best experience, the text should be descriptive, unique, and concise.

Descriptive

Your link text should describe the destination of the link. People should understand where a link goes without reading the surrounding text. People on the internet scan the content. Providing context within the link text whenever possible makes it easier to quickly understand the purpose of the link. This is especially true for people using assistive technology who may encounter a list of links outside the immediate context.

Link text such as "Learn more", "Read more", "More", "Click here", "here", or the URL do not provide easily understandable information about the link's destination and should not be used. Descriptive link text should be specific and accurate. When the link destination does not match expectations, your visitors may lose trust in your website.

As a best practice, if a link opens or downloads a file, the file type and size should be included in the link text, not as plain text. Clearly providing this information helps people decide if they can access the file from their device.

Unique

Use different text for links that go to different destinations. It's confusing when multiple links on a page have the same text but go to different places. Conversely, be consistent when naming links with the same destination.

Your website visitors may become frustrated if they can't quickly determine which is the correct link. Similarly named links force people to think: Are these links the same or different? Which link will take me to the information I need?

Concise

Link text should be appropriately short while also clear enough to help someone decide if they want to follow the link. Long link text is more difficult to scan, particularly for people using screen readers, which present all the link text.

There is no maximum length for link text, but fewer than 20 words is a common recommendation. Do not leave links empty. Links must have text.

Images in links

Image-only links should be used sparingly. They must have alternate (alt) text to provide visible link text if the image fails to load. For example, a social media icon link should have alt text with the name of the social media platform.

Links that include both an image and text must also have an alt attribute, although a null alt attribute (alt="") is acceptable if the image does not provide additional context. For example, an envelope icon paired with link text "Email" should have null alt text. But a link that includes a file name and a PDF icon should include alt text for the image (alt="PDF").

Accessible names

Links need accessible names that can be conveyed by assistive technologies such as screen readers. The link text, including image alt text, is usually the accessible name of a link.

If your link text is clear and descriptive, you shouldn't need to use other labeling methods. The accessible name should be the same as or begin with the visible link text.

Examples

Inline text link

A bristlecone pine named Methuselah is the oldest living tree in the world.

A <a href="https://www.guinnessworldrecords.com/world-records/oldest-living-individual-tree">bristlecone pine named Methuselah</a> is the oldest living tree in the world.

In this example, the link text and accessible name are "bristlecone pine named Methuselah".

Document link

Types of impairments (Word, 14 KB)

<a href="https://accessibility.iu.edu/docs/Types_of_impairments.docx">Types of impairments (Word, 14 KB)</a>

In this example, the link text and accessible name are "Types of impairments (Word, 14 KB)".

Document link with icon

Types of impairments (107 KB)

<a href="https://accessibility.iu.edu/docs/Types_of_impairments.pdf">Types of impairments <img width="8" alt="PDF" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Pdf_icon_file.png"/> (107 KB)</a>

In this example, the link text and accessible name are "Types of impairments PDF (107 KB)". If the image fails, the visible text will be "Types of impairments PDF 107 KB".

This icon, by Resoomer, is available from Wikimedia Commons via a Creative Commons license.

Text link with image

Email us

<a href="https://mailform.kb.iu.edu/email.php?cid=1427"><img width="32" alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Envelope_font_awesome.svg/32px-Envelope_font_awesome.svg.png"> Email us</a>

In this example, the link text and accessible name are "Email us". If the image fails, the visible text will be "Email us".

This icon, by Dave Gandy, is available from Font Awesome via a Creative Commons license.

Image link

<a href="https://mailform.kb.iu.edu/email.php?cid=1427"><img width="32" alt="Email us" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Envelope_font_awesome.svg/32px-Envelope_font_awesome.svg.png"></a>

In this example, the link text and accessible name are "Email us". If the image fails, the visible text will be "Email us".

This icon, by Dave Gandy, is available from Font Awesome via a Creative Commons license.

Link with visually hidden text

While vague link text like "More" is not descriptive, it may appear at the end of a teaser for a longer article, such as on a page with news headlines that include the first sentence or two of each article. Visually hidden text can differentiate multiple similar links and provide context for screen readers.

Sequoias are commonly known as redwood trees. More about sequoias

<a href="https://en.wikipedia.org/wiki/Sequoioideae">More<span class="visually-hidden"> about sequoias</span></a>

The text "More" is visible while "about sequoias" is visually hidden but presented to screen readers. The accessible name of this link is "More about sequoias".