El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Internacionalització i localització

Següent ►
►

Cursalia és multilingüe: cada curs, cada botó i cada missatge existeixen en espanyol, català i anglès (es/ca/en), i l'alumne canvia d'idioma amb un selector a la capçalera. Aquest multilingüisme, que sembla un assumpte de traducció, té un vessant d'accessibilitat que gairebé ningú no atén i que afecta de ple la Marta. Quan el seu lector de pantalla NVDA troba un text, necessita saber en quin idioma llegir-lo per usar la veu i la pronunciació correctes: un text en anglès llegit amb les regles fonètiques de l'espanyol sona com un garbuix incomprensible. I no n'hi ha prou amb el text visible: els alt, els aria-label, les dates, la direcció del text… tot té el seu matís. En aquesta lliçó connectem accessibilitat i idioma, recolzant-nos en criteris WCAG que fins ara només havíem anomenat (3.1.1 i 3.1.2) i en el selector d'idioma de Cursalia com a fil conductor.

Contingut

  1. Internacionalització (i18n) i localització (l10n): la diferència
  2. L'atribut lang a <html> (WCAG 3.1.1)
  3. lang en fragments d'un altre idioma (WCAG 3.1.2)
  4. Direcció del text: dir i propietats CSS lògiques
  5. Traduir també el que no es veu: alt, aria-label, title, missatges d'estat
  6. Formats localitzats: dates, números i moneda
  7. Multimèdia per idioma: subtítols i transcripcions
  8. Text en imatges i consideracions culturals
  9. Errors comuns i consells
  10. Exercicis
  11. Conclusió

  1. Internacionalització (i18n) i localització (l10n): la diferència

Dos termes que es confonen constantment:

Terme Què és Exemple a Cursalia
Internacionalització (i18n) Dissenyar l'aplicació perquè pugui adaptar-se a diversos idiomes i regions, sense tocar el codi Extreure tots els textos a fitxers de traducció; no incrustar cadenes a l'HTML
Localització (l10n) Adaptar l'aplicació a un idioma/regió concrets Traduir al català, formatar dates a l'estil local, ajustar iconografia

La i18n és la infraestructura; la l10n és cada adaptació concreta. El nostre focus aquí no és com muntar aquesta infraestructura (això és arquitectura), sinó com fer que el resultat sigui accessible en cada idioma. I tot comença per dir-li a la màquina en quin idioma està cada cosa.

  1. L'atribut lang a <html> (WCAG 3.1.1)

El criteri WCAG 3.1.1 (Language of Page, nivell A) exigeix que l'idioma principal de cada pàgina estigui declarat per programa. Es fa amb l'atribut lang a l'etiqueta <html>:

<!-- Quan l'alumne té Cursalia en català -->
<html lang="ca">

Això és crític per a la Marta. Amb lang="ca", NVDA carrega la veu i les regles de pronunciació del català; sense ell (o amb un lang equivocat), llegiria el català amb la veu per defecte del sistema, produint un so inintel·ligible. També afecta: la selecció de tipus de lletra, la separació sil·làbica, les cometes tipogràfiques i els correctors.

A Cursalia, el lang de <html> ha de canviar amb el selector d'idioma. Si l'alumne passa d'espanyol a anglès, no n'hi ha prou amb traduir els textos: cal actualitzar també l'atribut:

// En usar el selector d'idioma de Cursalia
function canviarIdioma(codi) { // 'es' | 'ca' | 'en'
  document.documentElement.setAttribute('lang', codi);
  // …i carregar les traduccions d'aquella llengua
}

Usa sempre codis BCP 47 correctes: es, ca, en (i variants regionals quan importin, com ara en-GB o es-MX). Un lang="english" o lang="castellano" no és vàlid i el lector l'ignora.

  1. lang en fragments d'un altre idioma (WCAG 3.1.2)

El criteri WCAG 3.1.2 (Language of Parts, nivell AA) va un pas més enllà: quan dins d'una pàgina en un idioma apareix un fragment en un altre idioma, aquest fragment s'ha de marcar amb el seu propi lang. És habitualíssim a Cursalia: la fitxa d'un curs en espanyol que cita el títol original en anglès, o un terme tècnic estranger.

<!-- Pàgina en espanyol amb una citació en anglès -->
<p lang="es">
  El curso se inspira en la charla
  <span lang="en">The Future of Accessible Design</span>,
  muy recomendable.
</p>

Sense el lang="en" a l'<span>, NVDA llegiria "The Future of Accessible Design" amb fonètica espanyola: alguna cosa com "te futur of accesible desing". Amb ell, canvia momentàniament a la veu anglesa, llegeix la frase correctament i torna a l'espanyol. És exactament el que faria una persona bilingüe.

