How should a bilingual Hong Kong site mark language changes inside one page?

Start with the reader’s actual sentence

A bilingual site can have a complete English page and a complete Traditional Chinese page, yet still contain mixed-language fragments within each edition. A Chinese checkout page might quote an English warranty clause, show an English delivery instruction from a supplier, or include an English paragraph in a product specification. The reader question is whether those passages are meant to be read in their original language. If they are, the page needs a machine-readable change at the passage itself. A menu that swaps the entire page cannot convey the language of a phrase left inside the current page. Treat this as a content and markup review, beginning with actual customer journeys rather than a blanket search for Latin characters.

The W3C Web Content Accessibility Guidelines distinguish the default language of a page from the language of a passage or phrase. Criterion 3.1.1 addresses the page default at Level A; criterion 3.1.2 asks that the human language of each passage or phrase can be determined programmatically at Level AA, with explicit exceptions. Those levels describe WCAG conformance criteria, not a local legal finding about a particular business. The practical consequence is to set the document language correctly, then inspect meaningful changes within the body. A page whose root declares Traditional Chinese does not automatically describe a full English paragraph buried in the returns policy.

Mark the smallest meaningful passage

In HTML, the lang attribute identifies the primary language of an element’s content. Put the page default on the html element, then apply a suitable lang value to a paragraph or inline element that contains a genuine change. For example, an English sentence embedded in a Traditional Chinese explanation can sit in a span with lang set to en; a whole English paragraph can carry lang on its paragraph element. The surrounding Chinese text continues to inherit the page language. Use the language tag that matches the content actually written, not the customer’s region, server location, or the editor’s preferred interface. A locale convention such as zh-HK may be useful for a Hong Kong Traditional Chinese edition, but the markup still has to match what readers see.

Do not turn every brand name, model code, borrowed word, or technical term into a separate language island. WCAG 3.1.2 explicitly excepts proper names, technical terms, words whose language is indeterminate, and words that have become part of the surrounding language. W3C’s explanatory guidance also cautions that a single foreign-looking word often functions as part of its surrounding sentence. Ask whether the phrase is a genuine passage in another language and whether marking it improves comprehension. Overmarking can create noisy voice changes and a maintenance burden. Conversely, a whole quoted English instruction in a Chinese support answer is not merely a model name; leaving its language unstated obscures the intended reading.

A useful worked case is a bilingual appliance retailer publishing a Chinese product page. The heading, price explanation and delivery policy are Chinese; a supplier’s two-sentence English safety notice must remain verbatim for customers who need to compare it with packaging. Keep the Chinese page default, present the notice as a distinct passage with English language markup, and provide a clear Chinese explanation beside it rather than assuming every reader understands the source notice. If the English notice is only an internal drafting remnant, remove or translate it instead of using markup to legitimise unfinished copy. The language decision follows editorial purpose; the tag is the implementation of that decision.

Test the rendered page and the content workflow

Inspect the rendered document, not only a CMS field or design mockup. Confirm the html element has the intended default, that the changed phrase is wrapped around the right words, and that templating does not strip the attribute when content is published. Check a product page, a form, an error message, transactional help, and any supplier-supplied passage that the team commonly pastes. When testing speech, listen with the actual screen reader and voice configuration used in the test, but also inspect the markup: W3C notes that pronunciation can vary between assistive technologies and that speech output alone is not a complete conformance test. A surprising voice change may expose a problem; it does not by itself prove exactly where the code is wrong.

Give editors a small repeatable rule: identify the page language, flag complete foreign-language phrases during copy review, and decide whether each is a quote, a required original passage, a name, or an untranslated mistake. Developers can then expose a safe way to mark a genuine passage without allowing arbitrary markup in customer content. Record one example for Chinese copy containing English and one for English copy containing Chinese. After a translation or catalogue import, recheck a sample because a previously marked English sentence may have become Chinese, or a new supplier passage may have arrived without a marker. This is a maintainable editorial control rather than a one-time code patch.

The acceptance check is specific: on each sampled page, a reviewer can point to the default language, explain which passages truly change language, inspect the corresponding attributes, and confirm that the visible words and language tags agree. If a mixed-language phrase is in a button label or error message, include that rendered state too; static article text is only part of the journey. Where the team cannot decide whether a borrowed term has changed language, document the editorial choice and test understanding with users rather than generating thousands of automatic spans. The goal is predictable reading of meaningful text, supported by evidence from the page actually served.

Handle real mixed-language edge cases

A language attribute is inherited through an element’s descendants unless a nested element changes it. That makes a long quotation easy to mark, but it also means nested labels and links deserve attention. If an English paragraph contains a Chinese call-to-action link, the paragraph can be marked English while the link text carries its own Chinese language value. Check the rendered accessible name as well as visible text. A designer may split a sentence into styled spans for colour or emphasis; those spans do not necessarily create separate language changes. Mark according to the words and their intended reading, not the number of visual fragments in the DOM.

A translated interface sometimes retains an original product name while the surrounding explanation changes language. Proper names are an exception under the criterion, so the team should not mechanically tag every brand. Yet an original-language tagline or a full safety sentence is different from a name. Write down that distinction in the content guide with examples from the actual catalogue. This makes supplier imports and seasonal campaign updates less dependent on one editor remembering an unwritten rule. If a supplier sends both Chinese and English safety wording, choose which text is primary for each page and show the other as an explicitly identified original passage when it serves a reader need.

The review should include text produced after an interaction. A Chinese form may display an English payment-provider error, or an English help page may insert a Chinese delivery district name inside a status line. Record the language decision at the content source and inspect the final state in the browser. If the application cannot safely mark a dynamic fragment, a clearer alternative may be to rewrite the message wholly in the page language while retaining a neutral reference code. That choice can reduce switching and give customers a more coherent explanation. It also avoids accidentally presenting a provider’s untranslated diagnostic as customer guidance.

Before signing off, compare the English and Chinese editions for meaning rather than counting mirrored tags. The English version may quote a Chinese place name; the Chinese version may quote a supplier warranty line. Their exceptions and required markers will therefore differ. Make a short record of the sampled pages, the passages reviewed, the markup observed and any assisted-reading issues. The next content update can then retest the same decision points. This is especially useful when a CMS, translation plugin or product feed changes the rendered markup without changing the editor’s draft text.