Acerca de este problema HTML
El atributo aria-hidden controla si un elemento y sus descendientes están expuestos a tecnologías asistivas como lectores de pantalla. Cuando se establece en true, el elemento queda oculto del árbol de accesibilidad; cuando se establece en false, permanece visible. Según la especificación WAI-ARIA, los únicos valores válidos para este atributo son las cadenas literales true y false. Cualquier otro valor — incluyendo "true" con comillas embebidas — es inválido.
Cuando el validador reporta un valor incorrecto como "true" (con las comillas como parte del valor), significa que el valor real del atributo contiene los caracteres "true" en lugar de solo true. Los atributos HTML ya usan comillas externas como delimitadores, por lo que cualquier comilla dentro del valor se convierte en parte del valor mismo. El navegador o la tecnología asistiva puede no reconocer "true" como un estado ARIA válido, lo que puede llevar a que el elemento sea incorrectamente expuesto u oculto de los lectores de pantalla, rompiendo el comportamiento de accesibilidad previsto.
Este problema surge comúnmente en algunos escenarios:
- Copiar y pegar desde texto formateado donde se incluyen “comillas tipográficas” o comillas adicionales.
-
Motores de plantillas o frameworks que escapan doblemente o entrecomillan doble los valores de atributos (ej.,
aria-hidden="{{value}}"donde{{value}}ya devuelve"true"). -
JavaScript que establece el atributo con comillas adicionales, como
element.setAttribute("aria-hidden", '"true"').
Para corregir el problema, asegúrate de que el valor del atributo contenga solo la cadena simple true o false sin comillas adicionales, entidades HTML o caracteres escapados dentro de él.
Ejemplos
Incorrecto — comillas adicionales embebidas en el valor
<div aria-hidden='"true"'>
Este contenido debería estar oculto de la tecnología asistiva
</div>
El valor del atributo renderizado es literalmente "true" (cinco caracteres incluyendo las comillas), que no es un valor ARIA reconocido.
Incorrecto — entidades HTML que producen comillas adicionales
<div aria-hidden=""true"">
Este contenido debería estar oculto de la tecnología asistiva
</div>
Las entidades " se resuelven a caracteres de comillas, produciendo el mismo valor inválido de "true".
Correcto — valor simple true
<div aria-hidden="true">
Este contenido está oculto de la tecnología asistiva
</div>
Correcto — valor simple false
<div aria-hidden="false">
Este contenido es visible para la tecnología asistiva
</div>Corregir el problema en JavaScript
Si estás estableciendo el atributo dinámicamente, asegúrate de no envolver el valor en comillas adicionales:
<div id="modal">Contenido del modal</div>
<script>
// Incorrecto:
// document.getElementById("modal").setAttribute("aria-hidden", '"true"');
// Correcto:
document.getElementById("modal").setAttribute("aria-hidden", "true");
</script>Corregir el problema en motores de plantillas
Si una variable de plantilla ya devuelve una cadena entrecomillada, no agregues comillas adicionales alrededor de ella. Por ejemplo, en un sistema de plantillas:
<!-- Incorrecto: si myVar devuelve "true" (con comillas) -->
<!-- <div aria-hidden="{{myVar}}"> -->
<!-- Correcto: asegúrate de que myVar devuelva solo true (sin comillas) -->
<div aria-hidden="true">
Contenido
</div>
La conclusión clave es sencilla: las comillas externas en aria-hidden="true" son sintaxis HTML — delimitan el valor del atributo. El valor en sí debe ser exactamente true o false sin nada adicional. Si estás generando HTML dinámicamente, inspecciona la salida renderizada en las herramientas de desarrollador de tu navegador para confirmar que el valor del atributo no contenga comillas extraviadas.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.