 Mucho gusto. Mi nombre es Hans Müller. El día de hoy vengo a presentarles las herramientas y conciertos para que tuvelas sea accesible. Mi nombre es Hans Müller como he dicho anteriormente. Vengo el día de hoy a hacer mi presentación. Yo soy de Guatemala. Voy a hablarles un poquito sobre quién soy yo, cuál ha sido mi expertise en este mundo de Warpes. Verdad que todos nos encantan. Yo más o menos empecé a trabajar en Warpes hace unos 10 años aproximadamente. Como todos empezamos pues siempre empezamos a ver un poquito lo que es Warpes, en qué trabaja, cómo es. Creo que todos instalamos plugins. En ese entonces Warpes me acuerdo muy bien que era un simple blog. No tenía pues lo que ahora es. Ahora se ha vuelto inmenso y tiene un montón de herramientas que podemos utilizar. Entonces como le mencionaba yo inicié de esa forma creando mis propios plugins, mis propios temas como me fue pasando el tiempo y la experiencia que he tenido en diferentes trabajos. Así que por eso el día de hoy vengo a mostrar esta charla, hablar de este tema, de las herramientas y consejos para que tu web sea accesible. Ya que nosotros debemos siempre pensar un poquito más allá de nuestro trabajo y este tema es bastante importante más que todo para las empresas a veces de Estados Unidos o extranjeras que siempre buscan que su web sea accesible para todos. Así que vamos a iniciar para ello. Lo primero es ¿Qué es la accesibilidad web? Me gustaría mucho que entendiéramos el concepto de accesibilidad antes de enfocarlo a lo que es web. Por ejemplo, con nosotros hablamos de accesibilidad, que es lo primero que se nos viene a la mente. Si estamos hablando de tal vez algún edificio, algún centro comercial, alguna escuela, cuando nosotros nos referimos a accesibilidad, yo pienso en que el lugar tiene que tener asensores, tiene que tener rampas de acceso para las personas descapacitadas o con capacidades diferentes. Tiene que tener también estacionamiento cerca de la entrada para poder facilitar aísica a estas personas que tienen estas dificultades o que tienen algún programa para moverse de movilidad. Entonces siempre tiene que ser accesible. El lugar tiene que estar a la mano todas las cosas, tienen que haber tubos para agarrarse, señalizaciones. Entonces es lo primero que yo pienso a la hora de decir accesibilidad. Así que nosotros lo tenemos que enfocar también a la web. Si ya tenemos el concepto de lo que es accesibilidad, lo podemos hacer más fácilmente orientado hacia la web. Pero en pequeñas palabras podemos decir que la accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas. Ojo, esto es muy importante ya que nosotros queremos que nuestra web sea visitada por el máximo número de personas. Creo que nadie queda una página web para que eso lo sea visitada una vez al mes o dos veces al mes. Creo que siempre queremos nosotros que la web sea visitada por todas las personas y al no hacerla accesible, que ya vamos a ver más adelante qué otras cosas conviene o qué otras cosas involucran, al no hacerla accesible nosotros estamos haciendo que ciertas personas no puedan entrar a nuestra web y no puedan ver nuestro contenido. Así que independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la web. Ok, entonces ¿Qué debemos de hacer para que nuestra web sea accesible? ¿Qué es lo primero que debemos de hacer? Lo primero que debemos de hacer nosotros es documentarnos un poco. Esta charla en sisma, charla bastante básica donde nosotros vamos a ver sólo algunos puntos y temas porque si entramos muchísimo más a fondo pues creo que nos pasamos todo el día hablando sobre la accesibilidad y aún no vamos a acabar con todo el tema. ¿Por qué para esto es bastante importante que nosotros leamos el cumplimiento de los estándares de WSAG? Estos son los estándares mundiales que están gobernando actualmente para que tu web sea accesible. Así que vamos a ver un poco de esto. Básicamente si se dan cuenta ahorita están en la versión número dos la cual a tres ya está saliendo que siempre es como un poquito más de estándares, un poquito más de guías de lo que ya se tiene. Sólo que aún está como una versión todavía de prueba, un draft que todavía no ha salido. Pero básicamente en esta página que es la que rige para ver la accesibilidad completamente nosotros podemos ver lo que es la introducción de qué es, sobre qué trata, si nos queremos documentar un poco más, qué trata cada una de las versiones, por qué tenemos que utilizarlo o para qué sirve, qué es el WSAG Complaints, lo que normalmente se utiliza en Estados Unidos, algunos materiales de soporte. Aquí si se dan cuenta podemos estar viendo completamente todo lo que tiene que referirse a los estándares que debe de manejar la página. Es muy importante aquí del lado izquierdo, nosotros podemos encontrar las documentaciones, cómo lo podemos aplicar, cómo podemos documentar un poquito más sobre la versión tres si están ustedes interesados y cómo podemos ir aplicando a nuestra web. Como les menciono, si nos ponemos a ver toda esta parte aquí juntos, porque no terminamos el día de hoy, pero les quiero dejar este tipo de herramientas y lugares y influencias donde ustedes pueden guiarse y ver cómo pueden llevar su web un poco más accesible. Así que volvemos a la presentación. Algunos puntos graves para que la web sea accesible. Estos son como unos puntos generales que yo les quise enmarcar, que tuviéramos muy increíble, que nuestra web para que sea accesible siempre tiene que tener un full family bastante amistoso, agradable a la vista. Como les decía, cuando hablamos de accesibilidad y lo que podemos entender hasta el momento es que nuestra web sea compatible para todo mundo, que nuestra web no tenga ningún problema a la hora de ser visitada por cualquier persona. Así como es los lugares, también es por la web. La web tiene que ser accesible, tiene que tener colores bonitos, tiene que verse bien, tiene que tener los cuadros y los marcos adecuados, el tamaño adecuado, el valor color adecuado, para que aquellas personas que ya saben existen personas que a veces no distinguen colores, hay personas que a veces no distinguen algunas formas o tienen un poco de deslexia o algo. Entonces necesitamos que nuestra web sea completamente accesible para todo el diferente tipo de personas. Entonces, como les mencionaba, uno de los tips y puntos que siempre tenemos que ver en esta web es el full family, el full size, el full color, el valor color de cada una de las acciones, el line hate, el área label y el alt. Voy a explicar un poquito más estas últimas dos, el área label, si se dan cuenta, este es como un poquito un tema que no se conoce tanto, pero básicamente nos sirve más que todo para la accesibilidad de la web. El área label como bien lo dice aquí en la página de developer Mozilla, nosotros básicamente a la hora de programar, si se dan cuenta en esta parte de acá tiene un área label que tiene un título y dice cross, esto básicamente es un botón para cerrar, es un botón de acción. Normalmente nosotros a la hora de programar no agregamos ni colocamos ningún adicional, más que solo lo que que funcione, eso es lo que nosotros siempre nos importa, que funcione y lo entregamos porque el cliente ya lo está solicitando, lo está pidiendo y nosotros nos vamos. Entonces es muy importante utilizar este tipo de tags que se le agregan a cada uno de los botones o imágenes o algunas columnas o lo que nos estamos creando para que cuando tengamos alguna herramienta de accesibilidad, estas herramientas puedan leer estas etiquetas y le ayuda a la persona que tiene alguna discapacidad para entender más la plataforma, para entender más el sitio web del lado izquierdo, si se pueden dar tenemos todos los diferentes tipos de área que tenemos, tenemos área description, tenemos área details, tenemos diferentes para poder en nosotros enmarcar nuestro botón o nuestra área, queremos que se muestre un poquito mejor o que sea un poquito más entendible, entonces nosotros podemos llegar y agregar este tipo de tags a cada uno de nuestros rows o columnas como mencionaba anteriormente. Como había dicho también los alt son bastante importantes, más que todo va orientado a la parte donde nosotros vemos imágenes, siempre tenemos que agregar el alt para las imágenes como el nombre, como tal de la imagen por ejemplo, si tenemos el logo de la empresa, es logo Worldcam por ejemplo, entonces tenemos que agregar el alt con el nombre logo Worldcam, como le mencionaba una vez más eso nos sirve para que en el futuro nosotros podamos, las personas que tienen herramientas de accesibilidad puedan leer y entender mejor el sitio. Ahora en el siguiente nos vamos un poquito a las herramientas que tenemos para la web, estas herramientas son completamente generales, no son únicamente para lo que es Warp, es verdad, sino que todo para lo que programamos son herramientas súper útiles para la accesibilidad, para Warp no existe ningún plugin como tal que nosotros instalemos y mágicamente ya se volvió accesible en nuestra web. Eso sí, en ese mundo no existe, es un trabajo que se tiene que hacer a mano, es un trabajo a detalle por lo cual siento que es un trabajo que quedan el olvido y por lo mismo muchos empresas y proyectos no se ponen a ver eso porque saben que conlleva más tiempo, porque saben que conlleva trabajar más, para poder hacer esta web accesible, pero siempre es importante y como les digo, ojo, esta parte de accesibilidad se está tomando muy en serio en Estados Unidos, en mi propia experiencia que trabajo actualmente con unas empresas en Estados Unidos, ellos tienen contratos donde especifican que tiene que ser su web completamente accesible y más si son webs que son para clínicas, médicas, hospitales, o sea se tienen que estar siempre siempre en la venguaria de lo que es la accesibilidad, así que si nosotros en un futuro pues obviamente queremos trabajar para alguna empresa en el extranjero, queremos tener nosotros la posibilidad de optar, pues es muy importante que desde ya conozcamos las herramientas y conozcamos cómo es la accesibilidad, aquí es lo que trata y como bien mencionaba también, esta parte de las herramientas y los consejos que tenemos no necesariamente tiene que ser solo para los programadores, también es muy importante que los diseñadores lo sepan, por eso esta charla está abierta para todo tipo de personas, es un tema global como bien les mencionaba, porque los diseñadores también pueden desde un inicio iniciar su diseño pensando en que van a tener una web accesible, colocando colores bonitos, colores suaves, colores que se puedan ser legibles, tipos de letras legibles, no recomiendo tipos de letras cartas o ese tipo de cosas en las webs porque si ya es muy difícil de utilizarlo, pero bueno vamos a la parte de herramientas, la primera que me gusta mucho es esta que se llama userway, es una súper herramienta, lastimosamente también son herramientas de pago, no son herramientas saqueas que nosotros podamos como le digo solo instalar y que ya se vole mágicamente nuestra web ya accesible, si tiene un free to add como de unos 10 días y de ahí si se pago unos 50 dólares al mes o unos 240 o 300 dólares al año si no me acuerdo, pero es súper súper importante tener este tipo de herramientas si queremos con nuestra web sea decir vuelvo repito, esto no es una herramienta creada solo para web, puede funcionar para cualquier sistema que nosotros estemos trabajando y realizando y les voy a mostrar un poquito para que vean cómo es que trabaja ellos mismos lo tienen instalado en su página web verdad no sería un buen vendedor userway si no tuviera la herramienta aquí en su disposición entonces si se dan cuenta aquí del lado derecho tenemos este icono que es de accesibilidad aquí nos dan varias herramientas que nosotros podemos ir manejando, se hace cuando nosotros cumplimos esta herramienta y la instalemos en nuestro servidor, lo instalamos en nuestra página web, basta únicamente con que agregamos el código y ya vamos a poder tener todo este tipo de herramientas para que nuestra web sea más accesible por ejemplo hay personas que tal vez los colores no los distingue muy bien, tal vez no los pueden leer adecuadamente entonces tenemos la parte de contraste, si se encuentra podemos ir como cambiando los colores, podemos hacerlo en forma dark, podemos hacerlo light para que haya todavía muchísimos más color blanco dependiendo la visibilidad de la persona, podemos también usar la voice navigation que ahorita pues si lo puedo no se va a escuchar, pero como les decía esto va a ir leyendo todos nuestros area, touch que hemos puesto, va a ir leyendo y se va a ir escuchando para aquellas personas que también perdieron la vista pero si tienen sus oídos y pueden escuchar perfectamente entonces van ahí prácticamente leyendo la web y qué pasa si nosotros no hicimos la parte de accesibilidad, no agregamos el área, no agregamos los touch, pues básicamente no nos va a funcionar verdad, entonces si es necesario tener ese trabajo más como les digo orientado que nuestra web sea accesible, también tenemos lo que es los textos, si se dan cuenta que podemos ir los agregando, vamos a ir agandando cada vez más dependiendo de lo que nosotros queramos, también podemos ir haciendo espacio entre las letras, algo muy importante aquí es la dialectia friendly, hay gente que es dialectica entonces se hace que la web o que las letras cambien un poquito para que se pueda notar más la forma de las letras para que la persona que tiene letra pueda entenderlo un poquito mejor, encuentre diferentes tipos, también el cursor si lo necesitamos un poquito más grande y podemos ir agandando dependiendo de nuestra necesidad o aquellos que tal vez les cuesta mucho enfocarse en alguna sección de la web porque hay muchas luces, muchas imágenes pues también tenemos este pedacito aquí para poder ir revisando e ir viendo cada una de las secciones de la web, también tenemos este para poder darle como una guía para que sepamos dónde vamos leendo y nos perdamos, como les digo es una herramienta bastante funcional, sobre todo para la parte de accesibilidad, donde nosotros podemos ir jugando con la misma, algo muy importante también de esta herramienta es de que como les digo, si nos va a servir completamente para que nuestra web sea accesible, aparte de lo que estamos realizando, aparte de lo que vamos a hacer en programación en código, esto es un como on que podemos hacer para que la web sea mucho más accesible. Luego nos revisamos una vez más, otro pues que tenemos aquí como herramienta es el userway inspector y los mismos tienen un inspector donde nosotros podemos poner la url de nuestra nuestra página web, donde podemos darle un inspect y ellos va a ir dando algunos consejos, nos va diciendo miren la web le falta esto, la web le falta queo, pero también es de para, entonces lo que les va amarrado siempre al otro sistema, pero si en caso ustedes quieren siempre revisar su web si es accesible no y no quieren gastar, pues tenemos otras herramientas, que esta sí es completamente free, que sería la web, basta solo que nosotros pongamos aquí nuestra url y básicamente nos va a empezar a poner que si la web está accesible, que hay que mejorar esta parte, nos tira bastantes herramientas de mejora o bastantes tips de mejoras para nuestra web, para que nosotros podamos ir la mejorando. Luego tenemos también la herramienta de power mapper, esta de power mapper también es una herramienta para como les digo la mayoría de cosas de accesibilidad son pagadas, pero básicamente es por lo mismo, porque son algo muy importante que nosotros necesitamos, esta herramienta en sí de power mapper, lo que nos sirve es para que nos indique si nosotros tenemos bien distribuido nuestros fonds, si tenemos distribuidos nuestros ads, si todas las imágenes de nuestro sitio tienen el ad correspondiente, actualmente pues por cuestiones de copyright no puedo mostrar como un ejemplo de la empresa donde nosotros normalmente trabajo, pero si tengo aquí un poquito de ese scan que ya he corrido sin mostrar o reeles ni nada, ese es un scan que he corrido en una web de las que estamos trabajando, si se dan cuenta aquí una vez donde hice la parte de accesibilidad y una vez nos está mostrando cuáles son los issues que tenemos, algunos issues con el CSS, también tenemos algunos warnings que son de color amarillo, donde tenemos que asegurar que el texto y el variable color tienen suficiente contraste y verdad eso nos sirve bastante, también que el CSS para que está saliendo a la página, verdad los estilos y todo, algunas líneas que son tipodotes, que son los puntitos, no se distinguen muy bien en nuestra página, así así le tenemos que poner atención, así que esta página como les digo power mapper, a pesar que es parada, pero es muy buena, la verdad nos da muchos tips para que nuestra web sea accesible y dejemos la parte de accesibilidad, también nos da digamos una sumatoria de errores que podemos tener, donde también nosotros podemos ver si necesita, debemos componer algún link que esté roto, la web de repente no funciona algo, no funciona un vídeo, entonces lo podemos estar viendo en esta parte de acá, entonces como les digo parte de la accesibilidad, este de power mapper nos da bastante, bastante amplitude en lo que es nuestra web, y que continuó con la presentación, ok, ahora que ya vimos esta parte de acá, vamos a, voy a hacer un pequeño demo, yo preparé un pequeño demo con la herramienta completamente gratis que se llama web, esta herramienta web como les digo, da todos los tips para que nosotros podamos trabajar y hacer nuestra web un poquito más a que sirven, aquí hice un ejemplo, ahí sí que haciéndolo fatal todo lo que no debemos de hacer, si se dan cuenta tenemos un vagón verde y tenemos un tipo de letra azul, la cual pues yo hasta el día de hoy tengo buena vista y yo lo verlo bien, pero recordemos también que hay ciertos monitores que los colores los cambian, algunos se den un poquito más oscuros, otros más claros, otros también tienen el brio muy alto, otros tienen el brio más abajo, entonces toda esa parte no nos conviene para nada, tenemos ese tipo de letra que hasta el momento que se ve bastante bien, pero no lo lo voy a ver mucho y tenemos una sección de un vagón con un dgd que aquí se empieza a ver bien, pero aquí cuando empieza a tocar lo más claro podría ya no verse adecuadamente, entonces agarramos la url de la web, nos vamos al web, que tenemos el sitio que es completamente gratis como les digo, entramos a él, agregamos la url, le damos entrar y esto automáticamente va a empezar a sacar toda la reportería, es bastante importante que miremos el lado izquierdo, el lado izquierdo va a sacar como el detalle de los errores que tenemos, siempre como les digo es una herramienta, aparte de ver la accesibilidad, de ver el contraste, de colores y todo lo que se necesita para que la bolsa se accesile, también ve la estructura, por ejemplo que está detonando que tenemos un h1, aquí tenemos un h2, aquí es un parafue normal, aquí tenemos otro h1, entonces si nosotros queremos que una página sólo tenga un h1, pues ahí es una alerta que nos está dando, así como que miren aquí tiene un h1, aquí también, entonces cuál es el título principal de la página verdad, así que nos sirve ver un poquito eso, entonces ya lléannos directamente a la parte de accesibilidad, vamos aquí a los detalles, esta parte de aquí lo podemos ir escondiendo si no lo necesitamos para que no nos moleste un poquito a lo que nosotros queremos buscar que es la parte de contraste y colores, y aquí nos va enmarcando los colores, entonces si yo le doy clic aquí, me manda donde está el error, o yo le doy clic acá, me manda donde está el error también, si le damos clic a el error que está mostrando, nos va a decir aquí que tenemos un contraste bastante bajo entre el texto y el fondo de color igualmente acá, si se dan cuenta aquí también nos está dando ya alguna alerta, entonces nosotros lo que debemos de hacer es básicamente al tomar estas directrices podemos ir y cambiar, no, si esta parte no me había dado cuenta que está muy claro el fondo y la letra también está clara, no se ve bien, son colores que no combinan y entonces ya con eso podemos irlo como mejorando y arreglando toda la parte de nuestra web, bastante importante también que cuando nosotros le damos clic aquí y nos dice que no es un programa de contraste o que nos hace falta algún level que esta es la parte de área que está en la parte de aquí abajo, si se dan cuenta aquí dice que no tiene ningún rol, no tiene ninguna descripción, no se le está abriendo absolutamente nada pero no sabemos realmente dónde es eso, o sea de qué parte me está hablando, de qué código, de qué línea, bueno entonces podemos ir a la parte de aquí abajo, le doy estamos donde dice el código y nosotros si le damos clic, entonces ya nos va a ir mostrando aquí todo nuestro código de la página y podemos ir viendo exactamente donde es el error, por ejemplo si vamos con esta, aquí nos muestra exactamente de qué está hablando, de qué sección está hablando, si nos vamos a este también, inmediatamente nos marca, entonces nosotros podemos abordar más el problema y directamente o si en algún caso nosotros no somos los desarrolladores sino que otra persona lo está haciendo, podemos mandar este reporte, decirle miren en la línea tal y en transcepción este fondo no está bueno, esta parte está dando algún problema, entonces por favor corrijan lo verdad porque no es adquisible, no se dedina, así que nosotros podemos ir bien igual a la parte de estructura, si dan cuenta que nos marca muy bien cuántos tenemos nosotros de header, si tenemos header in 1, header en level 2, level 1, como nosotros lo necesitemos aquí nos van marcando igual también nos podemos dirigir a él y con el código siempre nos va demostrando dónde estamos, así que esta herramienta de verdad a mí me gusta mucho aparte de la de PowerMapper que yo les había mencionado, que la de PowerMapper ya hace toda esta revisión también más profunda pero como es parada que también depende del proyecto de la empresa pero siempre es bueno mencionarlo y esta que es completamente gratis nos sirve para darle un primer vistazo a nuestro sitio, siempre en todas esas herramientas gratis van a ver momentos en los que tal vez nos muestra que un falso positivo verdad o sea así es el diseño, si se ve bien si lo logramos entender pero acuérdense que las herramientas a veces son bastante estrictas en ese sentido y a veces pues nos da algún falso positivo que realmente pues no es importante de tomarlo en cuenta la como en este caso yo hice esta parte y si se encuentran este no me mostró nada para la herramienta está bastante bien veamos que para la herramienta se lee bien el título pero yo en mi enfoque personal y mi experiencia si diría que esto no es una buena propia es como les digo como este herramienta gratis pues siempre van a tener ahí sus pequeñas limitaciones verdad la hora de realizarlo pero siempre nos sirven para tener una buena lista así que bueno básicamente ha sido mi presentación sobre el día de hoy de accesibilidad de las herramientas y consejos que ustedes puedan tener espero que les haya gustado y si tienen alguna pregunta pues les voy a disponible muchísimas gracias