Saltar navegación

Mejorar accesibilidad de la web del colegio con WAVE

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 29 de septiembre de 2023 por Jose Manuel P.

5 visualizaciones

Más información Transcripción

Descargar la transcripción

hola bueno con este vídeo el objetivo es dar unas pautas para empezar a ver cómo podemos mejorar la 00:00:01
accesibilidad de nuestra página web en el centro en el correo que te enviado hay una hay unas 00:00:09
pautas mínimas para que la web sea aún más accesible la página que tenéis es muy accesible 00:00:19
lo vamos a ver ahora utilizando una herramienta bueno pues podemos utilizar una herramienta que 00:00:29
puede ser una extensión de chrome está que se llama web edición tool que nos va a ayudar a 00:00:38
detectar aquellas cosas que podemos mejorar para que nuestra página sea más accesible añadimos 00:00:47
a chrome añadimos la extensión y está cargando y como vemos se ha quedado en una función dentro 00:00:53
de las extensiones del chrome vale se puede utilizar en otros navegadores también vale 00:01:03
pues vamos a poner que esté fija para verla en todo momento que está esta herramienta que la 00:01:10
verdad es muy útil nos vamos a la página del colegio y activamos este esta herramienta que 00:01:17
nos va a hacer un análisis de accesibilidad de nuestra página ya ha hecho el análisis está en 00:01:26
inglés pero bueno podemos aproximarnos con este menú no nos ve que aquí hay como hay 350 00:01:34
posibilidades de mejorar 00:01:43
que ahora lo vamos a ver en los detalles 00:01:46
contrastes 00:01:49
de color, es decir 00:01:50
si el contraste entre 00:01:52
la letra y el fondo 00:01:54
es lo suficientemente 00:01:57
clara 00:01:58
para sobre todo aquellas personas que tienen 00:02:00
dificultades visuales 00:02:02
aquí 00:02:04
aspectos que se pueden mejorar y 00:02:05
cosas que se han hecho bastante 00:02:08
bien 00:02:11
si ponemos detalles vamos a ver una cosa que se puede mejorar son añadir a las imágenes que se 00:02:11
van subiendo además de subirla a subir la imagen hay que poner el texto alternativo de tal forma 00:02:22
que cuando un lector de esta de esta página lea la lea la imagen lea el texto alternativo que 00:02:30
que hemos puesto es fácil porque la persona que sube estas imágenes existe esa posibilidad de 00:02:39
hacerlo y bueno pues este esta extensión pues nos ayuda a identificar si pulsamos aquí a ver 00:02:46
aquí aquí nos está nos está diciendo que esta imagen esta imagen le falta le falta el texto 00:02:54
es el texto alternativo vale mi imagen sin texto alternativo da como resultado un enlace vacío 00:03:07
aquí también esta imagen no está presente el texto alternativo no está presente y aquí podemos ir 00:03:13
identificando dónde podemos ir cambiando es decir aquí luego lo que le falta simplemente es el texto 00:03:25
alternativo, una imagen sin texto alternativo 00:03:34
da como resultado un enlace vacío 00:03:37
vale, esto en cuanto 00:03:39
a poner el texto alternativo 00:03:43
en las imágenes, o sea que una cosa que podemos 00:03:46
hacer es en todas las imágenes que subamos 00:03:49
pues acostumbrarnos a poner texto alternativo 00:03:51
luego otra cosa que podemos 00:03:54
hacer como 00:03:58
generales de contenido 00:04:00
es darnos cuenta en el contraste. 00:04:02
Aquí nos está diciendo, por ejemplo, 00:04:07
el contraste de estas palabras en blanco con el fondo. 00:04:09
Entonces, si pulsamos, nos está diciendo que... 00:04:12
A ver si es esta... 00:04:16
Esta es, esta es, vale. 00:04:23
Nos está diciendo que la letra es blanca 00:04:25
y el fondo, el fondo donde está el color de esa letra, es azul. 00:04:28
Entonces, la ratio de contraste es de 2,72. Y para que cumpla la normativa mínima, que es AA, hay como tres escalas, AA y AAAA. 00:04:35
Bueno, pues está diciendo que no está cumpliendo la normativa mínima para que una página sea accesible. 00:04:49
Entonces es elegir otro color en el que haya una diferencia de contraste adecuada para aquellas personas que tienen dificultades. 00:04:58
Creo que la ratio tiene que estar en 4,70 y tantos. 00:05:11
Bueno, vamos a ver, aquí lo podemos ver en referencia los errores de contraste, vamos a ver aquí, contraste, aquí, vale, pues aquí está diciendo que el contraste no tiene que ser por debajo de 4.5 00:05:16
Bueno, eso se puede hacer simplemente pues viendo que, por ejemplo, aquí el fondo es blanco y la letra es negra, entonces ir jugando. Vale, luego otra cosa que se puede mejorar de la página es el orden, vale, el orden. 00:05:44
Bueno, el orden, esto es importante porque hay personas que no utilizan el ratón, pueden utilizar, por ejemplo, la vista, entonces activan el hardware y entonces va el tabulador, va, como estoy pulsando yo el tabulador, va por orden. 00:06:09
entonces cuando los elementos están por orden es más accesible es mucho más accesible para ellos 00:06:35
entonces aquí por ejemplo del 1 pues tendría que ir al 2 y el 2 no sabemos dónde está a ver el link 00:06:44
el link de inicio el 3 es input luego otro aspecto para que la página sea accesible que se tiene en 00:06:51
cuenta es la jerarquía es decir que donde haya un título debajo pues esté el subtítulo título 00:07:06
subtítulo lo que aquí marca de h1 y h1 pues es los encabeza en los encabezados entonces aquí 00:07:15
en la estructura nos está indicando dónde están los encabezados y qué posibles errores puede 00:07:24
puede haber bueno esto es un error típico cuando se hacen las páginas en aulas virtuales que como 00:07:31
vemos aquí hay un encabezado de juego de protección de datos y abajo existe la posibilidad de poner un 00:07:38
subtítulo entonces está detectando que aquí no se ha puesto yo también cuando hago las páginas 00:07:46
web aquí yo nunca he puesto nada pero existe la posibilidad de ponerlo entonces el sistema 00:07:53
estar detectando que ahí debería ir una especie de subtítulos por debajo de este h1 entonces bueno 00:07:59
como está estructurada las páginas web están bien estructuradas encabezado y aquí detecta que aquí 00:08:07
podría ir una otro una una jerarquía menor por debajo de este título puede venir otro o sea que 00:08:16
aquí como vemos no hace falta no hace falta cambiar nada porque mira por 00:08:25
ejemplo aquí efectivamente aquí lo que está detectando que hay un encabezado de 00:08:33
primer nivel es decir un título de este cuadradito pero que no tiene título 00:08:39
entonces la persona que ha subido este elemento 00:08:46
Pues ha utilizado este subtítulo 00:08:50
Lo que está detectando es eso 00:08:54
Entonces, ¿esto para qué es importante? 00:08:58
Pues cuando hay un lector de voz 00:09:00
Se ordena, es capaz de leer mejor 00:09:02
Si se respetan los títulos y los subtítulos 00:09:09
Lo que está por la jerarquía del texto 00:09:14
Vale, entonces aquí podemos ver la jerarquía título, aquí vendría un subtítulo y luego aquí el parámetro. Vale, pues como veis, utilizando esta herramienta Wave, se puede ver cosas que se pueden mejorar. 00:09:19
Entonces, dos aspectos, poner título alternativo a las imágenes, el contraste y luego el contraste, es decir, donde estén estos puntitos, pues nos van indicando, bueno, pues esta habría que cambiar el contraste, utilizar dos colores de fondo diferente. 00:09:37
aquí vamos a ir uno a uno 00:10:08
vamos a ver este 00:10:10
aquí ya lo tenemos 00:10:12
vamos a ir al siguiente 00:10:15
aquí 00:10:16
aquí bueno pues 00:10:19
según parece 00:10:20
el contraste es muy bajo 00:10:22
el contraste, aunque prácticamente ya 00:10:24
pero es muy bajo el contraste del azul con el rojo 00:10:26
en este rojo según parece 00:10:29
porque falla 00:10:30
falla que no llega 00:10:32
al 4 que hemos visto antes 00:10:34
Aquí lo que avisa es que los enlaces van a la misma URL, no es un error. 00:10:37
Idioma/s:
es
Autor/es:
JOSE MANUEL PADILLA
Subido por:
Jose Manuel P.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
5
Fecha:
29 de septiembre de 2023 - 16:15
Visibilidad:
Clave
Centro:
EST ADMI D.G. DE BILINGÜISMO Y CALIDAD DE LA ENSEÑANZA
Duración:
12′ 17″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
144.19 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid