Skip to Main Content

go to Indiana University Indiana University


Web Accessibility Made Easy: Primary Language

This entry in the “Web Accessibility Made Easy” series will discuss setting the primary language of a web page and how to deal with language changes.

Language Attribute

The Language attribute of HTML, lang=”fr”, identifies the language of the document to user agents (browsers, search engines, assistive technology), in this case to French. Including the language attribute in the <html > tag at the beginning of a document sets the primary language for the entire document.  If the document will adhere to the XHTML specification, the xml:lang=”fr” language attribute should also be included. The xml:lang attribute is the standard way to identify language information in XML. Subsequent use of the language attribute changes the primary language to a different language, but only for that HTML element.  Language reverts back to the primary language at the end of the element.  

The syntax consists of primary code followed by an optional dash and subcode:

lang=”primary code (“-” subcode) “

Sample Language codes:

lang=”fr” : French.
lang=”en-US” : The U.S. version of English.
lang=”en-cockney” : the Cockney version of English.
lang=”i-navajo” : the Navajo language spoken by some Native Americans.
lang=”x-klingon” : The primary tag “x” indicates an experimental language tag (W3C)

Two-letter primary codes are reserved for language abbreviations that adhere to the [ISO639] standard. Likewise, any two-letter optional sub code should adhere to the [ISO3166] standard.

Guideline

IU Web Accessibility Guidelines

  1. Clearly identify the primary natural language of the document and any instances when that language changes to another language including instances of text equivalents.

This guideline requires that in every document the language attribute is used in the <html> tag to  specify the primary language.  The guideline also stipulates that any subsequent changes of language be specified.  This allows for proper rendering of the text for all user agents including screen-reading software.

Tutorial

This tutorial will again be using the Bad example web page,  the Good example web page and their associated style sheets.

1.  Viewing the bad code – missing language attribute

The code shown below does not contain any language attributes to indicate primary language. Therefore, screen-reading software will attempt to speak the German text in the example as English assuming the default language for the screen reader has been set to English.  When the primary language is not specified, user agents – in this case screen-reading software – default to the primary language for which they have been configured, in this example English. This results in mispronunciation of any language other than English.  If web pages are coded to correctly to indicate primary and secondary languages, screen-reading software can be set to automatically switch to the appropriate language by the screen-reader user.

<html xmlns=”http://www.w3.org/1999/xhtml”>

<p>Netz-Zug&auml;nglichkeit ist wichtig, weil sie nicht nur jene Leute mit Unfähigkeit fördert. Sie hilft auch, die Web site allgemeinhin zugänglich zu bilden, indem sie Tastaturzugang, Lärmkontrollen, Aufflackernkontrollen und viel anderen Nutzen bewilligen.</p>

2.   Adding the Language attribute to the <html> tag and to subsequent HTML elements

To indicate primary language for a web page, add the Language attribute to the <html> tag as in the example below.

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US” xml:lang=”en-US”>

Simply adding both the HTML and XML language attributes to the <html> tag specifies the primary language for the entire document. All user agents should render the page content in the correct language as long as there are no changes from the primary language to another language. Adding the language attribute to subsequent HTML elements will accommodate language changes within the rest of document.

<div lang=”de”>
<p>Netz-Zug&auml;nglichkeit ist wichtig, weil sie nicht nur jene Leute mit Unf&auml;higkeit f&ouml;rdert. Sie hilft auch, die Web site allgemeinhin zug&auml;nglich zu bilden, indem sie Tastaturzugang, L&auml;rmkontrollen, Aufflackernkontrollen und viel anderen Nutzen bewilligen.</p>
</div>

The language attribute can be added to most HTML elements  including  <p>, <span>, <div>, <label>.  An important exception to this rule … the <body> tag.  Instead of including the language attribute in the body tag, it should be included in the <html> tag, as discussed above, to specify primary language for a document.  Adding the language attribute to the <div> tag in the  example above renders only the text in this HTML element in German for all user agents.

Wrap Up

Identifying the primary language is not only beneficial to users of adaptive technology; it is beneficial to all users. The language attribute helps to ensure that languages render correctly in any web browser. Additionally, search engines recognize the language attribute, which can help sort search results by language. Multiple language changes are supported without issue when the language attribute is used.  Using the language attribute adds little extra time to the development of a page. However, it makes a  big difference to users of adaptive technology, particularly for those who use  screen-reading software.


One Response to "Web Accessibility Made Easy: Primary Language" to “Web Accessibility Made Easy: Primary Language”

  1. Andy Teh Says:

    Thanks for the post. Declaring the primary language of the pages on my site was something I hadn’t considered. It took me a minute to add the attribute:

    Switching languages within a page by embedding the attribute in other tags, e.g. , , , etc. might come in handy one day, say, if I wanted to add a foreign-language word.

Leave a Reply

 

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.