NZ government logo markup

Use this HTML markup with 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 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 HyperText Markup Language (HTML) should:

  • reinforce the visual treatment of the Māori and English texts in the logo
  • 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.

Communicate the logo in both languages

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

So that assistive technologies, like screen readers, communicate the same bilingual information to their users, specific HTML markup is needed.

One version of the name is included in the alt attribute on the <img> element that holds the logo.

The other language version of the name is included as visually hidden text alongside the <img> element. Sighted users cannot see it, but it remains available to assistive technologies and will be announced by screen readers.

A lang attribute on the element containing the visually hidden text signals that it’s in a different language from the page’s main language.

Where each language version goes

Which version of the government’s name to use in the alt attribute of the <img> depends on which language is declared in the lang attribute on the <html> element for the page as a whole.

Example — Māori is the page’s main language

When the value of the lang attribute on the page’s <html> element is mi, <html lang="mi">, the alt attribute of the logo’s <img> will be the government’s name in Māori.

The visually hidden text will be the government’s name in English and its containing element will have lang="en-NZ".

Example — English is the page’s main language

When the value of the lang attribute on the page’s <html> element is en-NZ, <html lang="en-NZ">, the alt attribute of the logo’s <img> will be the government’s name in English.

The visually hidden text will be the government’s name in Māori and its containing element will have lang="mi".

Visually hidden text

The markup for the logo assumes that the web page's Cascading Style Sheets (CSS) includes a utility class for visually hiding content from sighted users, but keeping it available to assistive technologies.

This type of utility class is often named visually-hidden or sr-only (for ‘screen reader-only’). The recommended logo markup uses visually-hidden.

Inclusively Hidden — Scott O’Hara website

HTML markup to apply

Apply the markup option for the type of image you’re using and the language of the web page.

Image element 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 — SVG file
<a href="https://www.govt.nz">
  <span class="visually-hidden"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / </span>
  <img src="path-to-file.svg" alt="New Zealand Government">
</a>
On a page in Māori — SVG file
<a href="https://www.govt.nz">
  <img src="path-to-file.svg" alt="Te Kāwanatanga o Aotearoa"> 
  <span class="visually-hidden"><span lang="en-NZ"> / New Zealand Government</span> </span>
</a>

Image element with a non-SVG file

On a page in English — non-SVG file
<a href="https://www.govt.nz">
  <span class="visually-hidden"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / </span>
  <img src="path-to-file" alt="New Zealand Government">
</a>
On a page in Māori — non-SVG file
<a href="https://www.govt.nz">
  <img src="path-to-file" alt="Te Kāwanatanga o Aotearoa"> 
  <span class="visually-hidden"><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 — inline <svg>
<a href="https://www.govt.nz"> 
  <span class="visually-hidden"><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 Māori — inline <svg>
<a href="https://www.govt.nz"> 
  <span class="visually-hidden">Te Kāwanatanga o Aotearoa<span lang="en-NZ"> / New Zealand Government</span> </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 markup of the <use> element
<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 markup of the xmlns declaration
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">...</svg>

CSS background-image attached to the anchor element

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 — CSS background-image
<a href="https://www.govt.nz"> 
  <span class="visually-hidden"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / New Zealand Government </span>
</a>
On a page in Māori — CSS background-image
<a href="https://www.govt.nz"> 
  <span class="visually-hidden">Te Kāwanatanga o Aotearoa<span lang="en-NZ"> / New Zealand Government</span> </span>
</a>

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, JAWS and NVDA in Chrome on Windows, or VoiceOver in Safari on iOS.

Utility links and page information

Was this page helpful?
Thanks, do you want to tell us more?

Do not enter personal information. All fields are optional.

Last updated