Readable content
WCAG Guideline 3.1 (AA) and success criteria
Learn how to make text content readable and understandable.
Last updated on
Specify the language of each web page (Level A, 3.1.1)
Websites must indicate what language the content is written in. This allows assistive technologies and web browsers to read and present the content to users. For example, screen readers can load the correct pronunciation rules and browsers can display correct characters and script. It also helps search engines understand the content, which can improve its visibility to a wider audience.
How to specify the language of a web page
- To do this, specify the language in the HTML code, the most common way is to use the ‘lang’ attribute within the opening HTML tag. Set the value of the attribute to the appropriate language code that represents the default human language used on the page. For example, if the page is in English, you would use:
<html lang="en"> - Make sure to use the appropriate language code for the ‘lang’ attribute according to the IETF BCP 47 standard. This ensures compatibility with various assistive technologies and language processing tools
- If the webpage includes dynamic content that changes the language, ensure the language attribute is updated accordingly
Specify if the content language changes (Level AA, 3.1.2)
You must first indicate the language of the page (as per 3.1.1).
If the language changes within the content, you must state what language it’s changed to. This allows assistive technologies and web browsers to accurately read and present the content to users. For example, screen readers can load pronunciation rules and browsers can display characters and script. It also helps search engines understand the content, which can improve its visibility to a wider audience.
Exceptions with language changes
You don’t need to tag words or phrases that have become part of the default language. For example, the French term ‘rendezvous’ in English content. Also exempt are:
- Technical or scientific terms that originate in a foreign language such as Latin
- Proper names, such as names of people, places or organizations
How to indicate a language change
- If specific sections of the page are written in a separate language, add the ‘lang’ attribute to the specific sections. For example:
<p lang="es">Este párrafo está escrito en español.</p>
In this example, ‘es’ indicates the language of the paragraph is Spanish. And the message says, ‘This paragraph is written in Spanish’ - If you’re providing a link to content in another language, the link should have an ‘hreflang’ attribute. For example:
<a href="/gov/content/covid-19/vaccine/booster" hreflang="fr">Français</a>
<a href="/gov/content/covid-19/vaccine/booster" hreflang="ko">한국어</a>