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.
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">.
Image element with a 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.
<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.
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
<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.
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.