Compara:

<!-- Malament: el nom en anglès es llegirà amb fonètica espanyola -->
<p lang="es">Hemos añadido un curso de <strong>machine learning</strong>.</p>

<!-- Bé: es marca el fragment estranger -->
<p lang="es">Hemos añadido un curso de <strong lang="en">machine learning</strong>.</p>

Matís pràctic: no cal marcar paraules que ja s'han incorporat plenament a la llengua (préstecs assentats com "software" o "email" en espanyol). El criteri apunta a fragments que són d'un altre idioma, no a cada estrangerisme quotidià. Aplica el sentit comú: si un lector humà canviaria d'accent en llegir-lo, marca'l.

  1. Direcció del text: dir i propietats CSS lògiques

Encara que es/ca/en s'escriuen d'esquerra a dreta (LTR), pensar en internacionalització obliga a preparar el terreny per a idiomes de dreta a esquerra (RTL) com l'àrab o l'hebreu, per si Cursalia s'expandeix. L'atribut dir declara la direcció:

<html lang="ar" dir="rtl">   <!-- àrab: de dreta a esquerra -->
<html lang="es" dir="ltr">   <!-- espanyol: d'esquerra a dreta -->

L'error clàssic és maquetar amb propietats CSS físiques (margin-left, padding-right, left), que queden a l'inrevés en RTL. La solució moderna són les propietats lògiques, que es refereixen a l'inici i el final del flux de lectura i s'adapten soles a la direcció:

/* Malament: física, no s'adapta a RTL */
.targeta-curs { margin-left: 1rem; text-align: left; }

/* Bé: lògica, correcta en LTR i en RTL sense tocar res */
.targeta-curs { margin-inline-start: 1rem; text-align: start; }
Propietat física Propietat lògica equivalent
margin-left margin-inline-start
padding-right padding-inline-end
left / right inset-inline-start / inset-inline-end
text-align: left text-align: start
border-left border-inline-start

Usar propietats lògiques és també accessibilitat: garanteix que l'ordre visual coincideixi amb l'ordre de lectura en qualsevol idioma, cosa que la Sofía (baixa visió, que segueix el text amb la lupa) agraeix especialment.

  1. Traduir també el que no es veu: alt, aria-label, title, missatges d'estat

Aquest és el punt que més s'oblida. Quan es tradueix Cursalia, es tradueix el visible… i es deixen en l'idioma original els textos per a tecnologies d'assistència. Resultat: la Marta, amb Cursalia en català, sent botons i descripcions en espanyol. Tot text destinat a persones —visible o no— s'ha de traduir:

Element S'oblida sovint S'ha de traduir
alt d'imatges Sí Sí (Mòdul 5)
aria-label / aria-labelledby Sí Sí
title d'icones i enllaços Sí Sí
Missatges de les regions actives (07-01) Moltíssim Sí
Text dels subtítols De vegades Sí (vegeu §7) 
<!-- Malament: l'aria-label es va quedar en espanyol amb la interfície en anglès -->
<html lang="en">
  <button aria-label="Añadir a favoritos" class="fav-btn">★</button>

<!-- Bé: el nom accessible acompanya l'idioma de la interfície -->
<html lang="en">
  <button aria-label="Add to favourites" class="fav-btn">★</button>

I molt important, reprenent 07-01: els missatges de les regions actives també es tradueixen. El "12 cursos trobats", el "Matrícula feta amb èxit!" o el "Pàgina carregada" del route announcer de 07-02 han de sortir del sistema de traducció, no ser cadenes fixes al codi. Si la Marta usa Cursalia en anglès, ha de sentir "12 courses found", no "12 cursos trobats".

  1. Formats localitzats: dates, números i moneda

Una data com 07/06/2026 és ambigua: és el 6 de juliol o el 7 de juny? Depèn de la convenció local. I per a la Marta, com es llegeix aquest format en veu alta també canvia. La solució és no formatar a mà, sinó usar l'API Intl del navegador, que produeix el format correcte per idioma:

const data = new Date('2026-07-06');

// Espanyol: "6 de julio de 2026"
new Intl.DateTimeFormat('es', { dateStyle: 'long' }).format(data);

// Anglès (GB): "6 July 2026"
new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(data);

// Preu del curs en euros, format espanyol: "49,99 €"
new Intl.NumberFormat('es', { style: 'currency', currency: 'EUR' }).format(49.99);

Per a màxima claredat amb lectors de pantalla, acompanya les dates llegibles d'un <time> amb datetime en format màquina, de manera que quedi la data exacta i inequívoca:

<!-- Visible i localitzat + valor màquina inequívoc -->
<time datetime="2026-07-06">6 de juliol de 2026</time>

