Principio 1/1.3 Adaptable/1.3.1-Q

De WCAG Wiki

1.3.1-Q. Marcado semántico general

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En general, se deben emplear elementos estructurales y semánticos para marcar la estructura del contenido de la página y el texto especial o enfatizado, haciendo que toda la información y las relaciones del contenido transmitidas a través de la presentación visual también se marquen con dichos elementos estructurales y semánticos o, en su defecto, directamente en forma de texto.

Comprensión del criterio

Descripción resumida

El marcado semántico debe reflejar la estructura y el significado del contenido. Elementos como <em>, <strong>, <blockquote>, <cite>, <sup>, etc., deben utilizarse para comunicar énfasis, citas u otra información que pueda presentarse visualmente.

Objetivo

Asegurar que la estructura, jerarquía y significado del contenido sean detectables y comprensibles por software, facilitando la accesibilidad para usuarios que utilizan tecnologías de apoyo.

Importancia de cumplir el criterio

Si la información depende únicamente de la presentación visual (como tamaño, cursiva, color), se pierde para quienes usan lectores de pantalla o estilos personalizados. El marcado semántico preserva el significado más allá del estilo visual.

Referencias WCAG

  • G115: Usar elementos semánticos para marcar la estructura
  • H49: Usar marcado semántico para texto enfatizado o especial
  • G140: Separar estructura y estilo para permitir diferentes presentaciones

Recursos de apoyo

  • Usar etiquetas semánticas (<em>, <strong>, <cite>, <blockquote>, etc.)
  • No depender solo de estilos visuales para transmitir significado
  • Asegurar que el significado del contenido sea claro incluso sin CSS

Evaluación del criterio

Tipo de evaluación

Procedimiento de evaluación

  1. Identificar contenido con énfasis, citas o significado especial
  2. Revisar el código para confirmar el uso de marcado semántico apropiado
  3. Validar que el significado no dependa solo de estilo visual

Resultado esperado

El contenido está marcado con elementos semánticos adecuados y no depende únicamente de estilos visuales para transmitir significado.

Ejemplo ilustrativo

Ejemplo correcto:
<p>Es importante <strong>leer todas las instrucciones</strong> antes de continuar.</p>

Ejemplo incorrecto:

<p><span style="font-weight:bold;">Es importante leer todas las instrucciones</span></p>


Otras herramientas de evaluación

  • Inspección de código del navegador
  • Lectores de pantalla para comprobar énfasis y roles semánticos










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UFV1.3.1-Q-00011 enero 2026 21:25:26
2525UPSA1.3.1-Q-00018 diciembre 2025 16:41:45


Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-Q. Marcado semántico general

Loading comments...