2526UPSA1.3.2.A
De WCAG Wiki
Edición de la página como formulario
1. Información básica
Id del criterio: 1.3.2 - Secuencia significativa (Nivel: A)
Título del subcriterio: 1.3.1-A
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.2_-_Secuencia_significativa_-_Nivel:_A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.w3.org/WAI/demos/bad/before/home.html
2.1.2. Código HTML:
<tbody>
</tbody>
<a href="home.html"><img src="./img/top_logo.gif" width="443px" height="86px" alt="Un punto rojo con una letra "C" blanca que simboliza la luna creciente y el sol. A este logotipo le sigue un banner negro que dice "CITYLIGHTS", el nombre de este portal en línea. Finalmente, el eslogan del portal, "Tu acceso a la ciudad", aparece escrito a mano en verde turquesa y ligeramente inclinado en el banner superior."></a>
<img src="./img/top_logo_next_end.gif" width="24px" height="86px">
<img src="./img/top_weather.gif" width="128px" height="86px">
<img src="./img/top_logo_next_start.gif" width="22px" height="86px">
<select onchange="location.href = this.value;">
<option selected="">MENÚ RÁPIDO ---->
</option><option value="../offsite.html">Radiodifusión
</option><option value="../offsite.html">Educación
</option><option value="../offsite.html">Electricidad
</option><option value="../offsite.html">Servicio de bomberos
</option><option value="../offsite.html">Servicio de gas
</option><option value="../offsite.html">Cuidado de la salud
</option><option value="../offsite.html">Servicio de policía
</option><option value="../offsite.html">Bibliotecas públicas
</option><option value="../offsite.html">Servicios sociales
</option><option value="../offsite.html">Vivienda social
</option><option value="../offsite.html">Telecomunicaciones
</option><option value="../offsite.html">Urbanismo
</option><option value="../offsite.html">Transporte
</option><option value="../offsite.html">Gestión de residuos
</option><option value="../offsite.html">Servicios de agua
</option></select>
<img src="./img/mark.gif" width="158px" height="7px">
<tbody>
</tbody>
Tráfico: Obras de construcción en la carretera principal
Hoy:
<script language="JavaScript">
var now = new Date();
var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C ";
document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
document.write(today);
</script> viernes 12 de diciembre de 2025, soleado, 23°C
<img src=".img/marker2_w.gif" width="78px" height="1px">
Explicación del problema detectado:
Esto hace que el contenido sea incoherente para las personas que utilizan lectores de pantalla. El asistente de voz leerá el primer párrafo de la columna izquierda e inmediatamente después el primer párrafo de la columna derecha, mezclando dos noticias diferentes y haciendo imposible comprender la información de forma lógica.
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/Accesibilidad_web
2.2.2 Código HTML:
Limitaciones
Las limitaciones en la accesibilidad de los sitios Web pueden ser:
- Visuales: En sus distintos grados, desde la baja visión a la ceguera total...
- Motrices: Dificultad o la imposibilidad de usar las manos...
- Auditivas: Sordera o deficiencias auditivas.
- Cognitivas: Dificultades de aprendizaje...
Explicación de la solución aplicada:
), seguido inmediatamente por el párrafo introductorio (
) y finalizando con la lista de elementos (
- ). Al no utilizarse posicionamientos CSS ni tablas de maquetación que alteren el orden visual respecto al orden del DOM, se garantiza que los lectores de pantalla narren la información en la secuencia correcta (Título > Introducción > Lista), preservando el sentido y la coherencia del contenido.
