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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
__TOC__
{{CriterioWCAG
== '''1.3.1-Q. Marcado semántico general''' ==
|id_wcag_criterio=1.3.1
<!-- 
|id_wcag_subcriterio=1.3.1-Q
  Análisis interno:
|wcag_titulo_criterio=1.3.1-Q. Marcado semántico general
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
|wcag_nivel=A
  Problema grave: No usar marcado semántico impide que los lectores de pantalla interpreten correctamente la estructura y el énfasis del contenido, afectando navegación y comprensión. 
|wcag_version=2.2
-->
|wcag_principio=1_Perceptible
<html>
|wcag_principio_url=Principio_1
<!-- criterio 1.3.1-Q -->
|wcag_pauta=1.3_Adaptable
<article class="wcag-card">
|wcag_pauta_url=Principio_1/1.3_Adaptable
  <section class="wcag-info">
|wcag_grupo=Estructura
    <ul>
|wcag_subgrupo=Marcado semántico
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Marcado semántico</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera moderada</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span></li>
</li>
    </ul>
 
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
 
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
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.
 
|wcag_descripcion_resumida=
El marcado semántico debe reflejar la estructura y el significado del contenido. Elementos como &lt;em&gt;, &lt;strong&gt;, &lt;blockquote&gt;, &lt;cite&gt;, &lt;sup&gt;, etc., deben utilizarse para comunicar énfasis, citas u otra información que pueda presentarse visualmente.
 
|wcag_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.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li>G115: Usar elementos semánticos para marcar la estructura</li>
<li>H49: Usar marcado semántico para texto enfatizado o especial</li>
<li>G140: Separar estructura y estilo para permitir diferentes presentaciones</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar etiquetas semánticas (&lt;em&gt;, &lt;strong&gt;, &lt;cite&gt;, &lt;blockquote&gt;, etc.)</li>
<li>No depender solo de estilos visuales para transmitir significado</li>
<li>Asegurar que el significado del contenido sea claro incluso sin CSS</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li>Identificar contenido con énfasis, citas o significado especial</li>
<li>Revisar el código para confirmar el uso de marcado semántico apropiado</li>
<li>Validar que el significado no dependa solo de estilo visual</li>
</ol>
 
|wcag_resultado_evaluacion=
El contenido está marcado con elementos semánticos adecuados y no depende únicamente de estilos visuales para transmitir significado.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<p>Es importante <strong>leer todas las instrucciones</strong> antes de continuar.</p>
</pre>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<p><span style="font-weight:bold;">Es importante leer todas las instrucciones</span></p>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Inspección de código del navegador</li>
<li>Lectores de pantalla para comprobar énfasis y roles semánticos</li>
</ul>
 
}}

Revisión del 18:39 4 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

Evaluación Comprobación manual

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...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-Q&oldid=3331»