Julia 👩🏻💻 GDE
Posted on September 27, 2022
Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.
This article is about the correct use of the HTML lang attribute.
Users select a default language when installing and configuring their screen reader, which will then most likely read the content in the set language if no attribute is set, even if the content is written in a different language.
Users of screen readers and braille translation software rely on the correct language attribute to perceive the content correctly, i.e., proper accent and correct pronunciation.
Most screen readers can read several different languages. Therefore, it is important to specify a specific language in the body of the text when parts, e.g. quotes, are in another language so that they are pronounced correctly.
You can even get more specific and choose not only French, for example, but Canadian French.
Best practices
- Set a default/primary language for the html document e.g.
<html lang="en"> - Make sure the language code is valid
- Set a specific language for a block or inline element when the language differs from the default language set in the
<html>tag e.g.<div lang="fr">
Check out this list of language codes to choose the right one you need.
Check out this list of country codes if you want to be even more specific.
Read more about the HTML lang attribute in W3 WCAG2.1 Success Criterion Understanding Success Criterion 3.1.1: Language of Page.
Posted on September 27, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related