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.
- Web Usability Standard 1.3 — Section 2.1
- New Zealand Government Identity — Public Service Commission
Government websites are also required to follow the Web Accessibility Standard, which includes making images accessible.
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.
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.
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
sr-only (for ‘screen reader-only’). The recommended logo markup uses
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.
Image element with a non-SVG file
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.
The < use > element
< svg > contains any
< use > elements, apply
aria-hidden="true" to those as well.
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.
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.
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.