Compte també amb els números: en espanyol el separador de milers és el punt i el decimal la coma (1.234,50); en anglès, a l'inrevés (1,234.50). Un lector de pantalla pot llegir-los de manera molt diferent. Deixar que Intl ho resolgui evita que "1,5" es llegeixi com "mil cinc-cents" en un idioma i "u coma cinc" en un altre.

  1. Multimèdia per idioma: subtítols i transcripcions

Al Mòdul 5 (05-03) vas fer accessibles els vídeos del reproductor de Cursalia amb subtítols i transcripcions, pensant sobretot en el Diego (sordesa). La internacionalització hi afegeix una capa: cada idioma necessita la seva pròpia pista. Un vídeo pot tenir diverses pistes <track>, cadascuna amb el seu srclang i el seu label:

<video controls>
  <source src="leccio-01.mp4" type="video/mp4">
  <track kind="subtitles" src="subs-es.vtt" srclang="es" label="Español" default>
  <track kind="subtitles" src="subs-ca.vtt" srclang="ca" label="Català">
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English">
</video>

El srclang permet que el reproductor i les tecnologies d'assistència sàpiguen l'idioma de cada pista; el label és el que l'usuari veu al menú de subtítols. Idealment, la pista default coincideix amb l'idioma que l'alumne té seleccionat a Cursalia. El mateix aplica a les transcripcions: ofereix-les en cada idioma disponible, no només en l'original. El Diego, mirant Cursalia en català, espera subtítols en català, no en anglès.

  1. Text en imatges i consideracions culturals

Evita el text incrustat en imatges

Ja ho vam advertir a 05-04: el text dins d'una imatge no és seleccionable, no escala bé i és invisible per al lector de pantalla llevat del seu alt. La internacionalització hi dona un motiu més i contundent: el text incrustat no es pot traduir sense refer la imatge. Un bàner del catàleg amb "Oferta d'estiu!" escrit dins del .png obliga a generar tres imatges (es/ca/en) i mantenir-les sincronitzades. La solució correcta és text real (HTML) sobre la imatge mitjançant CSS: es tradueix tot sol, escala amb el zoom de la Sofía i el llegeix la Marta.

<!-- Malament: el text viu dins del PNG, no es tradueix ni escala -->
<img src="baner-oferta-estiu.png" alt="Oferta d'estiu! 20% de descompte">

<!-- Bé: imatge de fons + text real i traduïble a sobre -->
<div class="baner" style="background-image: url(baner-fons.jpg)">
  <h2>{{ t('oferta_estiu_titol') }}</h2>
  <p>{{ t('oferta_estiu_desc') }}</p>
</div>

Consideracions culturals i iconografia

