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

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-D. Listas estructuradas''' ==
|id_wcag_criterio=1.3.1
<!--
|id_wcag_subcriterio=1.3.1-D
   Análisis interno:
|wcag_titulo_criterio=1.3.1-D. Listas estructuradas
   Este criterio impacta principalmente a: Personas con discapacidad visual total
|wcag_nivel=A
  Problema grave: El contenido relacionado que no está marcado con listas dificulta la navegación y comprensión en lectores de pantalla.
|wcag_version=2.2
-->
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_grupo=Estructura y relaciones
|wcag_subgrupo=Listas semánticas
 
|wcag_discapacidades=
<li class="discapacidad-item">
  [[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="gravedad gravedad-grave">Barrera grave</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 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=
El contenido que se muestra como un listado de elementos relacionados entre sí (incluyendo los enlaces de menús y barras de navegación) se debe marcar con los elementos adecuados de lista (<ol> para listas ordenadas, <ul> para listas desordenadas y <dl>, <dt> y <dd> para listas de términos y definiciones).
 
|wcag_descripcion_resumida=
Los conjuntos de elementos relacionados deben marcarse con etiquetas de lista semánticas (&lt;ul&gt;, &lt;ol&gt;, &lt;dl&gt;). Esto incluye menús, barras de navegación y cualquier agrupación de enlaces o ítems relacionados.
 
|wcag_objetivo=
Permitir que las tecnologías de apoyo detecten que se trata de una lista, comunicar cuántos elementos contiene y facilitar la navegación estructurada por el contenido.
 
|wcag_importancia=
Si se representan listas solo mediante estilo visual (guiones, saltos, iconos) sin semántica HTML, los usuarios de lectores de pantalla no pueden percibir relaciones ni navegar rápidamente entre los elementos. Las etiquetas de lista permiten identificar grupos de elementos y mejorar la comprensión y escaneo del contenido.
 
|wcag_referencias=
<ul>
<li>H48: Using &lt;ol&gt;, &lt;ul&gt; and &lt;dl&gt; for lists or groups of links</li>
</ul>
 
|wcag_recursos=
<ul>
<li>En PDFs, usar etiquetas L y LI para listas accesibles</li>
<li>El uso de listas facilita lectura y comprensión</li>
<li>Menús y colecciones de enlaces deben marcarse como listas</li>
</ul>
 
<html>
<html>
<!-- criterio 1.3.1-D -->
<iframe width="100%" height="400"
<article class="wcag-card">
        src="https://www.youtube.com/embed/Nv7SEF2CyxY"
  <section class="wcag-info">
        title="Marcado semántico correcto de listas en HTML"
    <ul>
        frameborder="0"
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
        allowfullscreen>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
</iframe>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
</html>
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Listas</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_tipo_evaluacion=Semiautomática
    <p>Usuarios más afectados</p>
 
    <ul>
|wcag_pasos_evaluacion=
      <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>
<ol class="paso-list">
      <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>
<li>En WAVE, seleccionar “Details – Structural elements”.</li>
      <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>Verificar que elementos agrupados aparezcan como listas ordenadas o desordenadas.</li>
    </ul>
<li>Comprobar que no existan listas visuales creadas solo con estilo, iconos o saltos de línea.</li>
  </section>
</ol>
</article>
 
</html>
|wcag_resultado_evaluacion=
Los elementos relacionados se marcan correctamente con etiquetas de lista (&lt;ul&gt;, &lt;ol&gt;, &lt;dl&gt;) y no se utilizan únicamente para estilo.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</pre>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<p>- Inicio<br>- Servicios<br>- Contacto</p>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>WAVE</li>
<li>Inspección del navegador</li>
</ul>
 
}}

Revisión del 18:15 4 nov 2025

1.3.1-D. Listas estructuradas

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)

  • El contenido que se muestra como un listado de elementos relacionados entre sí (incluyendo los enlaces de menús y barras de navegación) se debe marcar con los elementos adecuados de lista (
      para listas ordenadas,
        para listas desordenadas y
        ,
        y
        para listas de términos y definiciones).

Comprensión del criterio

Descripción resumida

Los conjuntos de elementos relacionados deben marcarse con etiquetas de lista semánticas (<ul>, <ol>, <dl>). Esto incluye menús, barras de navegación y cualquier agrupación de enlaces o ítems relacionados.

Objetivo

Permitir que las tecnologías de apoyo detecten que se trata de una lista, comunicar cuántos elementos contiene y facilitar la navegación estructurada por el contenido.

Importancia de cumplir el criterio

Si se representan listas solo mediante estilo visual (guiones, saltos, iconos) sin semántica HTML, los usuarios de lectores de pantalla no pueden percibir relaciones ni navegar rápidamente entre los elementos. Las etiquetas de lista permiten identificar grupos de elementos y mejorar la comprensión y escaneo del contenido.

Referencias WCAG

  • H48: Using <ol>, <ul> and <dl> for lists or groups of links

Recursos de apoyo

  • En PDFs, usar etiquetas L y LI para listas accesibles
  • El uso de listas facilita lectura y comprensión
  • Menús y colecciones de enlaces deben marcarse como listas

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. En WAVE, seleccionar “Details – Structural elements”.
  2. Verificar que elementos agrupados aparezcan como listas ordenadas o desordenadas.
  3. Comprobar que no existan listas visuales creadas solo con estilo, iconos o saltos de línea.

Resultado esperado

Los elementos relacionados se marcan correctamente con etiquetas de lista (<ul>, <ol>, <dl>) y no se utilizan únicamente para estilo.

Ejemplo ilustrativo

Ejemplo correcto: 
<ul>
 <li>Inicio</li>
 <li>Servicios</li>
 <li>Contacto</li>
</ul>

Ejemplo incorrecto: 

<p>- Inicio<br>- Servicios<br>- Contacto</p>


Otras herramientas de evaluación

  • WAVE
  • Inspección del navegador










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UPSA1.3.1-A-00020 diciembre 2025 09:08:02


Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-D. Listas estructuradas

Loading comments...




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