2526UPSA1.1.1-F-000
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.1_Texto_Alternativo/1.1.1-F
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://es.wikipedia.org/wiki/Elecciones_generales_de_Espa%C3%B1a_de_2023
2.1.2. Código HTML:
<td colspan="12" style="text-align:center;">
<span typeof="mw:File">
<a href="//commons.wikimedia.org/..." class="mw-file-description" title="Elecciones generales de España de 2023">
<img
alt="Elecciones generales de España de 2023"
src="//upload.wikimedia.org/.../2023_Spanish_general_election_map.svg.png"
width="315" height="229"
class="mw-file-element"
>
</a>
</span>
<!-- AQUÍ FALTA EL ENLACE A LA DESCRIPCIÓN LARGA O ARIA-DESCRIBEDBY -->
</td>
Explicación del problema detectado:
El mapa electoral de Wikipedia es una imagen compleja que transmite información crítica (resultados por provincia mediante colores) únicamente de forma visual. El código utiliza un texto alternativo genérico (alt="Elecciones generales de España de 2023") que no describe los datos, y carece de una alternativa larga (como un enlace a una tabla o aria-describedby) que permita a las personas ciegas acceder a esa misma información detallada, incumpliendo así el criterio WCAG 1.1.1-F.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Los usuarios ciegos o con baja visión que utilizan lectores de pantalla sufren una pérdida total de información. Al llegar al mapa, solo escuchan el título general ("Elecciones..."), pero no pueden saber quién ha ganado en cada provincia ni por qué margen, datos que están disponibles exclusivamente para quienes pueden ver e interpretar los colores de la imagen. Esto los deja en desventaja informativa frente a los demás usuarios.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.highcharts.com/demo/highcharts/accessible-line
2.2.2 Código HTML:
<div id="container">
<!-- Gráfico visual (SVG) -->
<svg class="highcharts-root" ...> ... </svg>
<!-- Alternativa Larga (Solo visible para lectores de pantalla) -->
<div class="highcharts-screen-reader-region" role="region" aria-label="Tabla de datos del gráfico">
<table>
<caption>Datos de empleo anuales, 2010-2020</caption>
<thead>
<tr>
<th scope="col">Año</th>
<th scope="col">Instalación</th>
<th scope="col">Desarrollo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2010</th>
<td>43,934</td>
<td>52,484</td>
</tr>
<!-- ... resto de datos ... -->
</tbody>
</table>
</div>
</div>
Explicación de la solución aplicada:
La solución consiste en ofrecer una tabla de datos HTML oculta visualmente pero accesible para lectores de pantalla, justo al lado del gráfico visual.
