El texto no está en forma de normalización Unicode C.

Unicode permite que algunos caracteres se representen de múltiples formas. Por ejemplo, la letra acentuada “é” se puede almacenar como un único carácter precompuesto (U+00E9) o como dos puntos de código separados: la letra base “e” (U+0065) seguida de un acento agudo combinado (U+0301). Aunque estos se ven idénticos al renderizarse, son fundamentalmente diferentes a nivel de bytes. La forma de normalización Unicode C (NFC) es la forma canónica que prefiere la representación precompuesta única siempre que exista una.

La especificación HTML y el modelo de caracteres W3C para la World Wide Web requieren que todo el texto en documentos HTML esté en NFC. Esto es importante por varias razones:

• Coincidencia de cadenas y búsqueda: El texto no NFC puede causar fallos cuando los navegadores o scripts intentan hacer coincidir cadenas, comparar valores de atributos o procesar selectores CSS. Dos cadenas visualmente idénticas en diferentes formas de normalización no coincidirán con una comparación simple de bytes.
• Accesibilidad: Los lectores de pantalla y tecnologías asistivas pueden comportarse de manera inconsistente al encontrar secuencias de caracteres descompuestos.
• Interoperabilidad: Diferentes navegadores, motores de búsqueda y herramientas pueden manejar el texto no NFC de manera diferente, llevando a comportamientos impredecibles.
• Identificadores de fragmento e IDs: Si un atributo id contiene caracteres no NFC, los enlaces de fragmento (#id) pueden fallar al funcionar correctamente.

Este problema aparece más comúnmente cuando se copia texto de procesadores de texto, PDFs u otras aplicaciones que usan formas Unicode descompuestas (NFD), o cuando el contenido es generado por software que no normaliza su salida.

Cómo solucionarlo

1. Identifica el texto afectado: El validador señalará la línea específica que contiene caracteres no NFC. Los caracteres a menudo se verán normales visualmente, así que necesitarás inspeccionarlos a nivel de punto de código.
2. Convierte a NFC: Usa un editor de texto o herramienta de línea de comandos que soporte normalización Unicode. Muchos lenguajes de programación proporcionan funciones de normalización incorporadas.
3. Previene problemas futuros: Configura tu editor de texto o pipeline de construcción para guardar archivos en NFC. Al aceptar entrada del usuario, normalízala del lado del servidor antes de almacenarla o incrustarla en HTML.

En Python, puedes normalizar una cadena:

import unicodedata
normalized = unicodedata.normalize('NFC', original_string)

En JavaScript (Node.js o navegador):

const normalized = originalString.normalize('NFC');

En la línea de comandos (usando uconv de ICU):

uconv -x NFC input.html > output.html

Ejemplos

Incorrecto (forma descompuesta — NFD)

En este ejemplo, la letra “é” está representada como dos puntos de código (e + acento agudo combinado), lo que desencadena la advertencia de validación. El código fuente puede verse idéntico a la versión correcta, pero los bytes subyacentes difieren:

<!-- La "é" aquí está almacenada como U+0065 U+0301 (descompuesta) -->

<p>Résumé available upon request.</p>

Correcto (forma precompuesta — NFC)

Aquí, el mismo texto usa el único carácter precompuesto é (U+00E9):

<!-- La "é" aquí está almacenada como U+00E9 (precompuesta) -->

<p>Résumé available upon request.</p>

Incorrecto en atributos

El texto no NFC en valores de atributos también desencadena este problema:

<!-- El id contiene un carácter descompuesto -->

<h2 id="resumé">Résumé</h2>

Correcto en atributos

<!-- El id usa el carácter NFC precompuesto -->

<h2 id="resumé">Résumé</h2>

Aunque estos ejemplos se ven iguales en el texto renderizado, la diferencia está en cómo se codifican los caracteres. Para verificar que tu texto está en NFC, puedes pegarlo en una herramienta de inspector Unicode o usar las funciones de normalización mencionadas arriba. Para lectura adicional, el W3C proporciona una excelente guía sobre normalización en HTML y CSS.

Más información:

W3C Reference

Normalization in HTML and CSS

→