1 00:00:01,260 --> 00:00:09,900 hola bueno con este vídeo el objetivo es dar unas pautas para empezar a ver cómo podemos mejorar la 2 00:00:09,900 --> 00:00:19,019 accesibilidad de nuestra página web en el centro en el correo que te enviado hay una hay unas 3 00:00:19,019 --> 00:00:29,460 pautas mínimas para que la web sea aún más accesible la página que tenéis es muy accesible 4 00:00:29,460 --> 00:00:38,899 lo vamos a ver ahora utilizando una herramienta bueno pues podemos utilizar una herramienta que 5 00:00:38,899 --> 00:00:47,000 puede ser una extensión de chrome está que se llama web edición tool que nos va a ayudar a 6 00:00:47,000 --> 00:00:53,079 detectar aquellas cosas que podemos mejorar para que nuestra página sea más accesible añadimos 7 00:00:53,079 --> 00:01:03,579 a chrome añadimos la extensión y está cargando y como vemos se ha quedado en una función dentro 8 00:01:03,579 --> 00:01:10,239 de las extensiones del chrome vale se puede utilizar en otros navegadores también vale 9 00:01:10,239 --> 00:01:17,959 pues vamos a poner que esté fija para verla en todo momento que está esta herramienta que la 10 00:01:17,959 --> 00:01:26,340 verdad es muy útil nos vamos a la página del colegio y activamos este esta herramienta que 11 00:01:26,340 --> 00:01:34,099 nos va a hacer un análisis de accesibilidad de nuestra página ya ha hecho el análisis está en 12 00:01:34,099 --> 00:01:43,819 inglés pero bueno podemos aproximarnos con este menú no nos ve que aquí hay como hay 350 13 00:01:43,819 --> 00:01:46,400 posibilidades de mejorar 14 00:01:46,400 --> 00:01:49,060 que ahora lo vamos a ver en los detalles 15 00:01:49,060 --> 00:01:50,840 contrastes 16 00:01:50,840 --> 00:01:52,500 de color, es decir 17 00:01:52,500 --> 00:01:54,959 si el contraste entre 18 00:01:54,959 --> 00:01:57,180 la letra y el fondo 19 00:01:57,180 --> 00:01:58,980 es lo suficientemente 20 00:01:58,980 --> 00:02:00,519 clara 21 00:02:00,519 --> 00:02:02,959 para sobre todo aquellas personas que tienen 22 00:02:02,959 --> 00:02:04,780 dificultades visuales 23 00:02:04,780 --> 00:02:05,579 aquí 24 00:02:05,579 --> 00:02:08,680 aspectos que se pueden mejorar y 25 00:02:08,680 --> 00:02:11,000 cosas que se han hecho bastante 26 00:02:11,000 --> 00:02:11,939 bien 27 00:02:11,939 --> 00:02:22,620 si ponemos detalles vamos a ver una cosa que se puede mejorar son añadir a las imágenes que se 28 00:02:22,620 --> 00:02:30,240 van subiendo además de subirla a subir la imagen hay que poner el texto alternativo de tal forma 29 00:02:30,240 --> 00:02:39,659 que cuando un lector de esta de esta página lea la lea la imagen lea el texto alternativo que 30 00:02:39,659 --> 00:02:46,159 que hemos puesto es fácil porque la persona que sube estas imágenes existe esa posibilidad de 31 00:02:46,159 --> 00:02:54,460 hacerlo y bueno pues este esta extensión pues nos ayuda a identificar si pulsamos aquí a ver 32 00:02:54,460 --> 00:03:07,780 aquí aquí nos está nos está diciendo que esta imagen esta imagen le falta le falta el texto 33 00:03:07,780 --> 00:03:13,960 es el texto alternativo vale mi imagen sin texto alternativo da como resultado un enlace vacío 34 00:03:13,960 --> 00:03:25,379 aquí también esta imagen no está presente el texto alternativo no está presente y aquí podemos ir 35 00:03:25,379 --> 00:03:34,080 identificando dónde podemos ir cambiando es decir aquí luego lo que le falta simplemente es el texto 36 00:03:34,080 --> 00:03:37,060 alternativo, una imagen sin texto alternativo 37 00:03:37,060 --> 00:03:39,280 da como resultado un enlace vacío 38 00:03:39,280 --> 00:03:43,259 vale, esto en cuanto 39 00:03:43,259 --> 00:03:46,080 a poner el texto alternativo 40 00:03:46,080 --> 00:03:49,080 en las imágenes, o sea que una cosa que podemos 41 00:03:49,080 --> 00:03:51,800 hacer es en todas las imágenes que subamos 42 00:03:51,800 --> 00:03:54,819 pues acostumbrarnos a poner texto alternativo 43 00:03:54,819 --> 00:03:58,120 luego otra cosa que podemos 44 00:03:58,120 --> 00:04:00,699 hacer como 45 00:04:00,699 --> 00:04:02,759 generales de contenido 46 00:04:02,759 --> 00:04:06,900 es darnos cuenta en el contraste. 47 00:04:07,000 --> 00:04:08,580 Aquí nos está diciendo, por ejemplo, 48 00:04:09,439 --> 00:04:12,960 el contraste de estas palabras en blanco con el fondo. 49 00:04:12,960 --> 00:04:16,959 Entonces, si pulsamos, nos está diciendo que... 50 00:04:16,959 --> 00:04:23,420 A ver si es esta... 51 00:04:23,420 --> 00:04:24,600 Esta es, esta es, vale. 52 00:04:25,139 --> 00:04:28,339 Nos está diciendo que la letra es blanca 53 00:04:28,339 --> 00:04:34,699 y el fondo, el fondo donde está el color de esa letra, es azul. 54 00:04:35,040 --> 00:04:49,300 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. 55 00:04:49,300 --> 00:04:58,180 Bueno, pues está diciendo que no está cumpliendo la normativa mínima para que una página sea accesible. 56 00:04:58,639 --> 00:05:10,500 Entonces es elegir otro color en el que haya una diferencia de contraste adecuada para aquellas personas que tienen dificultades. 57 00:05:11,660 --> 00:05:16,540 Creo que la ratio tiene que estar en 4,70 y tantos. 58 00:05:16,540 --> 00:05:44,699 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 59 00:05:44,699 --> 00:06:09,319 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. 60 00:06:09,319 --> 00:06:35,600 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. 61 00:06:35,600 --> 00:06:44,120 entonces cuando los elementos están por orden es más accesible es mucho más accesible para ellos 62 00:06:44,120 --> 00:06:51,500 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 63 00:06:51,500 --> 00:07:06,149 el link de inicio el 3 es input luego otro aspecto para que la página sea accesible que se tiene en 64 00:07:06,149 --> 00:07:15,829 cuenta es la jerarquía es decir que donde haya un título debajo pues esté el subtítulo título 65 00:07:15,829 --> 00:07:24,569 subtítulo lo que aquí marca de h1 y h1 pues es los encabeza en los encabezados entonces aquí 66 00:07:24,569 --> 00:07:31,050 en la estructura nos está indicando dónde están los encabezados y qué posibles errores puede 67 00:07:31,050 --> 00:07:38,850 puede haber bueno esto es un error típico cuando se hacen las páginas en aulas virtuales que como 68 00:07:38,850 --> 00:07:46,430 vemos aquí hay un encabezado de juego de protección de datos y abajo existe la posibilidad de poner un 69 00:07:46,430 --> 00:07:53,610 subtítulo entonces está detectando que aquí no se ha puesto yo también cuando hago las páginas 70 00:07:53,610 --> 00:07:59,410 web aquí yo nunca he puesto nada pero existe la posibilidad de ponerlo entonces el sistema 71 00:07:59,410 --> 00:08:07,910 estar detectando que ahí debería ir una especie de subtítulos por debajo de este h1 entonces bueno 72 00:08:07,910 --> 00:08:16,290 como está estructurada las páginas web están bien estructuradas encabezado y aquí detecta que aquí 73 00:08:16,290 --> 00:08:25,509 podría ir una otro una una jerarquía menor por debajo de este título puede venir otro o sea que 74 00:08:25,509 --> 00:08:33,070 aquí como vemos no hace falta no hace falta cambiar nada porque mira por 75 00:08:33,070 --> 00:08:39,730 ejemplo aquí efectivamente aquí lo que está detectando que hay un encabezado de 76 00:08:39,730 --> 00:08:46,269 primer nivel es decir un título de este cuadradito pero que no tiene título 77 00:08:46,269 --> 00:08:50,090 entonces la persona que ha subido este elemento 78 00:08:50,090 --> 00:08:54,029 Pues ha utilizado este subtítulo 79 00:08:54,029 --> 00:08:58,169 Lo que está detectando es eso 80 00:08:58,169 --> 00:09:00,269 Entonces, ¿esto para qué es importante? 81 00:09:00,269 --> 00:09:02,889 Pues cuando hay un lector de voz 82 00:09:02,889 --> 00:09:09,610 Se ordena, es capaz de leer mejor 83 00:09:09,610 --> 00:09:14,110 Si se respetan los títulos y los subtítulos 84 00:09:14,110 --> 00:09:19,970 Lo que está por la jerarquía del texto 85 00:09:19,970 --> 00:09:37,809 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. 86 00:09:37,809 --> 00:10:08,279 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. 87 00:10:08,279 --> 00:10:10,679 aquí vamos a ir uno a uno 88 00:10:10,679 --> 00:10:12,639 vamos a ver este 89 00:10:12,639 --> 00:10:15,100 aquí ya lo tenemos 90 00:10:15,100 --> 00:10:16,580 vamos a ir al siguiente 91 00:10:16,580 --> 00:10:19,159 aquí 92 00:10:19,159 --> 00:10:20,600 aquí bueno pues 93 00:10:20,600 --> 00:10:22,100 según parece 94 00:10:22,100 --> 00:10:24,940 el contraste es muy bajo 95 00:10:24,940 --> 00:10:26,899 el contraste, aunque prácticamente ya 96 00:10:26,899 --> 00:10:29,039 pero es muy bajo el contraste del azul con el rojo 97 00:10:29,039 --> 00:10:30,580 en este rojo según parece 98 00:10:30,580 --> 00:10:32,340 porque falla 99 00:10:32,340 --> 00:10:34,419 falla que no llega 100 00:10:34,419 --> 00:10:37,220 al 4 que hemos visto antes 101 00:10:37,220 --> 00:10:51,720 Aquí lo que avisa es que los enlaces van a la misma URL, no es un error.