Diferencia entre revisiones de «2526UPSA1.3.1-A-000»
Página creada con «{{ActividadWCAG |id_criterio=1.3.1 - Información y relaciones (Nivel: A) |id_subcriterio=1.3.1-A |id_universidad=UPSA |curso_academico=2025-26 }}» |
Sin resumen de edición |
||
| (No se muestran 4 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- | |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-D | |||
|noa_barrera_evidencia_img=2025 26 UPSA 1.1.3-D NOA.png | |||
|noa_barrera_evidencia_url=https://www.berkshirehathaway.com/ | |||
|noa_barrera_evidencia_html=<nowiki> | |||
<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> | |||
</nowiki> | |||
|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=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. | |||
|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> | |||
<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> | |||
</nowiki> | |||
|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
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
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.
