 Elementor y la accesibilidad. ¿Enemigos? ¿Qué decís? Sí, no. ¿Cuántos usuarios de Elementor tenemos aquí? Vale, unos cuantos, unos cuantos. Bueno, vamos allá, a ver qué pasa. José Humánies, por desgracia no ha podido venir, está recuperándose, pero bueno, como él es parte de esta charla, aquí le hago el reconocimiento, es accesibilizadorenpassionapunto.com y le podéis encontrar en su página web, www.joosehumánies.com, en su otra página web, soy Batman.lol, existe. Y en Twitter como es 2.0. Yo soy Visayan Sanchez, sin nene en el nombre, sin tilde en la I, en el apellido, o sea que Leo lo ha hecho fenomenal, gracias. No, lo has hecho bien, lo has hecho bien. Y bueno, soy consultor de accesibilidad, freelance, y me podéis encontrar en mi página web, www.visayansanchez.com, en mi comunidad de accesibilidad digital, www.accesihub.es, o en Twitter como arrobavisanju. Soy embajador de Rayola Networks, aquí les doy las gracias y el apoyo para poder venir a daros esta charla. Y bueno, pues como ya os hemos avanzado, José y yo nos conocemos porque somos el equipo AA, un canal de YouTube que no podcast, porque yo le llamo Compi Podcast, sobre accesibilidad digital y diversas vacaciones. Claro, que no haya venido José es un hándica, porque él es el gracioso, o lo siento mucho por ustedes. He tenido que reformular la charla, está en mi ordenador y son 112 diapos sobre accesibilidad. Así que, let's go. Bueno, hablemos un poquito. Internet es un mecanismo de comunicación a nivel global. Gracias Internet, podemos comunicarnos, podemos trabajar, podemos aprender, podemos entretenernos. Y el servicio más popular de Internet es la web. ¿Qué pasaría si mañana desaparece la web de vuestras vidas? Para mí sería un drama. Pues es que hay personas que les ocurre eso, incluso hay personas que nunca pueden llegar a utilizar Internet. Porque en el mundo una de cada seis personas sufre una discapacidad importante que les limita la vida de alguna forma, que les impide interactuar con los dispositivos electrónicos de la misma forma que interactuamos el resto. De hecho, para el creador de la web, el poder de la web está en su universalidad. El acceso de todo el mundo con independencia de su discapacidad es un aspecto esencial. Una herramienta tan potente, tan poderosa que realmente es algo digital, que es transformable, no tiene sentido que excluya a ningún colectivo. Yo cuando estaba preparando esto me quedé mirando y dije, haber un planeta, un fondo blanco, a mí me suena de algo. Si le añado unas estrellitas, a lo mejor a alguien también le suena de algo. No sé. Y si os digo que lo esencial es invisible a los ojos, eso debería de ser el lema de la accesibilidad digital. Porque es que eso. Y si además os muestro un príncipe de tamaño pequeñito, pues no violado el copyright y creo que todos sabéis de qué estoy hablando. Así que bueno, pues va, voy a contaros un cuento. ¿Qué hay más allá del arcoíris? Estamos en junio. Tenía que haber un arcoíris por algún lado en esta charla. Pues hay un reino, un reino de fantasía. En el reino de la accesibilidad, todo es accesible. ¿Y quién se preocupa de que esto sea así? Unas hadas. En este reino se esconde un tesoro que dejaron los dioses de la accesibilidad en forma de triángulos dorados. Ups, estos no, eh. Estos tienen copyright. Estos. Cuatro. Una tetrafuerza que representa los cuatro principios de las normas de accesibilidad. Perceptible, operable, comprensible y robusto. Esas son los requisitos que tiene que cumplir una web para ser accesible. Pues bueno, gracias a este tesoro, a las hadas tienen un poder para ejercer en nuestro mundo como si fuesen musas, de forma que nos intentan inspirar para que hagamos las cosas, nuestros proyectos lo más accesible posible. Pero los humanos somos unos frutos perezosos y vamos a las soluciones rápidas. Y suelen pasar estas cosas. Haces una acera, como pasan por ahí las personas con silla de rueda. Tienes que hacer una ñapa encima. Sí, solucionado. Le han puesto ahí un icono que se entiende como que esto es accesible. Vale. Hasta que aparece la siguiente ñapa. Claro. Eso, lo ven las hadas, se cabrean, les da un siroco y pasan a mejor vida. O sea que cada vez que hacéis una ñapa os estáis cargando a una de estas hadas. Vosotros sabréis a vuestra conciencia va. Bueno, la cuestión es que estas hadas están muy pedientes de lo que hacemos en nuestro mundo y realmente están muy contentas que utilicemos WordPress porque no sirve una herramienta al 100% maravilloso, a nivel de accesibilidad, pero sí que es una buena base para que empecéis a desarrollar proyectos que sean accesibles. De hecho, es el CMS más usado de la web y más ahora estamos celebrando su 20 aniversario. Entonces, bueno, gráficos de tartas. Tiene la porción de tarta más grande del mercado y eso hace que tenga una responsabilidad enorme respecto a lo que es la accesibilidad web. Pero no a todo el mundo le gusta el sabor de la tarta de WordPress tal cual es. Y ahí entra el juego Elementor. Hay gente que le da a probar la tarta de WordPress y te dice, oye, es que a mí no me gustan las cerezas. Es que a mí no me gusta el glaseado. Es que a mí no me gusta el editor de bloques. Pues eso es Elementor. Una tarta de chocolate. Elementor apareció en 2016. En 2018 ya se llegó al primer un millón de webs hechas con Elementor y actualmente estaremos sobre los 9 millones, ¿no? Aproximadamente por ahí estamos. Pero, como dice el meme, y aquí los que son jugadores de PC os sonará de que X al ahí. Aquí hay una mentira. ¿Cuál es la mentira? Que esto en realidad es un cebo. Tenía que entrar. Tenía que entrar villano. Porque realmente para Elementor la accesibilidad inicialmente no fue una prioridad. Y no porque me haya puesto yo a revisarlo todo, pero si vemos el changelog en la versión 1 solamente apareció una vez mencionada una mejora respecto a accesibilidad web. En la versión 2 hay 5 mejoras. Y en la versión 3 ya hay 31. ¡Ostras! Ni tan mal, ¿eh? ¿Qué ha pasado aquí? Pues que vino unada que llamaremos Ane y pues influyó un poquito en la mente de Elementor y cambió de bando. ¿Vale? Ya se hizo bueno. Entonces, desde la versión 3.1 de 2021 se han preocupado bastante por la accesibilidad web. En esta versión apareció como un experimento las mejoras de accesibilidad. Y a partir de la versión 3.3 en el changelog es cuando se disparan las mejoras en el mercado. O sea que de esta forma es como Elementor está apagando su deuda. Como en los buenos animes el viaje del héroe no termina cuando derrota al primer enemigo y aparecen otro enemigo más poderoso o muchos enemigos. Y estos enemigos tienen todos una cosa en común y es que les gusta la tarta de chocolate. Los enemigos sois vosotros. No sé, ¿esperáis eso? ¿Es que yo iba a rajar de Elementor? No. Tengo que rajar de vosotros. Bueno, la cuestión está en que frente a esta nueva amenaza en el nuevo artó argumental del cuento pues en el reino de la accesibilidad pasa algo, llegan unas malas vibras y la tetrafuerza se va a freir el parragoso. Las hadas se ponen súper nerviosas y convocan a un consultor de accesibilidad y junto a ahí trazan un plan un plan que le llamaron proyecto Buenas Prácticas. Buenas prácticas para convencer a los nuevos villanos de que se conviertan en aliados. Vamos a repasarlas. Primera buena práctica, activar las mejoras de accesibilidad comprobada en los ajustes de vuestro sitio se están activadas. Por defecto las nuevas instalaciones están activadas pero por si acaso mirando. Y de esa forma pues al primer villano lo convertiríamos en aliado de la accesibilidad. Segundo, encabezados. No, se usan con finalidad estética. Recordad lo esencial, es invisible a los ojos. Lo que se ve en la web a mí no me importa interesa lo que hay detrás. Su uso correcto, el de los encabezados es estructurar el contenido. Por tanto tenéis que utilizar textos identificativos a nivel de encabezado y además respetar el orden jerárquico. Después del H1, el siguiente encabezado que podéis usar es un H2. Después de ese H2 o usáis un H2 o usáis un H3 no podéis saltar un H5 porque os guste más el aspecto. Para eso bueno, no utilizáis los encabezados para ajustar el texto y para ajustar el tamaño del texto tenéis en los ajustes del sitio tipografía todos los controles pero no hace falta elementos los permiten hacerlo bien para que hacerlo mal para que hacer la ñapa de esa forma lo que construís es una estructura encabezados que tiene un significado a nivel visual y semántico y de esa forma pues reclutaríamos para el Bando de los Buenos a otro villano. Tercera buena práctica, los enlaces. Para que sea descriptivo ya está bien de pinchar aquí saber más eso no sirve de nada las personas que utilizan lector de pantalla son capaces de sacar una lista de todos los enlaces fuera de contexto. Lo único que escucharían sería pinchar aquí para qué te voy a pinchar aquí apúntate a qué hay que darles más información. Se puede añadir al atributo tight yo no soy demasiado fan y el elemento te permite hacerlo de una forma relativamente fácil y cómoda. Con el atributo tight podéis añadir información extra sobre qué pasará cuando pinches ese enlace una información sobre la página externa la que va a llevar o lo que sea y una cosa que hay alguna alternativa pero keep it simple sobrevallar los enlaces soy talibán con eso si sopráis un enlace todo el mundo que lo vea o cuando lo pinches y nuevamente el elemento te deja definir un estilo subrayado para los enlaces el elemento te permite hacer cosas que sean accesibles por último sobre los enlaces evitar enlaces a una nueva ventana porque hay personas para las cuales es muchísimo más fácil volver atrás en la misma ventana que cerrar la ventana y volver a la ventana original y si no hay más remedio que lo indicáis en el texto de alguna manera por ejemplo aquí puedes consultar el manual de usuario entre paréntesis se abrirá en una nueva ventana todo el mundo entiende que es lo que va a pasar más sencillo que eso pocas cosas y reclutaríamos a otro villa color el color no puede transmitir información para eso está el texto el color puede potenciar el mensaje que está de forma textual es decir diseño sí pero siempre que haya una alternativa textual potenciar el texto y así reclutaríamos a otro villa contraste esto es un poco largo creo que no es necesario explicarlo ahora mismo pero hay diferentes umbrales en función de si el texto se considera grande normal o elementos gráficos para eso tenéis un montón de calculadoras de contraste que suelen tener un sistema de semáforos que te indican si el contraste de esa pareja de colores es adecuado o no no obstante si queréis saber más sobre contraste de color os invito a que veáis esta charla que ha cumplido ahora un año está en la work in Europe del año pasado sobre contraste ahí tenéis indicaciones de herramientas y posibles errores o contradicciones con las que os podréis encontrar de esta forma reclutaríamos a otro villa formularios aquí mi amiga Marta ya os lo ha razonado previamente que los formularios son muy importantes a nivel de accesibilidad los cambios del formulario deben de tener etiquetas visibles esto no es opción, esto es obligación y a ver un poquito pequeñito pero confiado en mi ese control de color rosa que está activado es el control para las etiquetas para mostrar las etiquetas las etiquetas son el texto que aparece encima del campo ese texto tiene que aparecer tiene que estar definido si no el formulario no puede ser accesible el texto que está dentro del campo eso se llama placeholder y a nivel de accesibilidad no sirve para nada el objetivo de los placeholders es proporcionar ejemplos y el objetivo de las etiquetas los label es definir exactamente cuál es el propósito del campo de hecho si inspeccionamos el código ahí está muy pequeñito pero lo que está resaltado es la etiqueta label que está enlazada con su campo correspondiente lo esencial es invisible al ojo vosotros veis el formulario el lector de pantalla ve lo que hay a la derecha el código también hay que indicar los campos que son requeridos y marcarlos como obligatorios nuevamente el elemento nos permite para un formulario, para un campo indicar arriba el control que está activado es para indicar que es un campo requerido y abajo es para marcarlo como obligatorio por convención aparece un asterisco pero el asterisco per se no significa nada a nivel semántico nuevamente, si vamos a ver el código para ese campo el correo electrónico nos ha puesto dentro del input tenemos unos atributos un required igual a required y área required igual a true eso es lo que le va a indicar al lector de pantalla es obligatorio y se lo anunciará al usuario para evitar generar problemas de usabilidad y también hay que definir bien el objetivo de los campos esos elementos también nos permite hacerlo cuando tú le indicas que un campo es de tipo correo electrónico va a esperar que lo que le introduzcais sea algo parecido a un correo electrónico es decir que tenga una roba y un dominio punto algo si elegís un campo de tipo teléfono no va a permitir que se escriba texto letras entonces hay unos cuantos campos ya predefinidos si los elegís bien el propio navegador hará una validación en tiempo real de que se está introduciendo en ese campo mejorando la accesibilidad y la usabilidad porque esa información una vez tú la has introducido en el navegador puede acordarse de ello y te facilita rellenar otros formularios en los cuales se ha definido que tipo de campo se está usando en caso de que tengais que proporcionar instrucciones siempre, siempre, siempre fuera del formulario y antes del formulario el lector de pantalla cuando llega al formulario cambia de modo de funcionamiento y si habéis puesto las instrucciones en un P dentro ya de la etiqueta form probablemente no la valera entonces ponéis un texto arriba pegadito y será lo ultimo que se lea previo al formulario de esta forma también reclutaríamos a otro villano y ya por ultimo animaciones también soy ultra talibán fuera animaciones evitadlas se que os gusta la tarta de chocolate me parece muy bien pero dejad ya de abusar de las malditas animaciones marean, distraen son muy molestas para algunas personas con ciertos tipos de discapacidad tenéis que darle el control al usuario para decidir si quiere ver la web con animaciones o no es que bisante, si no la web no es bonita en Tira Cochina un ejemplo, uy perdón esto tiene que estar asi, todo desactivado y un ejemplo de una web bien trabajada que hace esto que os digo fijaos que arriba a la derecha hay un campo que está muy bien contrastado pone animación desactivado por defecto a mi me parece desactivado yo entro a ver esa página de producto y tengo una web que está bien diseñada pero que no tiene animaciones si a mi me apetece verla con animaciones como si tuviese aquí un logo de alguna fruta pues yo activo eso y esa web de repente tiene un montón de animaciones también quedaba muy bien pero lo he decidido yo lo importante también en la accesibilidad es que sea el usuario quien decida no vosotros vosotros darle posibilidades y cada cual decidirás que es lo que mejor se adapta a sus necesidades también súper importante a nivel de animaciones es evitar los parpadeos que nada flashee un cantar a la gente que se dedica a hacer vídeos vídeos con texto que parpadea tal no flashee porque eso puede desencadenar ataques epilépticos o cosas por el estilo y no querréis que convertir a vuestros candidatos a clientes en pacientes hospital así que de esta forma reclutaríamos a otro villano y bueno pues estaría estaría no estaría exacto queda uno queda uno pues no queda muchos porque esto que os he dicho son un par de cosillas que podéis empezar a hacer en accesibilidad hay tantas cosas que se tienen que tener en cuenta que es realmente imposible pasar de cero a cien pero si empezáis utilizando una herramienta que lo tiene en cuenta y aplicando estas buenas prácticas se trata de que poco a poco con el tiempo vayáis aprendiendo cada vez más y como en todos los buenos animes continuará Hola qué tal una pregunta cuál sería una buena práctica para en un formulario manejar el feedback cuando lo rellenan mal es decir, normalmente una práctica habitual en diseño es si ha rellenado el email que se enseña mal es decir, que no cumple los requerimientos normalmente viene señalados a la vez y el mensajito del error al lado dentro del formulario para un lector de pantallas que sucedería supongo que si le has puesto los atributos de arena necesarios para que salen los anuncia uno tras otro espera cuál sería una buena práctica a ver ahí depende mucho del tipo de lector de pantalla y cómo esté todo implementado entonces sería ver cada caso lo importante es que normalmente en accesibilidad no existen recetas existen soluciones para problemas concretos lo que es los hints no mejor fuera del formulario porque si no el lector de pantalla no lo vería si quieres hacer una aclaración sobre el formulario sería mejor poner los mensajes también fuera del formulario es que siempre está con el diseño si a ver es que realmente eso depende eso es prueba y error eso es prueba y error y después cuando hay duda hacer pruebas de usabilidad con usuarios reales vale porque tú podrías añadir un mensaje de error y a través de aria que ese mensaje se comunique directamente al lector de pantalla de forma que lo daría inmediatamente pero también podrías vincularlo en el campo en concreto hay diferentes opciones sería verlo con calma no quiero decirte ahora una cosa y que te vayas con la idea de que tiene que ser así es muy chula la presentación te quería hacer una pregunta comentas de subrayar los enlaces y ya lo he visto varias veces más lo que lo comentabas pero hay alguna alternativa válida a no subrayar no me gusta nada visualmente lo de subrayar enlaces hay alguna opción digo yo si hay que hacerlo lo hago pero hay alguna opción que realmente se vea que es un enlace a nivel de accesibilidad y que no quede tan peor es una cuestión de gustos es una cuestión de gustos a ver si tienes opciones tiene que tener algún cambio de aspecto a nivel tipográfico para que visualmente se puede identificar que es un enlace de todas formas yo insisto la convención es el texto subrayado esperamos que sea un enlace subrayar un texto que no es un enlace también es una mala idea si tu añades una variación tipográfica deberás añadir otra variación tipográfica en caso de que el ratón pose se posee encima del enlace o llegue el foco del teclado para que el usuario lo llegue a identificar que vale va a pasar algo cuando haga eso si además le añades una variación de color vas a tener que complicarte absolutamente la vida calculando que el contraste entre el color de texto el color de fondo y el color del enlace contrasten suficientemente entre sí, eso es bastante complicado por tanto si el enlace está rodeado de texto que no es enlace subrayalo porque es que eso no falla vale y si tienes si te gusta subrayar otras cosas mejor ponerlo azul este mítico no, no subrayes puedes hacer un highlight puedes hacer un highlight puedes utilizar otros recursos que son más válidos para eso, si tu quieres destacar cosas puedes usar la negrita con su etiqueta correspondiente con el tag M por ejemplo ok, genial, gracias de nada muy creativa la charla, muchas gracias mi pregunta la siguiente cada página que creamos tiene un producto, tiene un objetivo tiene algún argumento vamos a informar algo hay algún manual de accesibilidad para cada tipo de página ejemplo, si es comercio si es académica, si es industrial o en general la accesibilidad es para todos deja que me ponga la gafa que no te he escuchado bien me repites la pregunta porfa bueno, entonces es broma a ver, no no hay recetas y para algunas cuestiones sí que puede haber recetas concretas pero son problemas muy concretos para eso están las guías de accesibilidad web de las web content accessibility guidelines ahí es donde tienes que ir a buscar los problemas concretos que es lo que te recomienda hacer pero no va a haber si vas a hacer una página de recetas, esto es lo que tienes que hacer no, vamos a ver si añades vídeos tendrías que tener en cuenta esto si no sé si hay animaciones, tener en cuenta esto o otro etcétera, entonces tienes que desgranar lo que es la página, sus componentes más básicos e investigar esos componentes cómo se usan de la manera correcta que básicamente es aplicar el standard html y después matizar con las web content accessibility guidelines hola, hola Vicente muy chulo que quería preguntar referente a los formularios que pasa, has comentado que los lectores de pantalla tienen dificultades para leer lo que no tienen dificultades, perdón, matizo porque a ver, los lectores de pantalla es un mundo aparte pero ellos, los lectores de pantalla tienen diferentes formas de funcionar pero en general está el modo general y el modo formularios en el modo general las combinaciones de teclas hacen unas cosas en el modo formularios hacen otras entonces partiendo de esa base, qué pasa con los pequeños textos legales que suelen acompañar a los formularios que suelen ponerse debajo el lecan muy pequeñita y eso llega a leerlo el lector de formulario en principio sí, depende es que habría que verlo la cuestión es que hay muchos usuarios de lector de pantalla que no tienen por qué dominar el uso de lector de pantalla saben hacer lo básico y con eso funcionan entonces si todo un formulario le metes más cosas de lo que debería de contener un formulario tienes que aceptar y asumir que habrán usuarios de lector de pantalla que por bien implementado que esté no se van a enterar porque no sería la opción más usable meter los pesa ahí dentro por ejemplo si tú lo dejas fuera, lo dejas enlazado precisamente ahí ya es más fácil que el usuario se dé cuenta de que hay un texto relacionado pero si no en general en modo formulario va saltando a través de los diferentes campus gracias buenas Vicen muchas gracias por la ponencia muy chula yo vengo a aplicarte ya lo sabes a ver dispara qué frisos de los sliders pues los sliders bien hechos están bien, funcionan si puedes seguir sliders accesibles si, yo estoy convencido que si a ver, depende de lo que quieras meter en sliders si tú me quieres meter vídeos y historias me lo complicas demasiado pero hay sliders que en principio sí que están bien implementados hay que buscar esos patrones de diseño que están bien hechos nuevamente no voy a hacer promoción de la compañía que se ha mostrado ahí pero cuando han tenido un slider a mí me ha parecido que está bastante bien aparecían los botones para controlar si quieres pasar o no si quieres parar la animación y si ya después lo que hay dentro de cada slide está bien implementado a priori debería de estar bien pero nuevamente podemos calentarnos la cabeza todo lo que queráis, podemos hacer el mejor tipo de diseño llegar todos a una conclusión de que esto es lo mejor después hay que preguntar a los usuarios reales y respecto a la accesibilidad tenemos tanta diversidad que lo que pueda ser correcto o usable desde el punto de vista de un colectivo no lo es desde otro punto de vista entonces, siempre muy relativo ¿Queres y crees que son necesarios? yo en general pienso que no no sé más de nada bueno, primero felicidades, me ha encantado mucho tu charla quiero que te pongan las papas no? os veo muy raros, esto es muy raro no hay necesitado de plugins que tú recomiendes para instalar y que mágicamente te hagan la uva de sí me encanta esa pregunta no por cierto, esto ha pasado en work in europe hay una charla que se recomendaba un plugin de estos que hacen magia y no, la verdad que no la magia la hacemos las personas no los plugins si una cosa no está bien hecha por mucha inteligencia artificial y cosas que le quieras meter a nivel de marketing eso no soluciona los problemas los problemas lo solucionamos en casa diseñando bien las cosas pensándolas bien y aplicando estas buenas prácticas que son básicas si no usas bien los encabezados no va a venir un plugin que decida, oye pues esto aquí tendría que ser de esa otra manera yo no le dejaría decidir a un algoritmo por mí prefiero tomar decisiones sobre mi web gracias bueno, también podemos hablar fuera bueno, voy a ser muy breve como ha llegado tarde no sé si las has comentado por ignorancia pura y dura todo el tema de lo de los formularios la accesibilidad, no sé cómo se comportan los lectores de pantalla, osea hablo de la totalia y absoluta ignorancia no se podría solucionar con ventanas emergentes ¿dónde cuándo es? hablo para esos casos concretos el tema de los modales es otro problema extra me da más miedo los modales que los sliders era principalmente saber eso al hacer un evento modal que lee el mensaje de error pues oye, resulta que hemos colocado mal el correo electrónico es que depende porque eso después lo tienes que comunicar de la forma de vida al lector de pantalla y eso se hace con cosas que no se ven que son invisibles a los ojos y aparte, los modales nos traen un concepto que normalmente en este tipo de charlas las trampas de teclado hay modales que capturan el teclado y una persona que tiene que navegar con el teclado no puede cerrarlos no puede volver atrás, no puede seguir navegando, tiene que cerrar o recargar la página no debería de serlo, pero potencialmente lo es