Summary
Recently, our team received a query about how to publish multilingual content on the University website. There wasn't a clear answer ready, which told me there was a gap that needs to be closed.
I created a new internal guide on multilingual content, showing when and how to use the HTML lang attribute. This isn’t just about achieving WCAG compliance, it’s about making sure our content performs correctly.
For this, we’ll need to think about how our content is received by:
- multilingual users,
- screen reader users,
- people using translation tools,
- and search engines.
Attribution matters
Non-English text read aloud by a screen reader in an English accent can sometimes sound confusing. And sometimes, it can sound a bit funny.
But these things aside, mispronunciation of text is almost always a barrier to understanding, and it can also harm credibility.
Without proper language markup:
- Screen readers mispronounce non-English text
- Search engines may not index content correctly
- WCAG accessibility standards (in this case WCAG 3.1.2 | Language of parts) are not met.
So, if we don’t identify the intended language, the text loses meaning.
What’s covered in the guidance
The multilingual content support page shows colleagues how to:
- Add the lang attribute to phrases or full paragraphs
- Handle punctuation correctly (don’t wrap it unless it’s part of the phrase)
- Pair English and non-English content to reduce confusion
- Understand exceptions, such as café, fiancé, or déjà vu (prevalent in English where they don’t require markup).
Mixed media examples
I also added synthetic audio demos so you can hear the difference a lang attribute makes.
An excerpt from the article explains what happens if you wanted to translate ‘Welcome to the University of Bristol’ into Welsh (Cymraeg).
With the language tag
<p lang="cy">Croeso i Brifysgol Bryste!</p>
<!-- Screen readers that support multiple languages will switch to Welsh (Cymraeg) pronunciation for this sentence -->
Without the language tag
<p>Croeso i Brifysgol Bryste!</p>
<!-- Screen readers read this as English and mispronounce all of the words -->
Changing language mid-sentence and using punctuation
This excerpt from the article shows what to do when switching languages in a single sentence, and what to do about punctuation.
For this, we need to use a <span> tag:
<p>The student completed a translation of the <span lang="fr">Journal officiel de la République française</span>.</p>
<!-- The lang="fr" attribute is applied to the French title of a publication. Keep punctuation outside of the span tag -->
As a rule, we don’t include surrounding punctuation unless it’s part of the phrase.
Working to international standards
The abbreviations used in language tags (like fr for French or zh for Chinese) are defined by the ISO 639-1 standard.
If you work with translation or multilingual content, the W3Schools list of language codes (ISO 639-1) is a useful reference to bookmark.
Language codes can also be combined with country codes to specify regional differences:
For example:
en-GB(British English)en-US(American English)zh-CN(Simplified Chinese, China)zh-TW(Traditional Chinese, Taiwan)
The W3Schools list of country codes (ISO 3166) is another handy page to bookmark.
Conclusions
I enjoyed solving this one. It wasn’t just a technical fix, it’s a holistic example of where content design is the proven method of meeting user needs by implementing standards.
When our team receives a question it immediately shows the real-world need. Now we have a clear, accessible, and shareable answer.
Sometimes accessibility is more about small details. Paying attention to the details is another step towards making content more inclusive and user-focussed.