Search code examples
htmlscreen-readerslang

Does a tag's lang attribute cascade down that node tree?

I have a CMS template that adds lang="en" to the html element because most pages and the template are in English, but users can create a page (really just main content area content) and specify another language. Thus, the template with header/navigation/footer is still in English, but the main page content can be in another language.

If I set <div id="main-content" lang="es">…</div>, will that lang attribute cascade down to all the sub elements within that div or does each child element also need that lang attribute? Does it vary by screen reader?

An alternative would be to set the <html lang="es"> and add lang="en" for all the non-user-editable template elements such as the header/nav/footer but that would get rather cumbersome.

All the lang stuff I've found is for top-level elements <span lang="en">only some text and no other tags</span> and doesn't address/mention a whole tree.

Solution

  • Yes, it cascades down.

    https://www.w3.org/TR/html53/dom.html#the-lang-and-xmllang-attributes

    The lang attribute (in no namespace) specifies the primary language for the element’s contents (my emphasis)...

    The "element's contents" can be any element nested under it.

    It then says,

    If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.

    That essentially addresses the "whole tree".

    It comes in handy so that you can set the language for the whole page and then if you have small snippets that are in another language, each little snippet can have their own lang attribute and a screen reader will switch dialects and accents and read the words natively (or as native as a computer voice can sound).

    To see an example, go to UPS's global page, https://www.ups.com/us/en/global.page. If you expand, say, Europe, view the source code for each choice and you'll see the lang attribute all over the place.

    <li lang="nl">
  <a href="http://www.ups.com/be/nl/Home.page" ...>België - Nederlands</a>
</li>
<li lang="fr">
  <a href="http://www.ups.com/be/fr/Home.page" ...>Belgique - Français</a>
</li>