Diferencia entre revisiones de «2526UPSA.1.3.1-E-001»

De WCAG Wiki
Edición siguiente →
VisualWikitexto
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 1.4.4-A Redimensionar texto - Javier Pozo (UPSA)
 
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 1.3.1-E - Evitar Listas Decorativas - Javier Pozo (UPSA)
Línea 1: Línea 1:
{{ActividadWCAG
{{ActividadWCAG
|id_criterio=1.4.4 - Redimensionar texto (Nivel: AA)
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
|id_subcriterio=1.4.4-A
|id_subcriterio=1.3.1-E
|id_universidad=UPSA
|id_universidad=UPSA
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.4-A
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-E
|noa_barrera_evidencia_img=2025 26 UPSA 1.4.4-A NOA.png
|noa_barrera_evidencia_img=2025 26 UPSA 1.3.1-E NOA.png
|noa_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://xarxaempren.gencat.cat/es/inici/index.html">https://xarxaempren.gencat.cat/es/inici/index.html</a>
|noa_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://www.fundacionsbs.com/patronato/"> https://www.fundacionsbs.com/patronato/ </a>
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>
  <div class="entry-content">
  <h2 class="h4">Presidenta</h2>
 
  <ul>
    <li>Dña. Begoña Gómez del Rio. Consejera de Inclusión Social, Juventud, Familias e Igualdad.</li>
  </ul>


   <div style="width: 200px; height: 50px; overflow: hidden; border: 1px solid red;">
   <h2 class="h4">Vicepresidente</h2>
  <p>Oferta especial: Compra ahora y recibe un 50% de descuento en todos los productos de la tienda online     antes del domingo.</p>
  <ul>
   </div>
    <li>D. Gregorio Lanza Crespo. Director del Instituto Cántabro de Servicios Sociales.</li>
  </ul>
</div>
 
<style>
  .entry-content {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
 
  .h4 {
    color: #2c3e50;
    font-size: 1.25rem;
    margin-bottom: 10px;
    border-bottom: 2px solid #2c3e50;
    width: fit-content;
  }
 
  ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
  }
 
  li {
    font-size: 1rem;
     color: #333;
   }
</style>


</nowiki>
</nowiki>
|noa_barrera_explicacion=El contenedor tiene una altura fija (height: 50px) y la propiedad overflow: hidden. Cuando el usuario aumenta el tamaño del texto, este necesita más espacio vertical, desborda la caja y es ocultado/cortado por el navegador.
|noa_barrera_explicacion=El incumplimiento del criterio 1.3.1-E en esta página se debe a una discrepancia entre la presentación visual y la estructura semántica del código. Al analizar el fragmento del Patronato, observamos que se han implementado múltiples etiquetas <ul> que contienen un único elemento de lista (<li>) cada una. Esta práctica se considera un uso incorrecto de las listas con fines meramente visuales o "decorativos", ya que el objetivo primordial de una lista es agrupar una serie de elementos relacionados entre sí.
|noa_barrera_usuarios=Afectados: usuarios con baja visión (cataratas, presbicia, glaucoma) que usan ampliación de texto.
|noa_barrera_usuarios=Afectados: personas ciegas usuarias de lectores de pantalla (NVDA, JAWS).


Barrera: pérdida total de información crítica, ya que el final de las frases desaparece y es imposible de leer o recuperar.
Barrera: el software anuncia "Lista de 1 elemento", generando ruido cognitivo y confusión, ya que el usuario espera una enumeración y solo encuentra una frase continuada.
|acc_barrera_evidencia_img=2025 26 UPSA 1.4.4-A ACC.png
|acc_barrera_evidencia_img=2025 26 UPSA 1.3.1-E ACC.png
|acc_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://www.gov.uk/">https://www.gov.uk/</a>
|acc_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein">https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein</a>
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>


   <div style="width: 200px; min-height: 50px; border: 1px solid green;">
   <div class="entry-content">
  <p>Oferta especial: Compra ahora y recibe un 50% de descuento en todos los productos de la tienda online antes del domingo.</p>
    <p>Poco después de la dedicación, su amistad se rompió. Entre las razones que se han dado están:</p>
   </div>
 
    <ul>
      <li>
        En el 2000, Ghislaine Maxwell... contrató como masajista a Virginia Giuffre...
        <sup class="reference">[46]</sup>
      </li>
      <li>
        En 2004, Trump superó la oferta de Epstein por una mansión...
        <sup class="reference">[50]</sup>
      </li>
      <li>
        En junio de 2007 Epstein fue acusado de delitos sexuales.
        <sup class="reference">[52]</sup>
      </li>
      <li>
        En octubre de 2007 Trump revocó la membresía de Epstein...
        <sup class="reference">[53]</sup>
      </li>
    </ul>
</div>
 
<style>
   .entry-content {
    font-family: 'serif', Times, serif;
    line-height: 1.6;
    max-width: 800px;
    color: #202122;
  }
 
  ul {
    list-style-type: disc;
    padding-left: 2.5rem;
    margin-top: 0.5rem;
  }
 
  li {
    margin-bottom: 0.8rem;
    text-align: justify;
  }
 
  .reference {
    font-size: 0.75rem;
    color: #0645ad;
    vertical-align: super;
  }
</style>




</nowiki>
</nowiki>
|acc_barrera_explicacion=Se cambia height por min-height y se elimina overflow: hidden. Esto permite que la caja tenga un tamaño inicial, pero si el texto crece (zoom), la caja se estira verticalmente para acomodarlo todo.
|acc_barrera_explicacion=La implementación técnica observada en el ejemplo de Wikipedia cumple con el criterio 1.3.1-E al agrupar programáticamente todos los elementos relacionados bajo una única etiqueta de lista desordenada. A diferencia del caso no accesible, donde se fragmentaba el contenido en múltiples listas de un solo elemento por motivos puramente decorativos, aquí se mantiene la integridad semántica de la información. Esta estructura permite que los lectores de pantalla anuncien correctamente una "lista de cuatro elementos", proporcionando al usuario un contexto inmediato sobre la extensión del bloque informativo. Asimismo, el uso de una lista real facilita la navegación mediante comandos de teclado, permitiendo saltar entre hitos cronológicos de forma fluida.
}}
}}

