Diferencia entre revisiones de «2526UPSA1.3.1-A-000»

De WCAG Wiki
← Edición anterior
VisualWikitexto
202526UPSA16 (discusión | contribs.)
alumnos
24 ediciones
Sin resumen de edición
202526UPSA19 (discusión | contribs.)
alumnos
15 ediciones
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias de 2 usuarios)
Línea 1: Línea 1:
{{ActividadWCAG
{{ActividadWCAG
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
|id_subcriterio=1.3.1-A
|id_subcriterio=1.3.1-D
|id_universidad=UPSA
|id_universidad=UPSA
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-A
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-D
|noa_barrera_evidencia_img=ImagenNoAccesible.png
|noa_barrera_evidencia_img=2025 26 UPSA 1.1.3-D NOA.png
|noa_barrera_evidencia_url=https://www.upsa.es/
|noa_barrera_evidencia_url=https://www.berkshirehathaway.com/
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>
<h2 class="mt-0 py-8 pb-0 pt-lg-10 pb-lg-5 b-text u-text-transform-uppercase b-text--2xl b-text--secondary b-text--color-inverted b-text--lg-3xl">ATRÉVETE A DAR EL PRIMER PASO</h2>
<tr>
<h5 class="mt-8 b-text b-text--lg-font-weight-l b-text--2m b-text--color-inverted">Oferta académica</h5>
    <td valign="top" width="50%">
      <ul>
        <li><a href="message.html">A Message from Warren E. Buffett</a></li>
      </ul>
    </td>
    <td valign="top" width="50%">
      <ul>
        <li><a href="webfraud.pdf">Fraudulent Claims Regarding...</a></li>
      </ul>
    </td>
</tr>
</nowiki>
</nowiki>
|noa_barrera_explicacion=La página web no contiene ningún h1 y salta directamente de un h2 a un h5.
|noa_barrera_explicacion=El problema es la fragmentación de la estructura. El criterio 1.3.1 exige que la estructura transmita la relación entre los elementos. En este código, en lugar de crear una lista con muchos elementos, se ha creado una tabla y dentro y se ha creado una lista nueva y separada para cada enlace individual. Para el ordenador, estos enlaces no tienen relación entre sí; son independientes. Es como si en una lista de la compra escribieras cada ingrediente en un papel distinto en lugar de todos en la misma hoja.
|noa_barrera_usuarios=Esto hace que las personas que padecen algún tipo de discapacidad visual que les obliga a usar un lector de pantalla no puedan navegar libremente a través de los encabezados ya que estos se encuentran mal colocados.
|noa_barrera_usuarios=Este error es muy molesto para las personas ciegas que usan lectores de pantalla:
|acc_barrera_evidencia_img=https://wikiwcag.udl.cat/images/e/e7/EjemploAccesible131.png
 
|acc_barrera_evidencia_url=https://consejodetransparencia.es/inicio
Exceso de ruido: Al navegar, el lector anunciará constantemente el inicio y fin de lista para cada ítem. Escucharán: "Lista de 1 elemento: Mensaje de Warren. Fuera de lista. Lista de 1 elemento: Reclamaciones. Fuera de lista...".
 
Pérdida de visión global: El usuario nunca recibe la información de "Tienes 15 enlaces disponibles". No puede saber la longitud del contenido ni navegar eficientemente por el grupo.
|acc_barrera_evidencia_img=2025 26 UPSA 1.1.3-D ACC.png
|acc_barrera_evidencia_url=https://es.wikipedia.org/wiki/Felis_catus
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>
<h1 class="cmp-title__text dnt-title-default">
<ul class="vector-toc-contents" id="mw-panel-toc-list">
Consejo de Transparencia AAI
<li id="toc-mw-content-text"
</h1>
class="vector-toc-list-item vector-toc-level-1">
<h2 class="cmp-title__text dnt-title-default">
<a href="#" class="vector-toc-link">
Actualidad
<div class="vector-toc-text">Inicio</div>
</h2>
</a>
</li>
<li id="toc-Etimología"
class="vector-toc-list-item vector-toc-level-1">
<a class="vector-toc-link" href="#Etimología">
<div class="vector-toc-text">
<span class="vector-toc-numb">1</span>
<span>Etimología</span>
</div>
</a>
<ul id="toc-Etimología-sublist" class="vector-toc-list">
</ul>
</li>
<li id="toc-Características"
class="vector-toc-list-item vector-toc-level-1">
<a class="vector-toc-link" href="#Características">
<div class="vector-toc-text">
<span class="vector-toc-numb">2</span>
<span>Características</span>
</div>
</a>
<button aria-controls="toc-Características-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle">
<span class="vector-icon mw-ui-icon-wikimedia-expand"></span>
<span>Alternar subsección Características</span>
</button>
<ul id="toc-Características-sublist" class="vector-toc-list">
<li id="toc-Tamaño"
class="vector-toc-list-item vector-toc-level-2">
<a class="vector-toc-link" href="#Tamaño">
<div class="vector-toc-text">
<span class="vector-toc-numb">2.1</span>
<span>Tamaño</span>
</div>
</a>
<ul id="toc-Tamaño-sublist" class="vector-toc-list">
</ul>
</li>
</nowiki>
</nowiki>
|acc_barrera_explicacion=Esta página es accesible debido a que tiene un h1 principal y el resto son h2 que indican los distintos encabezados. Esta nomenclatura hace que los lectores de pantalla reconozcan los encabezados sin problema.
|acc_barrera_explicacion=Este ejemplo cumple con el criterio 1.3.1 porque el código HTML está organizado exactamente igual que como vemos la información en la pantalla:
 
Agrupación real: El código usa una etiqueta principal que envuelve absolutamente todos los apartados del índice. Esto le dice al navegador que todos esos enlaces forman un único menú conjunto, y no son piezas sueltas como pasaba en el ejemplo anterior.
 
Jerarquía lógica: Para las subsecciones (como "Peso" dentro de "Características"), Wikipedia mete la lista pequeña dentro de la grande. El código refleja que esos temas menores dependen del tema mayor.
}}
}}

