Using links

Descriptive hyperlinks are important — readers want to know where they’re going if they click something.

We use the title of the page we’re linking to — or we describe what’s on the page if the title doesn’t give the user enough context.

We don’t:

• put URLs directly into text
• use ‘click here’, ‘see more’ or ‘more information’ on their own as our hyperlink text — we make sure the link text tells the user what to expect on the new page.

We do:

• put links where they’re useful – directly below the sentence or list they refer to
• use the ‘List of Files’ block if linking to more than one document.

We include the name of the page and the website it’s on, and set the link to open in a new tab.

Example:

Who can pay or receive child support? - Inland Revenue

Media release from Children's Minister - Beehive website

We use less descriptive link text if linking to internal pages – we don’t need to include the name of the website, but we try to include the name of the page.

Example – same website:

Placing your child for adoption

We use the full name of the address for the hyperlink text.

Example:

Email enquiries@ot.govt.nz

We include the full phone number in the text. To hyperlink to a phone number use the same process as you would to link to a web page but write 'tel:' before the number. 

Example:

Talk to us on 0508 326 459 if you're thinking about placing your child for adoption.

When we add a link using the ALOT block, information about the file’s format and size will automatically be displayed so users know what they're clicking on.

When we link to files or downloads in text, we use the title of the document to create the link text.

If linking to a document on another website:

• We usually link to the page it is on to provide the context.
• If the page on the website has more than one download link, we can link directly to the file (include file type and size).

Links are designed to be accessible and helpful for users' navigation. This includes the following: 

• Links do not only rely on colour — they are signified either by an underline or panel.
• Visited links are a different colour.
• There is a clear hover state for links, such as underline or colour change.
• Links to external websites are identified by an external icon.
• Links to download files include the file type and size.

At the bottom of a page we sometimes use a 'Related links' section to link to other web pages (either on the same site, or on external sites) that provide relevant information related to the content on the current page.

A 'Resources' section can be used if you're wanting to link to resources on other web pages.