 Bueno, yo quiero empezar. Tengo una pregunta para Ana. Ahora no me va a poder contestar, pero Ana, ¿eso del contraste no es eso de los colores? Es que a mí me suena de otra cosa, pero bueno, después lo hablamos tú y yo. Bueno, hablemos de accesibilidad. ¿Hacéis vuestras webs accesibles? Manitas arriba, por favor. ¿Alguien sabe lo que es la accesibilidad? ¿Manitas arriba? Vale, porque no tengo tiempo y no lo puedo explicar. Hablemos de esto. Normalmente lo que me preguntan en sesiones de consultoría es por dónde empiezo. Hay tantas cosas que no sé por dónde empezar y la respuesta típica es por el principio. Pero si hablamos de accesibilidad, la respuesta real es por los principios. ¿Qué principios? Los principios PUR, P, O, U, R. ¿Y de dónde vienen estas siglas? De otras siglas, W, C, A, G, que son las Web Content Accessibility Guidelines, que son un conjunto de buenas prácticas de cómo aplicar las tecnologías de programación para desarrollo web para que el resultado sea el contenido, el interfaz sea accesible a las personas que necesiten consumir nuestro contenido de otras formas alternativas. En estas guías tenemos cuatro principios, perceptible, operable, comprensible y robusto. Perceptible. La web no puede ser invisible para todos los sentidos. Si una persona no puede ver, tiene que poder escuchar el contenido. Si una persona no puede escuchar, va a tener que poder ver el contenido. Y si una persona no puede ver ni escuchar, va a tener que poder tocar el contenido. ¿Cómo gestiona eso cada persona? No es vuestro problema ni os interesa. Si respetáis los estándares, ellos sabrán cómo hacerlo. Una vez tú eres capaz de percibir ese contenido y esa interfaz gráfica va a tener que poder operar con ella. No podemos diseñar experiencias en las que el nivel mínimo para operar con ella se esté por encima de la capacidad de los usuarios. Las pantallas de los móviles reconocen hoy en día diez puntos de toque. ¿Conoceis alguna aplicación que requiera que uséis los diez dedos a la vez? Lo mismo, lo que pasa es que en general tenemos unos estándares de operatividad de los usuarios que realmente pueden estar por encima de un porcentaje significativo de la población. El tercer punto es que una vez tú puedes ver el contenido, interactuar con el contenido va a tener que poder entender ese contenido y cómo se interactúa con él. No se pueden hacer formularios locos sin instrucciones, sin dar un feedback que no siempre se va a poder rellenar. Y ya una vez que estos tres puntos se han cumplido, el robusto, lo que significa es que no me vengáis con la historia de que esta web funciona mejor en Internet Explorer. Esta web tiene que funcionar en cualquier dispositivo y en cualquier navegador que se ajuste a los estándares. Versiones de la WWFG hay un montón. La 2.2 salió hace dos semanas y ya se está trabajando en la 3.0, pero si tenéis que informaros centraos en la rama 2 que es retrocompatible. En la versión 2.1 tenemos diferentes criterios de accesibilidad clasificados en tres niveles. La son aquellos criterios más básicos, más necesarios y el nivel AAA son aquellos criterios que son deseables y que a lo mejor pueden ser demasiado complejos de integrar y conseguir que una web cumpla con todos los niveles a la vez. Entonces, están clasificados en este nivel de prioridad. Los niveles AAA, si no lo he contado mal, son 50 criterios y si le añadí los 28, 78 criterios y podríamos conseguir una web bastante accesible con eso y no se ha vendido la moto, ¿verdad? No vais a hacer eso, cumplir todo eso a la primera. Entonces, en serio, ¿por dónde empiezo? Pues esto es como un coche. Si el coche está parado y quieres que vaya 100 km por hora, tendrás que acelerar y el coche irá incrementando su velocidad poco a poco con la accesibilidad, igual que con cualquier cosa. Empezamos poco a poco y cada vez vamos a más, a más, a más hasta llegar a lo que queremos. Así que realmente depende, depende de vuestro nivel tecnológico, depende del tiempo que tengáis disponible, por supuesto, del tipo de contenidos, etcétera. Si tenéis obligación legal, lo siento mucho, pero hay que cumplir con la norma UNN 301.549, que en su apartado web apunta a WCAG 2.1, niveles AAA. Y si venís aquí porque sois agentes digitalizadores, lo siento, pero esta charla no es para ti, lo siento misiela, pero te doy dos consejos. Number one, ni plugins, ni overlays, ni validadores automáticos van a lograr que la web cumpla, si no le pones esfuerzo. No te dejes engañar, no te autongañes. Y consejo número dos, si usas WordPress, usa un tema accessibility ready y esto nos sirve a todos. Añadir temas, desplegas por aquí las características y la primera es listo para accesibilidad. Ese tema se ha revisado para asegurarnos que a nivel de código cumple con los estándares de programación. ¿Significa que la web va a ser accesible? No, porque después, cuando empiezas a meter contenido, puedes meter la pata. Pero a nivel de código, a mí me da más tranquilidad como un buen punto de partida. Así que realmente depende de vosotros que una web sea accesible. Márcate un objetivo. Lo ideal podría ser WCAG, la versión más nueva y pruebas de usabilidad con usuarios reales. Eso probablemente está fuera del alcance de muchos de vosotros. Podríamos pensar en WCAG 2.2, nivel A, o algo más sencillo y más modesto, algunos criterios sueltos, si no tenéis obligación. Y eso es tu idea de web mínimamente accesible. Tú define de un estándar que quieres cumplir y que ahora mismo no estás cumpliendo. Si puedes cumplir tres criterios, amplíalo a 4 o 5 más y poquito a poquito vais escalando y tenéis que hacer todo lo que podáis para cumplir con eso. Así vas cogiendo práctica y vas aprendiendo y mejorando. ¿En qué me fijo yo? Perdón, voy a mostraros en qué me fijo yo cuando miro por encima una página web para hacerme una idea de por dónde van los tiros. Lo primero, que el código no tiene errores, porque una web es accesible si cumple los estándares de programación HTML y después las buenas prácticas aplicadas a esa estándar HTML. Entonces, tenemos un validador de la UW3C que le metéis ahí en la cajita la URL y os salta un informe con todos los errores. ¿Tiene que estar todos perfectamente bien? Pues probablemente no. Fijaos sobre todo que no hayan ides duplicadas. Si hay menos errores hayan, mejor. Más calidad tiene esa página web. Lo segundo que me fijo es que sea responsive. Porque el contenido tiene que adaptarse al tamaño de la ventana o al zoom y sé que estáis mirando la UW, pero es que la RAE lo recoge así. Entonces, pues bueno, ya que he permitido responsive pues zoom en que sea normativo. Hace zoom al 200%. Y después, si puede ser, probad también con el 500%. Y después, simulad un dispositivo de 320 x 256 píxeles. ¿En qué hay que fijarse en que no pase esto? Que bloques de texto se superpongan, que haya texto que desaparece o que aparece en barros de scroll en vertical y en horizontal simultáneamente. El scroll en una dirección y se puede ser en vertical. Y a ver, un ejemplito con la página de la Workup. 200%. Parece que no ha desaparecido nada. Bajamos, bajamos. Vemos que todo se está reajustando. El espacio está disponible. Bien, ¿no? Y aquí, ¿cómo simulamos un dispositivo de 320 x 256? Pues desde las herramientas de desarrollador nos vamos a simular dispositivo. Podemos elegir dispositivos ya preconfigurados o agregar un dispositivo en la lista. Yo agrego uno, le pongo un nombre y defino el tamaño, la resolución en píxeles que tiene que tener ese dispositivo. Y, voilà, ya tengo mi dispositivo. Y tengo que comprobar la hueva así. Un poquito más grande. Pues bueno, ahí aparece una pequeña barra porque la p se va, pero no me parece que se agrave. El resto de la web se ha adaptado. ¿Es muy difícil lograr eso? No, si usáis un tema que esté preparado. Ya que estamos en esta parte, aprovecha también para visualizar la web en un formato vertical y aquí arriba a la derecha hay un botoncito que permite rotar el dispositivo. La web se tiene que adaptar a la orientación. No tiene que imponer la orientación del dispositivo. Vosotros podéis girar el dispositivo, pero Stephen Hawking no podía girar su dispositivo. Maldita la gracia que te obliguen a consumirlo en vertical si tú lo tienes colocado en horizontal. Gerard queda encabezados. Eso es lo tercero en lo que me fijo. Todo el mundo sabéis, en teoría, cómo es lo de los encabezados y, entonces, ¿por qué se sigue haciendo mal? Vamos a ver. Make WordPress. Que mal se ve. Esto se ve a mejor en mis capturas. No se puede leer, pero os lo digo yo. Make WordPress encabezado de nivel 2. Este párrafo de aquí encabezado de nivel 1. Ya vamos mal. Y aquí uno encabezado de nivel 5. Peor. Y a partir de aquí, son encabezados de nivel 2. Para mí, lo lógico sería que esto, que es el contenido principal, la idea principal que hay en esa página sea un H1. Y esto de aquí podríamos discutir si tiene que ser un encabezado, pero yo le pondría como párrafo. Lo siguiente, sin lugar a dudas, es un párrafo. Aquí un H2, me parece bien. Y cada uno de los equipos, si esto es un H2, que nos marque una sección diferente de la página web, pues tendría que ser un H3. Porque es un encabezado que está subordinado al que haya aquí arriba. No veo adecuado que sean del mismo nivel. Pero hay algunos matices que son discutibles. Esta es la extensión que uso para que aparezca esto. Hay muchísimas extensiones, podéis usar la herramienta que más os interesa. Yo os muestro las que yo uso en mi día a día. Imágenes. Todas las imágenes que se insertan a través de HTML deben de tener un atributo alto. Y ahí WordPress hace muy bien porque automáticamente te mete un atributo alto vacío. Y así no da error en ningún validador automático. Tenéis en esta dirección, que os compartirá la presentación, un árbol de decisión de la WW3C que os orienta a qué tipo de información tiene que tener ese atributo alternativo. Pero a modo de resumen, si la imagen es decorativa, el alt tiene que ir vacío. De esa forma, las personas ciegas usan un software que se llama lector de pantalla y no recibirán información de que ahí hay una imagen y no me han escrito nada. Porque es la forma estándar de asumir que esa imagen es decorativa. Si es funcional, el típico icono de lupa en un botón. No vais a describir. Es una lupa, tiene un reflejo. ¿Sumangos de color rojo qué tal? No. Ahí hay que poner lo que va a pasar cuando hagas clic. Buscar. Y si la imagen forma parte del contenido, pues se hace una descripción breve, la longitud, un SMS o un tweet. No mucho más. Si necesitáis una extensión más grande, hay que buscar otras alternativas para meter una descripción larga. Y a ver, pues esto no se ve. Pero bueno, repasemos un poquito las imágenes que hay en la página de WordPress. Esta de aquí, aquí con la herramienta que os diré después, veo que la alta está vacía. Es una imagen decorativa. Hay que vas a describir nada. Porque esa imagen está ahí para que la web sea atractiva para nosotros. En cambio, esta imagen, sí que se ha considerado que forma parte del contenido y tiene una descripción que, como os he dicho, no es muy larga. Los logos, pues te dice la compañía, que es información, porque estos son imágenes de texto, no es texto real. Y la foto de familia, hay una descripción que Nilo está por ahí. No, no está. Esta foto la hizo Nilo. Me gustaría saber si le parece bien ese texto alternativo. Bueno, uso esta extension. WebDeveloperTulbar, que sirve para muchas cosas y lo podéis utilizar para comprobar otros aspectos a nivel de accesibilidad. Texto. La norma, si no recuerdo mal, es de nivel AAA. Te pide que el texto esté alineado en el sentido de escritura. Porque para que la lectura sea cómoda y fácil, es más conveniente tener una referencia distante que esto de aquí. El cerebro tiene que calcular dónde tiene que mover el ojo. Hay personas que no coordinan bien los movimientos oculares, entonces te hacen un sacádico hipermétrico o hipométrico y se pierden con la lectura. Un papiro. Año 1100 a.C. El sentido de lectura de derecha y izquierda. Y sorpresa los bloques de texto están alineados a la derecha en el sentido de lectura. Si lo hacían bien los ojicios, porque no lo tenemos que hacer bien nosotros, deja de reinventar la rueda que no sirve. Contraste. Eso de los colores. ¿Cuánto daño que ha hecho Pocahontas? ¿Y colores en el viento descubrir? Pues según un estudio de webaim.org es el error más frecuente en el top un millón de sitios de internet. Y los porcentajes oscilan entre el 85 y casi el 84% desde el año 2019. Eso la gente también tengo idea, tengo idea, pero no lo hacemos bien. Por algo será. Es tan fácil como os vais a una calculadora metéis los dos colores os sale un numerito que no tenéis que saber interpretar porque bajo casi todas las calculadoras te dicen para qué usos bueno, esa combinación de colores. El rojo ciruela del tema de la workam es adecuado para texto y para la interfaz gráfica. En cambio, este naranjita no es adecuado para nada con el fondo blanco. Y haciendo la charla descubrí que Firefox ahora ya calcula bastante bien el contraste cuando hay un degradado de color. Antes eso no funcionaba y lo tenías que calcular a manos. Ahora es bastante bien. No está mal. Enlaces. Pinchá aquí. ¿Cuál es el enlace? Pinchá o aquí. ¿Qué necesitáis para saber cuál de los dos es el enlace? Más contexto. Si comparáis el color del texto y el texto que lo rodea es de color rojo, pues entonces el enlace será aquí, suponemos, pero podría ser al revés. Necesitamos contexto y el texto de los enlaces necesita que sea descriptivo para no tirar mano de ese contexto. Más información en este enlace. Eso no es sutil. Las personas que usan lector de pantalla pueden sacar una lista de todos los enlaces fuera de contexto y decidir cuál les interesa. Si escuchan este enlace hacer clic, saber más, no saben qué es lo que va a pasar. En cambio, si le ponéis manual de uso de la tostadora, queda meridianamente claro lo que va a pasar. Y si además es manual de uso de la tostadora, pdf4m no hay posibilidad de error. Sabe lo que va a pasar cuando haga clic. Y además es que se tiene que identificar a golpetista. Esto no lo dice directamente, pero en los ejemplos técnicos de cosas que pasan bien y cosas que son errores se sobreentiende que si está subrayado es mejor. Y además es que es la convención básica del HTML y los enlaces van subrayados. Aquí detectáis el enlace que está aquí abajo principalmente porque hay un subrayado. También hay un cambio de color, pero si solamente basáis la identificación de los enlaces rodeados de texto en un cambio de color muy buena suerte porque tenéis que contrastar los tres colores a la vez y no es tan fácil como parece. Y vale. Yo uso una extensión que me resalta los enlaces porque hay veces que están tan mal contrastados y tan disimulados que no los puedes ver. Entonces tienes que echar mano a herramientas como esta que creo que se diseñó para SEO o algo así. Podéis usar la que queráis, la que mejor os venga. Y por último navegación por teclado porque no todas las personas navegan con un rato. Hay personas que solamente por el motivo que sea pueden simular los pulsaciones de teclado o tres o las que sean y tienen que navegar por teclado. Entonces un tutorial súper rápido. Tabulador Palante Shift Tabulador Patras Intro Escape Escapar de que esa maravillosa ventana modal para que se suscriban a vuestra newsletter que a lo mejor al usuario no le interesa para nada. Y qué tenéis que ver cuando navegáis por teclado. Primero si podéis ver el foco del teclado que nos indica sobre qué elemento se va a ejecutar la acción cuando pulsemos la tecla. Segundo si ha aparecido el enlace de salto. Es un enlace que está oculto y en el momento en que recibe el foco del teclado aparece y permite saltar al contenido principal generalmente y saltarnos la navegación. Porque en un sitio web grande sobreentiende que el menú de navegación va a ser repetitivo y va a ser siempre el mismo. Entonces si una persona quiere ir directamente al contenido principal porque ya sabe de sobra lo que hay en el menú de navegación de la Wikipedia tiene que usar un enlace de salto. Lo tercero que tenéis que comprobar es que podáis recorrer toda la página de arriba abajo. Lo cuarto que el orden de foco del teclado sea lógico que los elementos vayan sucediéndose en el orden y lo estáis viendo en el diseño porque si no eso se convierte en un juego de ahora estoy aquí, ahora estoy aquí, después salto aquí. Que podáis hacer las mismas acciones que con el teclado. Si hay un formulario para comprar una entrada que se pueda comprar la entrada sin usar el ratón. El otro día yo fui a otro evento de otra comunidad y intenté comprar la entrada por teclado y no pude. Pues a lo mejor se quedó gente que navegaba por teclado sin poder acceder al evento por esa tontería. Y lo último es que no haya ninguna trampa para el foco del ratón. Una trampa para el foco del teclado, perdón es un elemento por ejemplo la típica ventana modal en la que tú puedes entrar pero no puedes salir. Porque por mucho que le des a la tecla escape no se cierra, tienes que usar el ratón para pulsar sobre esa X malpuesta y poder seguir navegando. No toda la gente va a poder hacerlo. Aquí tenéis un ejemplo que no lo vais a ver muy bien pero un golpe este V sí que se verá bien de lo que es, esto es el skip link y esto azulito, se borde azulito es el foco del teclado. Se puede ir recorriendo toda la página hay ocasiones en las que no contrasta pero bueno yo pude ir desplegando los menús y ahí, ni tan mal se mejora el contraste y ya está. Hay una herramienta que nos permite ver cuál ha sido ese recorrido para valorar la coherencia respecto al diseño si lo veis un poquito más grande incluso te dice el numerito 1, 2, 3, 4, 5 veis un patrón en zigzag que es el típico que hacemos cuando estamos leyendo por tanto para mí es coherente esto que parece tan evidente hay sitios que no lo cumplen me llama la atención porque justamente la acción que puede consultar esto se beneficiaría de estas cuestiones por el rango de edad el primer elemento que coge el foco está aquí abajo el segundo aquí arriba va en orden contrario al orden de lectura cuando llega aquí, esto está bien y cuando llega aquí ya empieza a hacer algunas cosillas raras es una extensión de Microsoft que os permite registrar eso a los clientes o a la persona que está haciendo parte del diseño y eso es todo os parece poco 8 cosas pero que llevan trabajo si no está bien haciendo ninguna con que hagáis una yo ya estoy contento mi web es accesible no pero ya será un poquito más accesible de lo que era recordad que piano piano se arriba a lontano y muchas gracias