This post originally appeared on the Yahoo! Accessibility Blog.
In an increasingly global Internet web sites must be built for a diverse audience of users who may speak one or more languages. This includes establishing the base language for the page and changing the language for foreign words within the content. In making your pages language-aware you not only please your users, particularly those using screen reading software, but also search engines.
Luckily adding language awareness to your pages is fairly easy to handle. The first thing is to add a language declaration to your site.
Sample code for assigning the document's language
The language is defined with a series of characters, divide by hyphens. "en" means it is English. "-US" tells us this is American English. "en-GB" would be for Great Britain and "en-CA" is for Canadian English.
Defining foreign languages in a page
The following is a list of the word Potato in different languages. Each item will have the appropriate lang="foo-bar" attribute.
Sample code for defining language on subsections of a site
<dt>U.S. English </dt>
<dd lang="fr-fr">pommes de terre</dd>
<dd lang="it-IT">di patate</dd>
A list of potatoes with different languages
- U.S. English
Listen: You should notice the voice change its inflection and pronunciation for the various languages. JAWS announces various translations of "potato" with correct language declaration
Missing language attributes
The following list is missing the language attributes. This will help you notice the difference it makes.
- U.S. English
- British English
- French (France)
- pommes de terre
- Spanish (Spain)
- di patate
Listen: You should notice the voice does not change and treats the words as if they were English. JAWS announces various translations of "potato" that do not have language declarations