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 4: Línea 4:
|wcag_titulo_criterio=1.3.1-Q. Marcado semántico general
|wcag_titulo_criterio=1.3.1-Q. Marcado semántico general
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 43: Línea 43:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G115: Usar elementos semánticos para marcar la estructura</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G115 G115: Using semantic elements to mark up structure]</span></li>
<li>H49: Usar marcado semántico para texto enfatizado o especial</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H49 H49: Using semantic markup to mark emphasized or special text]</span></li>
<li>G140: Separar estructura y estilo para permitir diferentes presentaciones</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G140 G140: Separating information and structure from presentation to enable different presentations]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar etiquetas semánticas (&lt;em&gt;, &lt;strong&gt;, &lt;cite&gt;, &lt;blockquote&gt;, etc.)</li>
<li>Usar etiquetas semánticas (<code><nowiki> <em>, <strong>, <cite>, <blockquote> </nowiki></code>, etc.)
</li>
<li>No depender solo de estilos visuales para transmitir significado</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>
<li>Asegurar que el significado del contenido sea claro incluso sin CSS</li>
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar contenido con énfasis, citas o significado especial</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Revisar el código para confirmar el uso de marcado semántico apropiado</li>
Usando la herramienta de inspección de código del navegador, localizar los elementos que tengan una función estructural y semántica (por ejemplo, texto enfatizado, citas…).
<li>Validar que el significado no dependa solo de estilo visual</li>
</li>
<li><span class="paso-badge">Paso 2.</span>  
Verificar que cada elemento se define con la etiqueta apropiada.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 68: Línea 76:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<div class="accessibility-card">
El texto en negrita está marcado con una etiqueta <code><nowiki><strong> </nowiki></code>.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<p>Es importante <strong>leer todas las instrucciones</strong> antes de continuar.</p>
<p>Es importante <strong>leer todas las instrucciones</strong> antes de continuar.</p>
</pre>
</pre>
 
</div>
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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección de código del navegador</li>
<li>'''Inspección del navegador''': comprobar que se utilizan elementos HTML semánticos adecuados (p.ej., <code>&lt;h1&gt;–&lt;h6&gt;</code>, <code>&lt;ul&gt;</code>/<code>&lt;ol&gt;</code>, <code>&lt;strong&gt;</code>/<code>&lt;em&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, etc.) en lugar de <code>&lt;div&gt;</code> o <code>&lt;span&gt;</code> sin propósito semántico; verificar que el orden de encabezados es lógico.</li>
<li>Lectores de pantalla para comprobar énfasis y roles semánticos</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) comprobar que la jerarquía, el énfasis y los roles semánticos se anuncian correctamente (encabezados, listas, regiones, énfasis en texto).</li>
<li>'''Herramientas de validación''': [https://validator.w3.org/nu/ Validador HTML W3C (Nu HTML Checker)] y complementos de accesibilidad del navegador para detectar ausencia o mal uso de elementos semánticos.</li>
</ul>
</ul>


}}
}}

Revisión del 09:02 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

Recursos de apoyo

Consejos
  • 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 Manual

Procedimiento de evaluación

  1. Paso 1. Usando la herramienta de inspección de código del navegador, localizar los elementos que tengan una función estructural y semántica (por ejemplo, texto enfatizado, citas…).
  2. Paso 2. Verificar que cada elemento se define con la etiqueta apropiada.

Resultado esperado

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

Ejemplo

El texto en negrita está marcado con una etiqueta <strong> . 

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

Otras herramientas de evaluación

  • Inspección del navegador: comprobar que se utilizan elementos HTML semánticos adecuados (p.ej., <h1>–<h6>, <ul>/<ol>, <strong>/<em>, <header>, <nav>, etc.) en lugar de <div> o <span> sin propósito semántico; verificar que el orden de encabezados es lógico.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) comprobar que la jerarquía, el énfasis y los roles semánticos se anuncian correctamente (encabezados, listas, regiones, énfasis en texto).
  • Herramientas de validación: Validador HTML W3C (Nu HTML Checker) y complementos de accesibilidad del navegador para detectar ausencia o mal uso de elementos 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=3419»