TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si un documento HTML no declara su idioma a través del atributo lang, el lector de pantalla asumirá por defecto el idioma del sistema operativo de la persona usuaria. Si el sistema está en inglés y el sitio web en español, el lector intentará aplicar reglas fonéticas inglesas a palabras españolas, volviendo el contenido indescifrable.
La barrera del idioma no declarado
El Criterio WCAG 3.1.1 (Idioma de la Página) es uno de los requisitos más fáciles de cumplir, pero uno de los más ignorados. Las herramientas de asistencia no detectan el idioma analizando el texto; confían ciegamente en el contrato del DOM. Si la etiqueta es incorrecta, la experiencia auditiva se rompe instantáneamente.
El patrón erróneo: Código Accesible Deficiente
Dejar que el navegador o el lector de pantalla "adivinen" la intención del autor.
<!-- MAL: Ausencia total de declaración de idioma -->
<!DOCTYPE html>
<html>
<head>...</head>
<body>Bienvenidos al portal</body>
</html>La Solución Accesible: Código Recomendado
Inyectar el código ISO del idioma primario en la raíz del documento. Si hay fragmentos internos en otros idiomas, se debe aplicar el atributo localmente.
<!-- BIEN: Idioma declarado a nivel global -->
<!DOCTYPE html>
<html lang="es">
<body>
<h1>Bienvenidos al portal</h1>
<!-- BIEN: Cambio de idioma en bloque específico -->
<blockquote lang="en">To be or not to be.</blockquote>
</body>
</html>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Activar NVDA o VoiceOver y navegar al contenido de la página. Verificar que la pronunciación del sintetizador de voz sea correcta para el idioma declarado. Si las palabras suenan con fonética incorrecta (ej: español leído con acento inglés), el atributo lang está ausente o tiene un valor inválido.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 3.1.1.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 3.1.1. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
