• Success Criterion 3.1.2
  • Conformance level AA

Bilingual Layout Where One Column’s Language Goes Unmarked

3.1.2 — Language of Parts

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Bilingual side-by-side layouts where one column is unmarked.

Example 

<div class="chat-translation-columns">
  <div class="original-column">Can you cancel my order?</div>
  <div class="translated-column">¿Puede cancelar mi pedido?</div>
</div>

Why it matters

In this two-column translation view, the right-hand translated column has no lang attribute, so the agent's screen reader reads the Spanish reply with English pronunciation and misses that it's a translation at all.

How to test

Inspect a bilingual side-by-side layout: check whether both columns have correct lang attributes, or whether one column is left unmarked.

How to fix

Tag both sides of a translation pair, not just the one that happens to differ from the page's declared language.

<div class="chat-translation-columns">
  <div class="original-column" lang="en">Can you cancel my order?</div>
  <div class="translated-column" lang="es">¿Puede cancelar mi pedido?</div>
</div>

Outcome

A support agent hears both columns of the translation view spoken in the correct voice for each language.

Who is affected

Screen reader-using support agents working the two-column translation view need each column's language flagged to follow the conversation accurately.

Learn more

Related scenarios