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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
202526UdL34 (discusión | contribs.)
alumnos
12 ediciones
Sin resumen de edición
 
(No se muestran 4 ediciones intermedias de otro usuario)
Línea 1: Línea 1:
__TOC__
{{ActividadWCAG
== '''1.3.1-Q. Marcado semántico general''' ==
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
<!--
|id_subcriterio=1.3.1-Q
  Análisis interno:
|id_universidad=UdL
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
|curso_academico=2025-26
  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.
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-Q
-->
|noa_barrera_evidencia_img=2025 26 UdL 1.3.1-Q NOA2.jpg
<html>
|noa_barrera_explicacion=A la hora de entender la organización de una web y sus componentes esta web no cumple con los criterios necesarios de semántica correcta ya que, los elementos son difíciles de distinguir, no hay una jerarquía ni orden claro.
<!-- criterio 1.3.1-Q -->
|noa_barrera_usuarios=Las personas con visibilidad reducida son claramente afectadas
<article class="wcag-card">
|acc_barrera_evidencia_img=2025 26 UdL 1.3.1-Q ACC2.jpg
  <section class="wcag-info">
|acc_barrera_explicacion=Todos los elementos son distinguibles, los títulos tienen un tamaño adecuado para que resalten y se entienda la estructura en general, además de una buena semántica.
    <ul>
}}
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
{{CriterioWCAG
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|id_wcag_criterio=1.3.1
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|id_wcag_subcriterio=1.3.1-Q
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
|wcag_titulo_criterio=1.3.1-Q. Marcado semántico general
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
|wcag_nivel=A
      <li><span class="label">Subcategoría:</span><span class="value">Marcado semántico</span></li>
|wcag_version=2.0
    </ul>
|wcag_principio=1_Perceptible
  </section>
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_grupo=Estructura
|wcag_subgrupo=Marcado semántico


  <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-leve">Barrera leve</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:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
 
|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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G115 G115: Using semantic elements to mark up structure]</span></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><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>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G117 G117: Using text to convey information that is conveyed by variations in presentation of text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F2 F2: Failure due to using changes in text presentation to convey information without using the appropriate markup or text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F33 F33: Failure due to using white space characters to create multiple columns in plain text content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F43 F43: Failure due to using structural markup in a way that does not represent relationships in the content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F87 F87: Failure due to inserting non-decorative content using :before and :after pseudo-elements and the CSS content property]</span></li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
 
<ul>
<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>Asegurar que el significado del contenido sea claro incluso sin CSS</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
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>
<li><span class="paso-badge">Paso 2.</span>  
Verificar que cada elemento se define con la etiqueta apropiada.
</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=
<div class="accessibility-card">
El texto en negrita está marcado con una etiqueta <code><nowiki><strong> </nowiki></code>.
<pre class="wcag-codigo-html">
<p>Es importante <strong>leer todas las instrucciones</strong> antes de continuar.</p>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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''': (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>
 
}}

Revisión actual - 22:44 19 feb 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 1.3.1 - Información y relaciones (Nivel: A)
Título del subcriterio: 1.3.1-Q
Universidad participante: UdL
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-Q


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.

2.1.2. Código HTML:

<thead><th scope="col" id="c_A2"...



Explicación del problema detectado:
A la hora de entender la organización de una web y sus componentes esta web no cumple con los criterios necesarios de semántica correcta ya que, los elementos son difíciles de distinguir, no hay una jerarquía ni orden claro.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con visibilidad reducida son claramente afectadas

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.


2.2.2 Código HTML:

No se ha proporcionado código.



Explicación de la solución aplicada:
Todos los elementos son distinguibles, los títulos tienen un tamaño adecuado para que resalten y se entienda la estructura en general, además de una buena semántica.





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 ilustrativo

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

1 de enero de 20261 de octubre de 2025
 Última modificación
Principio 1/1.3 Adaptable/1.3.1-Q19 febrero 2026 22:44:51
1.3.1-Q. Marcado semántico general19 febrero 2026 22:15:58
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...




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