Diferencia entre revisiones de «2526UPSA1.3.1-L»
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 7: | Línea 7: | ||
|noa_barrera_evidencia_img=2025 26 UPSA 1.3.1-L NOA.png | |noa_barrera_evidencia_img=2025 26 UPSA 1.3.1-L NOA.png | ||
|noa_barrera_evidencia_url=https://www.luciademedrano.es/ | |noa_barrera_evidencia_url=https://www.luciademedrano.es/ | ||
|noa_barrera_explicacion=La página emplea tablas HTML únicamente para organizar y ubicar visualmente el contenido de la misma. No obstante, estas tablas incluyen marcado semántico característico de las tablas de datos. Por ejemplo, emplean elementos | |noa_barrera_explicacion=La página emplea tablas HTML únicamente para organizar y ubicar visualmente el contenido de la misma. No obstante, estas tablas incluyen marcado semántico característico de las tablas de datos. Por ejemplo, emplean elementos 'th' y el atributo 'scope' para definir relaciones semánticas entre filas y columnas. | ||
Cuando se usa una tabla solamente para el diseño visual, la incorporación de este marcado semántico hace que las tecnologías de asistencia malinterpreten la estructura como una tabla de datos, aunque en realidad no haya una relación tabular entre los datos. Esto infringe el criterio 1.3.1-L, que dice que las tablas de maquetación no pueden usar atributos ni elementos de las tablas de datos. | Cuando se usa una tabla solamente para el diseño visual, la incorporación de este marcado semántico hace que las tecnologías de asistencia malinterpreten la estructura como una tabla de datos, aunque en realidad no haya una relación tabular entre los datos. Esto infringe el criterio 1.3.1-L, que dice que las tablas de maquetación no pueden usar atributos ni elementos de las tablas de datos. | ||
| Línea 15: | Línea 15: | ||
|acc_barrera_evidencia_img=2025 26 UPSA 1.3.1-L ACC.png | |acc_barrera_evidencia_img=2025 26 UPSA 1.3.1-L ACC.png | ||
|acc_barrera_evidencia_url=https://www.upsa.es/oferta-academica/grado-en-ingenieria-informatica | |acc_barrera_evidencia_url=https://www.upsa.es/oferta-academica/grado-en-ingenieria-informatica | ||
|acc_barrera_explicacion=La página organiza su contenido mediante el uso de métodos de maquetación | |acc_barrera_explicacion=La página organiza su contenido mediante el uso de métodos de maquetación basados en CSS, como por ejemplo filas, columnas y contenedores; evitando así la utilización de tablas HTML para propósitos estéticos. Por lo tanto, la organización de los contenidos se lleva a cabo a través de componentes semánticamente neutros (como listas, elementos de navegación y 'divs'), que no establecen relaciones tabulares entre los datos. | ||
}} | }} | ||
Revisión del 20:45 19 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-L
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.luciademedrano.es/
2.1.2. Código HTML:
Explicación del problema detectado:
La página emplea tablas HTML únicamente para organizar y ubicar visualmente el contenido de la misma. No obstante, estas tablas incluyen marcado semántico característico de las tablas de datos. Por ejemplo, emplean elementos 'th' y el atributo 'scope' para definir relaciones semánticas entre filas y columnas.
Cuando se usa una tabla solamente para el diseño visual, la incorporación de este marcado semántico hace que las tecnologías de asistencia malinterpreten la estructura como una tabla de datos, aunque en realidad no haya una relación tabular entre los datos. Esto infringe el criterio 1.3.1-L, que dice que las tablas de maquetación no pueden usar atributos ni elementos de las tablas de datos.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta principalmente a personas con discapacidad visual que utilizan lectores de pantalla, así como a personas con sordoceguera que acceden al contenido mediante tecnologías de asistencia.
La barrera generada consiste en una interpretación semántica incorrecta de la información, ya que el lector de pantalla anuncia la presencia de una tabla de datos e introduce navegación por filas y columnas que no representan información real.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.upsa.es/oferta-academica/grado-en-ingenieria-informatica
2.2.2 Código HTML:
Explicación de la solución aplicada:
La página organiza su contenido mediante el uso de métodos de maquetación basados en CSS, como por ejemplo filas, columnas y contenedores; evitando así la utilización de tablas HTML para propósitos estéticos. Por lo tanto, la organización de los contenidos se lleva a cabo a través de componentes semánticamente neutros (como listas, elementos de navegación y 'divs'), que no establecen relaciones tabulares entre los datos.
