Setting the language

Public Article

Article is certified Certified Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.


Language of Page

Code showing <htm lang="en">

3.1.1  Language of Page (A)

This guideline is to ensure that the language of a web page is correctly identified to enable browsers and assistive technologies, e.g. screen readers, to correctly present text. This is done via the <html> tag using lang=”en”

WCAG 2.1 reference:

3.1 Make text content readable and understandable

Test at the Same Time

3.1.2 Language of Parts

Tools Required

Developer tools (F12)

How to Test

  1. Open the web page to be tested.
  2. If the page is mainly in English, check that it's opening <html> tag has the lang="en"” or lang="en-NZ"” attribute and value. If the page is mainly in te reo Māori, check that the <html> tag has lang="mi"”. If the page is in another language, check for that the appropriate ISO 639-1 two-letter language code is used. Note that if the page uses XHTML, the lang attribute value must be duplicated in the xml:lang attribute, e.g. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">. The presence of the proper lang attribute and value can be checked in a few ways:
    • Using the browser’s Developer tools, inspect the <html> tag and check for the appropriate value on the lang attribute (and xml:lang if applicable).
    • Review the HTML markup using the browser’s View Source feature. Search for <html> and check for the appropriate value on the lang attribute (and xml:lang if applicable).

Potential Access Issues

  • The <html> tag does not have the lang attribute.
  • The <html> tag has a lang attribute but its value identifies the wrong language.

Language of Parts

3.1.1  Language of Parts (AA)

Where the language (e.g. English or Māori) of a passage or phrase in the content is different from the page’s main language, it must be identified in the HTML markup to help browsers and assistive technologies, e.g. screen readers, correctly present changes in the language of text on the page.

Test at the same time

 3.1.1 Language of Page

Tools required

  • Developer tools (F12)

Exceptions

Where a word or short phrase is in common use in the main page language it is not necessary to indicate a change, e.g. kia ora, rendezvous, homo sapiens.

How to test

  1. Open the web page to be tested.
  2. Look for content in a language other than the page’s main language.
  3. Check that the HTML element containing that content (but not content in the page’s main language) has a lang attribute with the appropriate ISO 639-1 two- letter language code. For example, if some text on an English page is in te reo Māori, then look for lang="mi" on a surrounding span, p, h3 or other element. Note that if the page uses XHTML, the lang attribute value must be duplicated in the xml:lang attribute, e.g. <span xml:lang="mi" lang="en">. The presence of the proper lang attribute and value can be checked in a few ways:
    • Using the browser’s Developer tools, inspect the HTML element containing the content in the other language and look for a lang attribute with the appropriate language code.
    • Review the HTML markup using the browser’s View Source feature. Search for the text in the other language and check for the appropriate lang attribute and value on the HTML element containing the text.

Potential access issues

  • No lang attribute is applied to an HTML element containing the text which is in a language different from the language of the page.

Setting the language was posted on 23/01/2023 @ 16:30