H56Usar dir en un fragmento para ordenar bien textos de dirección mixta

Por qué es importante

El navegador ordena las letras con unas reglas automáticas (el algoritmo bidireccional de Unicode). Esas reglas a veces fallan cuando hay espacios, comas o paréntesis entre textos de distinta dirección.

Entonces una coma, una sigla o un número salen en el lado equivocado. La frase se vuelve confusa o cambia de sentido. El criterio 1.3.2 pide que el orden de lectura correcto se pueda reconocer. Afecta a cualquier web con textos en árabe o hebreo, como la de un servicio de atención a personas migrantes.

Cómo se hace

1. Indique la dirección general de la página en <html>. Si está en árabe o hebreo, use dir="rtl".
2. Rodee cada fragmento escrito en el sentido contrario con un elemento en línea, como <span> o <q>.
3. Ponga en ese elemento dir="rtl" (de derecha a izquierda) o dir="ltr" (de izquierda a derecha). Añada también lang con su idioma.
4. Si no conoce la dirección de antemano, como en nombres que escriben los usuarios, use <bdi> o dir="auto".
5. Indique la dirección en el HTML, no con la propiedad direction de CSS. Forma parte del contenido.

Cómo comprobarlo

1. Localice los textos que mezclan escritura de derecha a izquierda con palabras, siglas o números de izquierda a derecha.
2. Compruebe, con ayuda de alguien que conozca el idioma si hace falta, que signos, siglas y números salen en su sitio.
3. Con las herramientas del navegador (F12), compruebe que el texto de derecha a izquierda está dentro de un elemento con dir="rtl".
4. Compruebe que el texto de izquierda a derecha no tiene dir o tiene dir="ltr".

Ejemplo

Una página en español cita un folleto en árabe cuyo título acaba en coma y año: dir="rtl" deja la coma y el año en su sitio.

<p>El folleto se titula
  <q lang="ar" dir="rtl">دليل الخدمات البلدية، 2025</q>
  en árabe.</p>