Revisión del 18:20 19 dic 2025

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-E
Universidad participante: UPSA
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-E


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:
[<a rel="nofollow" class="external free" href="https://www.fundacionsbs.com/patronato/"> https://www.fundacionsbs.com/patronato/ </a> <a rel="nofollow" class="external free" href="https://www.fundacionsbs.com/patronato/"> https://www.fundacionsbs.com/patronato/ </a>]

2.1.2. Código HTML:

<div class="entry-content"> <h2 class="h4">Presidenta</h2> <ul> <li>Dña. Begoña Gómez del Rio. Consejera de Inclusión Social, Juventud, Familias e Igualdad.</li> </ul> <h2 class="h4">Vicepresidente</h2> <ul> <li>D. Gregorio Lanza Crespo. Director del Instituto Cántabro de Servicios Sociales.</li> </ul> </div> <style> .entry-content { font-family: Arial, sans-serif; padding: 20px; } .h4 { color: #2c3e50; font-size: 1.25rem; margin-bottom: 10px; border-bottom: 2px solid #2c3e50; width: fit-content; } ul { list-style-type: disc; padding-left: 20px; margin-bottom: 20px; } li { font-size: 1rem; color: #333; } </style>



Explicación del problema detectado:

El incumplimiento del criterio 1.3.1-E en esta página se debe a una discrepancia entre la presentación visual y la estructura semántica del código. Al analizar el fragmento del Patronato, observamos que se han implementado múltiples etiquetas
    que contienen un único elemento de lista (
  • ) cada una. Esta práctica se considera un uso incorrecto de las listas con fines meramente visuales o "decorativos", ya que el objetivo primordial de una lista es agrupar una serie de elementos relacionados entre sí. Indica a que personas con discapacidad afecta y explicación de las barreras que causa
    Afectados: personas ciegas usuarias de lectores de pantalla (NVDA, JAWS). Barrera: el software anuncia "Lista de 1 elemento", generando ruido cognitivo y confusión, ya que el usuario espera una enumeración y solo encuentra una frase continuada.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein">https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein</a> <a rel="nofollow" class="external free" href="https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein">https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein</a>]


2.2.2 Código HTML:

<div class="entry-content"> <p>Poco después de la dedicación, su amistad se rompió. Entre las razones que se han dado están:</p> <ul> <li> En el 2000, Ghislaine Maxwell... contrató como masajista a Virginia Giuffre... <sup class="reference">[46]</sup> </li> <li> En 2004, Trump superó la oferta de Epstein por una mansión... <sup class="reference">[50]</sup> </li> <li> En junio de 2007 Epstein fue acusado de delitos sexuales. <sup class="reference">[52]</sup> </li> <li> En octubre de 2007 Trump revocó la membresía de Epstein... <sup class="reference">[53]</sup> </li> </ul> </div> <style> .entry-content { font-family: 'serif', Times, serif; line-height: 1.6; max-width: 800px; color: #202122; } ul { list-style-type: disc; padding-left: 2.5rem; margin-top: 0.5rem; } li { margin-bottom: 0.8rem; text-align: justify; } .reference { font-size: 0.75rem; color: #0645ad; vertical-align: super; } </style>



Explicación de la solución aplicada:
La implementación técnica observada en el ejemplo de Wikipedia cumple con el criterio 1.3.1-E al agrupar programáticamente todos los elementos relacionados bajo una única etiqueta de lista desordenada. A diferencia del caso no accesible, donde se fragmentaba el contenido en múltiples listas de un solo elemento por motivos puramente decorativos, aquí se mantiene la integridad semántica de la información. Esta estructura permite que los lectores de pantalla anuncien correctamente una "lista de cuatro elementos", proporcionando al usuario un contexto inmediato sobre la extensión del bloque informativo. Asimismo, el uso de una lista real facilita la navegación mediante comandos de teclado, permitiendo saltar entre hitos cronológicos de forma fluida.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA.1.3.1-E-001&oldid=4038»