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>
When text becomes complex, create an easy-to-understand version (Level AAA, 3.1.5)
When text information becomes complex, create a plain language, easy to understand version (Level AAA, 3.1.5).
Not all content is easy to understand, especially when it’s dense or technical. If you don’t simplify this content, some people might not understand the information.
For example, a legal document might use technical words like:
- “The party of the first part hereby covenants.”
- The simplified text could say “The first person agrees.”
If your content must remain complex, provide a simple language alternative. If you can use plain language to explain the content, no extra alternatives are necessary.
This approach helps people with cognitive or learning disabilities. It also benefits people who do not speak the language as their first language.
How to include simplified text
When preparing written content, consider including a simplified version along with the original. This should be available, like audio descriptions with video.
Add alternatives for complex visuals and non-text content. Ensure that complex visual information like graphs or charts are also explained.