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

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-E. Evitar listas decorativas''' ===
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-E
|wcag_titulo_criterio=1.3.1-E. Evitar listas decorativas
|wcag_nivel=A
|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 decorativas
 
|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=
No se deben emplear los elementos de lista únicamente con fines presentacionales para marcar contenidos que no son elementos relacionados entre sí.
 
|wcag_descripcion_resumida=
Las etiquetas de lista (&lt;ul&gt;, &lt;ol&gt;, &lt;dl&gt;) solo deben usarse cuando los ítems están semánticamente relacionados. Nunca deben emplearse para añadir sangría, espaciado visual o maquetación sin sentido estructural.
 
|wcag_objetivo=
Garantizar que la estructura semántica represente relaciones reales entre elementos, permitiendo a los lectores de pantalla y otras tecnologías interpretar correctamente la organización del contenido.
 
|wcag_importancia=
Las tecnologías de apoyo anuncian las listas y el número de elementos. Si se usa una lista para fines decorativos, se transmite información falsa, causando confusión y dificultando la navegación y comprensión.
 
|wcag_referencias=
<ul>
<li>H48: Using &lt;ol&gt;, &lt;ul&gt;, &lt;dl&gt; for lists or groups of links</li>
<li>F43: Incorrect structural markup</li>
<li>G115: Using semantic elements to mark up structure</li>
</ul>
 
|wcag_recursos=
<ul>
<li>No usar listas para maqueta visual</li>
<li>No emplear saltos, espacios o tabulaciones para simular estructura</li>
<li>Usar CSS para diseño, no etiquetas semánticas</li>
</ul>


<!-- 
  Análisis interno:
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
  Problema grave: Listas usadas solo para decoración pueden confundir a lectores de pantalla y generar navegación incorrecta. 
-->
<html>
<html>
<!-- criterio 1.3.1-E -->
<iframe width="100%" height="400"
<article class="wcag-card">
        src="https://www.youtube.com/embed/Nv7SEF2CyxY"
  <section class="wcag-info">
        title="Cuándo usar listas en HTML y semántica correcta"
    <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 decorativas</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>Usar WAVE → “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 las listas detectadas contienen elementos realmente relacionados.</li>
    </ul>
<li>Comprobar que no hay listas creadas solo para diseño o sangrado visual.</li>
  </section>
<li>Revisar código si hay duda (&lt;ul&gt;, &lt;ol&gt;, &lt;dl&gt; para estructura real).</li>
</article>
</ol>
</html>
 
|wcag_resultado_evaluacion=
Las listas se usan únicamente para conjuntos de elementos relacionados, no para fines de presentación o maquetación.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</pre>
 
Ejemplo incorrecto (solo sangrado):
<pre class="wcag-codigo-html">
<ul>
<li><p>Texto del párrafo</p></li>
</ul>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>WAVE</li>
<li>Inspección del navegador</li>
</ul>
 
}}

Revisión del 18:21 4 nov 2025

1.3.1-E. Evitar listas decorativas

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)

  • No se deben emplear los elementos de lista únicamente con fines presentacionales para marcar contenidos que no son elementos relacionados entre sí.

Comprensión del criterio

Descripción resumida

Las etiquetas de lista (<ul>, <ol>, <dl>) solo deben usarse cuando los ítems están semánticamente relacionados. Nunca deben emplearse para añadir sangría, espaciado visual o maquetación sin sentido estructural.

Objetivo

Garantizar que la estructura semántica represente relaciones reales entre elementos, permitiendo a los lectores de pantalla y otras tecnologías interpretar correctamente la organización del contenido.

Importancia de cumplir el criterio

Las tecnologías de apoyo anuncian las listas y el número de elementos. Si se usa una lista para fines decorativos, se transmite información falsa, causando confusión y dificultando la navegación y comprensión.

Referencias WCAG

  • H48: Using <ol>, <ul>, <dl> for lists or groups of links
  • F43: Incorrect structural markup
  • G115: Using semantic elements to mark up structure

Recursos de apoyo

  • No usar listas para maqueta visual
  • No emplear saltos, espacios o tabulaciones para simular estructura
  • Usar CSS para diseño, no etiquetas semánticas

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Usar WAVE → “Details – Structural elements”.
  2. Verificar que las listas detectadas contienen elementos realmente relacionados.
  3. Comprobar que no hay listas creadas solo para diseño o sangrado visual.
  4. Revisar código si hay duda (<ul>, <ol>, <dl> para estructura real).

Resultado esperado

Las listas se usan únicamente para conjuntos de elementos relacionados, no para fines de presentación o maquetación.

Ejemplo

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

Ejemplo incorrecto (solo sangrado): 

<ul>
 <li><p>Texto del párrafo</p></li>
</ul>

Otras herramientas de evaluación

  • WAVE
  • Inspección del navegador










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-E. Evitar listas decorativas

Loading comments...




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