Back to home

Reviewing different link methods

Review the different links.

1. A standard link

A link with text such as Read more provides little context on its own. If several links on a page use the same text, screen reader users may find it difficult to tell them apart.

Read more
HTML markup 
<a href="#">
  Read more
</a>

2. A link with additional information via aria-label

Using aria-label adds extra context to the accessible name while leaving the visible text unchanged. This creates a more meaningful and unique link for screen reader users.

While aria-label can provide additional context for screen reader users, it is usually better to make link text descriptive for everyone. For example, Read more about wombats is generally preferable to a visible Read more link with an aria-label.

Read more
HTML markup 
<a href="#" aria-label="Read more about wombats">
  Read more
</a>

3. A PDF link

Links to files such as PDFs should identify the file type and, where practical, the file size. This helps people understand what will happen when they activate the link and decide whether they want to download the file.

Australian Government Annual report (52KB PDF)
HTML markup 
<a href="">
  Australian Government Annual report (52KB PDF)
</a>

4. An external link

Indicating that a link leads to an external website helps people understand where they are going before activating the link, allowing them to decide whether they want to continue.

Option 1

This example includes this information directly in the visible text, so every visitor reads the same warning.

Intopia (External link)
HTML markup 
<a href="https://intopia.digital/" target="_blank">
  Intopia (External link)
</a>

Option 2

This example conveys it two different ways at once: a visual icon signals it to sighted users, while aria-label provides the equivalent information to screen reader users.

Intopia
HTML markup 
<a href="https://intopia.digital/" target="_blank"
  aria-label="Intopia. External link"
>
  Intopia
</a>

Back to home