Localitzar no és només traduir paraules. Les icones i els símbols no signifiquen el mateix a tot arreu, i una icona confusa és una barrera cognitiva —pensa en el Hugo (dislèxia/TDAH), a qui una icona ambigua carrega més que ajuda. Bones pràctiques:

  • Acompanya les icones de text (o d'un aria-label traduït): no confiïs que un símbol s'entengui igual a tota cultura.
  • Compte amb els colors: les seves connotacions varien culturalment. No usis només el color per transmetre significat (regla de sempre, Mòdul 4).
  • Revisa gestos, banderes i metàfores visuals: una bandera per triar idioma és problemàtica (un idioma no equival a un país; l'anglès no és "només" britànic ni nord-americà). Millor el nom de l'idioma escrit en la seva pròpia llengua: "Español", "Català", "English".
<!-- Selector d'idioma de Cursalia: noms, no banderes -->
<nav aria-label="Seleccionar idioma">
  <button lang="es" aria-current="true">Español</button>
  <button lang="ca">Català</button>
  <button lang="en">English</button>
</nav>

Fixa't en dos detalls del selector: cada botó porta el seu propi lang (perquè NVDA pronunciï "Català" en català i "English" en anglès) i aria-current="true" marca l'idioma actiu, de manera que la Marta sàpiga quin està seleccionat.

Errors comuns i consells

  • No actualitzar lang a <html> en canviar d'idioma. Tradueixes els textos però deixes lang="es": NVDA continua llegint amb veu espanyola un contingut en anglès. El selector ha de canviar el lang.
  • Oblidar lang en els fragments estrangers (3.1.2). Els títols de cursos o termes en un altre idioma es llegeixen amb fonètica equivocada. Marca la <span lang="…">.
  • Traduir només el visible. Els alt, aria-label, title i els missatges de les regions actives es queden en l'idioma original. Tot text per a persones es tradueix.
  • Maquetar amb propietats físiques. margin-left i companyia es trenquen en RTL. Usa propietats lògiques (margin-inline-start).
  • Formatar dates i números a mà. Produeixen ambigüitat i lectures errònies. Usa Intl i <time datetime>.
  • Text incrustat en imatges. No es tradueix, no escala, no es llegeix. Usa text real sobre la imatge.
  • Banderes com a selector d'idioma. Idioma ≠ país. Usa el nom de l'idioma en la seva pròpia llengua, amb el seu lang.
  • Consell: afegeix a la Definition of Done del Mòdul 6 una comprovació per idioma: canviar el selector a ca/en i verificar amb NVDA que lang canvia, que els alt/aria-label estan traduïts i que les dates es llegeixen bé.

Exercicis

Exercici 1. La Marta usa Cursalia en anglès (<html lang="en">) i, a la fitxa d'un curs, sent el títol "Introducción a Python" llegit amb una veu que massacra la fonètica. A més, el botó de preferit li diu "Añadir a favoritos" en lloc de "Add to favourites". Identifica els dos problemes d'accessibilitat multilingüe i com els corregeixes.

Exercici 2. Tens aquesta data d'inici de curs escrita a mà a l'HTML: <span>06/07/2026</span>. Explica per què és problemàtica per a l'accessibilitat i la internacionalització, i reescriu-la de manera correcta per a un usuari amb la interfície en espanyol.

Exercici 3. L'equip de màrqueting vol un bàner "Últimes places!" al catàleg, i proposa pujar-lo com a imatge .png amb el text a dins, en els tres idiomes. Dona dues raons (una d'accessibilitat, una altra d'internacionalització) per rebutjar-ho i descriu l'alternativa correcta.

Solucions

Solució 1. Problema 1: el títol "Introducción a Python" és un fragment en espanyol dins d'una pàgina en anglès i no està marcat amb lang="es", així que NVDA el llegeix amb fonètica anglesa (WCAG 3.1.2). Es corregeix embolcallant-lo: <span lang="es">Introducción a Python</span>. Problema 2: l'aria-label del botó de preferit no es va traduir en canviar d'idioma; continua en espanyol ("Añadir a favoritos") amb la interfície en anglès. Es corregeix fent que aquest aria-label surti del sistema de traducció i mostri "Add to favourites" quan la interfície està en anglès. En resum: marca els fragments d'un altre idioma i tradueix també els textos no visibles.

Solució 2. 06/07/2026 és ambigua (és el 6 de juliol o el 7 de juny?), depèn de la convenció local, i un lector de pantalla pot llegir-la de manera confusa o incorrecta. El correcte és donar un valor màquina inequívoc amb <time datetime> i un text visible localitzat amb Intl:

<time datetime="2026-07-06">6 de julio de 2026</time>

Així l'usuari que hi veu observa la data en format espanyol sense ambigüitat, el lector disposa de la data exacta a datetime, i si es canvia d'idioma, el text visible es pot regenerar amb Intl.DateTimeFormat per al nou locale.

Solució 3. Raó d'accessibilitat: el text incrustat al .png no el pot llegir el lector de pantalla (només dependria del alt), no escala amb el zoom de la Sofía i no es pot seleccionar. Raó d'internacionalització: el text dins de la imatge no es tradueix; obligaria a mantenir tres imatges sincronitzades (es/ca/en) i a refer-les davant de qualsevol canvi. Alternativa correcta: usar una imatge de fons sense text i superposar text real HTML traduïble (amb les cadenes al sistema d'i18n), que es llegeix, s'escala i es tradueix automàticament.

Conclusió

L'accessibilitat i el multilingüisme estan entrellaçats: perquè la Marta senti cada idioma amb la seva veu correcta cal declarar lang a <html> (3.1.1) i en cada fragment estranger (3.1.2); perquè la maqueta funcioni en qualsevol direcció de lectura, propietats CSS lògiques; i cal traduir tot el destinat a persones —alt, aria-label, title, missatges de les regions actives de 07-01, subtítols per idioma de 05-03—, formatar dates i números amb Intl, evitar text incrustat en imatges (05-04) i tenir cura de la iconografia i la cultura. El selector d'idioma de Cursalia no és només un traductor: és un commutador d'accessibilitat.

Amb això, Cursalia ja és una plataforma accessible, dinàmica, aplicativa (SPA) i multilingüe. Només queda mirar cap endavant: cap on va l'accessibilitat web? WCAG 3.0, l'evolució d'ARIA, l'embranzida legal, la irrupció de la IA, l'accessibilitat més enllà de la web i el canvi cultural del "shift-left". Tot això —i el tancament del teu viatge per aquest curs— és l'última lliçó: 07-04: Tendències futures en accessibilitat web.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2026. Tots els drets reservats