Skip to main content

NZ government logo markup

Apply HTML markup to the NZ government logo to make it accessible.

Requirements for government websites

As part of the NZ Government Web Usability Standard, government websites are required to display a visible link to www.govt.nz, ideally using a suitable NZ government logo.

Government websites are also required to follow the Web Accessibility Standard, which includes making images accessible.

Accessibility considerations

To meet the above standards and offer an accessible experience of the logo for as many users as possible, the HTML markup should:

  • reinforce the visual treatment of the Māori and English texts in the logo in the HTML markup
  • programmatically identify that some of the text in the logo is in te reo Māori, and some in English
  • work well with current browser and screen reader combinations.

HTML markup to apply

Apply one of the markup options from the accordion list to make the logo accessible for users, including those who rely on a keyboard, or cannot see or easily comprehend the image.

In the markup examples:

  • a page in English has the language markup <html lang="en-NZ"> 
  • a page in te reo Māori has the language markup <html lang="mi">.

Content <img> with an SVG (.svg) file

A bug with VoiceOver in iOS requires the use of role="img" on the <img> element when it references a .svg file.

Bug 187695: .svg and voiceover bug — bugs.webkit.org

On a page in English

<a href="https://www.govt.nz">
  <span class="sr-only"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / </span> 
  <img src="path-to-file.svg" role="img" alt="New Zealand Government">
</a>

On a page in te reo Māori

<a href="https://www.govt.nz">
  <img src="path-to-file.svg" role="img" alt="Te Kāwanatanga o Aotearoa"> 
  <span class="sr-only"><span lang="en-NZ"> / New Zealand Government</span></span>
</a>

Content <img> with a non-SVG file

On a page in English

<a href="https://www.govt.nz">
  <span class="sr-only"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / </span>
  <img src="path-to-file" alt="New Zealand Government">
</a>

On a page in te reo Māori

<a href="https://www.govt.nz">
  <img src="path-to-file" alt="Te Kāwanatanga o Aotearoa"> 
  <span class="sr-only"><span lang="en-NZ"> / New Zealand Government</span></span>
</a>

Inline <svg> element

In the case of inline <svg>, and to avoid screen readers accidentally announcing some part of it, apply aria-hidden="true" to hide it entirely from assistive technologies, and apply focusable="false" to keep it out of the keyboard focus order in Internet Explorer 11.

On a page in English

<a href="https://www.govt.nz"> 
  <span class="sr-only"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / New Zealand Government</span> 
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

On a page in te reo Māori

<a href="https://www.govt.nz"> 
  <span class="sr-only">Te Kāwanatanga o Aotearoa<span lang="en-NZ"> / New Zealand Government</span> 
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

The <use> element

If the <svg> contains any <use> elements, apply aria-hidden="true" to those as well.

Example code
<svg aria-hidden="true" focusable="false"> 
  <use aria-hidden="true" xlink:href="#id-of-svg-node" ></use>
</svg>

The xmlns declaration

If the web page is being served as text/HTML then the SVG XML namespace declaration xmlns is not required.

However, if the web page is served as application/xhtml+xml, or otherwise requires an XML parser, then it is required.

Example code
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">...</svg>

CSS background-image attached to the <a>

This type of markup is not recommended for use. The logo is meaningful and not purely presentational content, and is best as content in the HTML.

If the following markup must be applied, use the CSS background-image property to assign the logo to the <a> element.

On a page in English

<a href="https://www.govt.nz"> 
  <span class="sr-only"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / New Zealand Government</span>
</a>

On a page in te reo Māori

<a href="https://www.govt.nz"> 
  <span class="sr-only">Te Kāwanatanga o Aotearoa<span lang="en-NZ"> / New Zealand Government</span></span>
</a>

Visually hidden text

For sighted users, the logo contains the government’s name in both English and te reo Māori.

For users who rely on text-to-speech software such as a screen reader, the recommended logo markup patterns use visually hidden text to make sure that a fully bilingual text equivalent is available.

When applicable, the markup applies the sr-only, or ‘screen reader-only’, class name, which visually hides some of the logo’s alternative text for sighted readers, but leaves it available for screen readers to read out to users.

The sr-only class has particular CSS properties for visually hiding the content but keeping it there for screen readers.

Inclusively Hidden — Scott O’Hara website

Browser and screen reader tested

The markup patterns have been successfully tested and should work in all commonly used browser and screen reader combinations, for example Safari on macOS with VoiceOver.

Utility links and page information

Did you find what you are looking for?

Your feedback will help us improve this website.

Thanks, do you want to tell us more?

Do not enter personal information. All fields are optional.

Page last updated: