Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-Q»

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 16: Línea 16:
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
</li>


<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>
Línea 33: Línea 27:
|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad cognitiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=

Revisión del 05:55 5 nov 2025

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

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

Comentarios

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

Loading comments...