Revisión actual - 09:08 20 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-D
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-D


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:
https://www.berkshirehathaway.com/

2.1.2. Código HTML:

<tr> <td valign="top" width="50%"> <ul> <li><a href="message.html">A Message from Warren E. Buffett</a></li> </ul> </td> <td valign="top" width="50%"> <ul> <li><a href="webfraud.pdf">Fraudulent Claims Regarding...</a></li> </ul> </td> </tr>



Explicación del problema detectado:
El problema es la fragmentación de la estructura. El criterio 1.3.1 exige que la estructura transmita la relación entre los elementos. En este código, en lugar de crear una lista con muchos elementos, se ha creado una tabla y dentro y se ha creado una lista nueva y separada para cada enlace individual. Para el ordenador, estos enlaces no tienen relación entre sí; son independientes. Es como si en una lista de la compra escribieras cada ingrediente en un papel distinto en lugar de todos en la misma hoja.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este error es muy molesto para las personas ciegas que usan lectores de pantalla:

Exceso de ruido: Al navegar, el lector anunciará constantemente el inicio y fin de lista para cada ítem. Escucharán: "Lista de 1 elemento: Mensaje de Warren. Fuera de lista. Lista de 1 elemento: Reclamaciones. Fuera de lista...".

Pérdida de visión global: El usuario nunca recibe la información de "Tienes 15 enlaces disponibles". No puede saber la longitud del contenido ni navegar eficientemente por el grupo.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://es.wikipedia.org/wiki/Felis_catus


2.2.2 Código HTML:

<ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Inicio</div> </a> </li> <li id="toc-Etimología" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Etimología"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Etimología</span> </div> </a> <ul id="toc-Etimología-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Características" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Características"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Características</span> </div> </a> <button aria-controls="toc-Características-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Alternar subsección Características</span> </button> <ul id="toc-Características-sublist" class="vector-toc-list"> <li id="toc-Tamaño" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Tamaño"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Tamaño</span> </div> </a> <ul id="toc-Tamaño-sublist" class="vector-toc-list"> </ul> </li>



Explicación de la solución aplicada:
Este ejemplo cumple con el criterio 1.3.1 porque el código HTML está organizado exactamente igual que como vemos la información en la pantalla:

Agrupación real: El código usa una etiqueta principal que envuelve absolutamente todos los apartados del índice. Esto le dice al navegador que todos esos enlaces forman un único menú conjunto, y no son piezas sueltas como pasaba en el ejemplo anterior.

Jerarquía lógica: Para las subsecciones (como "Peso" dentro de "Características"), Wikipedia mete la lista pequeña dentro de la grande. El código refleja que esos temas menores dependen del tema mayor.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA1.3.1-A-000&oldid=4063»