 Bien, vamos a empezar con la siguiente sesión. Precisamente esta es una de las charlas que a nivel personal como desarrollador fronten y creo que muchos de los que estamos aquí más nos puede interesar a la hora de plantear la accesibilidad. En muchos casos creo que ha sido una de las grandes olvidadas dentro del desarrollo y creo que es un privilegio que Lourdes González perea hoy aquí con nosotros. Ella lleva trabajando desde el año 2003 en el entorno de las tecnologías accesibles, coordina proyectos de accesibilidad TIC en la Fundación 11 y es profesora también de usabilidad e infasecibilidad en la universidad Isabel I. Aprovechar muchísimo todo lo que Lourdes nos tenga que decir, seguro que vamos a aprender un montón. Así que, Lourdes, cuando quieras, muchísimas gracias por estar aquí. Hola, muy buenos días a todos. En primer lugar, gracias a la comunidad de WordPress por considerar que esta charla es importante. Para mí también es un privilegio dar una charla además en mi ciudad porque doy muchas charlas pero en válaga pocas y eso al final es un tema que se agradece. Y bueno, voy a intentar aportaros algunas nociones de accesibilidad. En primer lugar, quería hablaros que los sitios web accesibles son sitios web abiertos a la diversidad y cuando hablamos de diversidad no solo nos referimos a las personas con discapacidad, sino que la accesibilidad es muchísimo más amplia. Por un lado, la accesibilidad contempla una triple vertiente, es decir, la diversidad humana, la diversidad tecnológica y el contexto. Si contemplamos todo esto, nos daremos cuenta que al final la accesibilidad no es solo para las personas con discapacidad. ¿Por qué? Porque dentro de la diversidad humana, lógicamente hay personas que no vemos nada como en mi caso, personas que se ven, personas que tienen la vista cansada y sin tener una discapacidad oficial realmente tienen esas dificultades, personas con problemas auditivos. Por otro lado, tenemos la diversidad tecnológica, es decir, seguro que todos habéis encontrado alguna vez que habéis abierto una página web desde un navegador diferente, es decir, de un navegador poco extendido y habéis visto que, a lo mejor, el reproductor de vídeo no funcionaba bien. Bueno, al final eso también es accesibilidad. Y también es accesibilidad el contexto. El contexto significa que a lo mejor podemos estar en la calle, el sol puede estar alumbrando una pantalla, seguro que os ha pasado a todos de ir a sacar dinero en cajero automático y que la luz del sol nos permitiese ver la pantalla. Si contemplamos todo eso, yo creo que coincidiréis conmigo en que al final la accesibilidad es para todos. Sí que tenéis que tener en cuenta que una web basada en WordPress para que sea accesible no tiene que hablar. Yo, por ejemplo, ahora estoy utilizando, me veréis un aricular aquí, porque estoy utilizando un lector de pantalla que os voy a enseñar. Ese lector de pantalla se llama producto de apoyo y ese producto de apoyo cubre precisamente lo que yo no puedo hacer, que es ver la pantalla. Ese producto de apoyo me va leyendo el contenido del PowerPoint que os estoy mostrando. Pues bien, para que los sitios web con WordPress o con cualquier otra tecnología sean accesibles, lo que tienen que tener es un buen código para que cuando mi lector de pantalla pasa por encima de los diferentes elementos de la web, pues me vaya leyendo el contenido. No tiene mucha más magia. Al final, la accesibilidad, yo, lo que me gustaría que os quedaría es que depende de todos, de programadores informáticos, de diseñadores, de periodistas. De hecho, si hay algún periodista en la sala agradecería que al final de la charla se me acerque porque tengo una investigación abierta sobre cómo los periodistas, cuando elaboramos los contenidos, contribuimos o no a la accesibilidad. Y luego también contaros que este conocimiento está recogido en un estándar. Es decir, que si en Google ponéis pautas de accesibilidad web, veréis un documento que son las pautas de accesibilidad al contenido en la web 2.0, en el que se explica qué aspecto tenemos que tener en cuenta para que nuestro sitio web sea accesible. Os hablo del estándar porque yo, lógicamente, en 25 minutos nos voy a poder contar todo, pero que sepáis que eso está ahí escrito. En cuanto a la accesibilidad para todas las personas, me gustaría que tuvieres en cuenta que la discapacidad, si hablamos de este perfil de usuario, es muy diversa. Y dentro de la discapacidad tenemos personas que no ven nada o ven parcialmente, personas que no oyen nada y, a lo mejor, utilizan la lengua de signo o la lectura labial o personas que tienen hipoacusia, es decir, un resto auditivo que les permite escuchar un poco. Discapacidad física pasa un poco lo mismo. Hay personas que van en silla de rueda, que la parte superior del cuerpo la tienen bastante afectada y utilizan el ordenador con la voz o con ratones especiales grandes. Y luego también hay personas que, a lo mejor, lo que tienen es ciertos temblores y lo que les impide es hacer un clic sobre un botón que pueda ser muy pequeño. Y también tenemos la discapacidad intelectual, que es la relación con personas con dificultades para comprender, pero también deciros que, por ejemplo, una persona que viene a nuestro país y en las que el español no es su primera lengua, pues no tiene una discapacidad como tal, pero tiene dificultades de comprensión y la accesibilidad pues también es para ellos. Bueno, os voy a enseñar, antes de hablaros de las claves, me voy a centrar un momento porque aquí sí que tengo que cambiar. Os presento a mi lector de pantalla, ¿vale? Se llama NVDA, es un lector de pantalla gratuito que podéis encontrar por internet. Y este es el PowerPoint. Veréis que no entendéis nada, ¿verdad? ¿A qué no? Pero yo no os estoy engañando. Pasos para alcanzar la accesibilidad. Pasos para seleccionar las plantillas accesibles. Tenemos que seleccionar las plantillas accesibles. Es decir, todo el contenido que vosotros estáis viendo en la pantalla, a mí mi lector de pantalla me lo lee. En el móvil tengo otro, otro que además he puesto. Este sí lo entendéis mejor, ¿verdad? Calendario. Aquí lo único que... La diferencia es que lo he puesto más despacio para que podáis entenderlo y además es una pantalla táctil. Entonces, conforme yo voy tocando los diferentes iconos, me los va leyendo. Mientras que en el ordenador yo no utilizo ratón, sino que lo que utilizo es unas combinaciones de teclas para ir podiendo. Vale, me volvo. Bueno, y ahora aquí he cogido un sitio web muy modesto, que es el mío, ¿vale? Yo no soy programadora informática, lo digo para que tengáis compasión de mí, ¿vale? Y es un sitio web que, bueno, que sí que tiene las características de ser accesible. Y entonces me gustaría mostraros de forma visual las diferencias. Es decir, en este sitio web voy pulsando la flecha arriba y abajo y me va leyendo el contenido conforme se ha diseñado el código del sitio web. Pero luego, además, para ir un poco más rápido, tengo combinaciones de teclas. Entonces, ahora le estoy dando a INSER F7 y aquí veis el listado de los enlaces del sitio, pero también puedo decirle que me muestre, por ejemplo, los encabezados. Y entonces aquí me está marcando toda la estructura de navegación de mi sitio web. Entonces, me hice entradas, luego me hice valorando los nuevos AirPods de Apple, ¿no? Que es el primer artículo que tengo. Si yo pulsos ENTER sobre ese encabezado, mi lector de pantalla me empieza a leer el artículo desde donde está justo el encabezado. De esa manera es como si yo sacara un índice de la página web y puedo ir más rápido. ¿Qué ocurre? Que para que esto sea posible la plantilla de WordPress lo tiene que permitir, lógicamente. Pero luego también las personas que cargan el contenido, si crean subapartados, pues tienen de alguna manera que ir marcando todos esos encabezados, los enlaces y demás. Porque la manera que, por ejemplo, yo tengo de navegar por el sitio web no tiene nada que ver con la que tenéis vosotros, que vais dirigiendo la vista a los apartados que están marcados con negritas, con tipografías diferentes y en función de la estructura visual, pues vais decidiendo sobre qué iconos pulsáis y demás. Bueno, por dar un poco las claves, os digo, si queréis un sitio web accesible. Lo primero que tenéis que hacer es seleccionar o diseñar una plantilla accesible. La verdad que, por suerte, dentro de la comunidad de WordPress hay cada vez más plantillas accesibles, catalogadas como accesibles. Pero, aun así, es un tema que vosotros os voy a dar las claves para que podáis comprobar si reúne unos mínimos o no de accesibilidad. Luego también que tenéis que utilizar las características de accesibilidad que ya ofrece el propio CMS de WordPress. Por ejemplo, WordPress, cuando le decimos insertar imagen, ya nos está preguntando si queremos o no ponerle un texto alternativo a la imagen. Pues, si lo hacéis, estáis potenciando la accesibilidad y si no lo hacéis, estaréis dejando fuera a una persona como yo. Importante también que cuando instaláis plugin de WordPress, busqueis que de alguna manera potencian la accesibilidad. Por ejemplo, yo estuve probando ayer unos plugins para visualizar PDFs y que la gente no pueda descargárselo. Dependiendo del que utilices, el lector de pantalla toma el PDF como una imagen y no te lee absolutamente nada. Entonces, estos son aspectos que, a la hora de decidir cómo se gestiona vuestro sitio web, tenéis que tener en cuenta porque, dependiendo de las decisiones que tomeis, podéis dejar o no a gente fuera. Luego, si tenéis a personas gestionando contenido sobre el sitio web, tenéis que darle unas pautas básicas para que respeten la accesibilidad. Tipo, oye, cuando subáis una imagen, ponerle un texto alternativo, que si no las personas ciegas no lo ven. Y luego también es muy importante que valideis la accesibilidad o bien con conocimiento propio o bien contando con empresas especializadas en temas de accesibilidad. Yo, por ejemplo, trabajo en la Fundación 11 y dentro de la Fundación 11 del Grupo Social 11 hay una empresa que se llama Ilunion Tecnología y Acesibilidad que se encarga de esto. Son personas que tienen diferentes discapacidades y si le dais una web, os van a decir si son accesibles o no lo es. Bueno, ahora vamos a entrar en claves concretas de las imágenes, ya hemos hablado, ¿vale? Cada vez que pongáis una imagen tenéis que decidir si es una imagen decorativa o no lo es. Tenéis que cerrar los ojos y decir, si yo no veo esta imagen me estoy perdiendo algo. Si la respuesta es que sí, tenéis que proporcionar un texto alternativo. Si la respuesta es que no, pues no pongáis nada porque también os digo que me encontré a sitio web con descripciones del tipo bolita roja, bolita verde y entonces todo es como mucho más lento. Cuando hablamos de los enlaces habéis visto que yo saco el listado de los enlaces para poderme mover más rápido a las secciones que me interesan. Aquí tenéis que tener en cuenta que cuando pongáis enlaces no pongáis enlaces del tipo pinche aquí, más info, leer más. Es decir, si por ejemplo tenéis un listado de cinco titulares, es mucho mejor que los titulares tengan fusión de enlace porque ya más o menos te hace un resumen de qué va la noticia a que pongáis el título, la entradilla y luego debajo un enlace de leer más. Porque eso no es bueno porque cuando una persona ciega saque el listado de enlaces va a haber diez enlaces llamado leer más, entonces tampoco nos está dando mucha información. Si queréis aportar información adicional, hay un atributo que además el WordPress cuando inserta un enlace te ofrece añadir información que es el título. Ahí por ejemplo podéis poner si lo que se va a abrir en una ventana nueva, si es un PDF en definitiva, es una información complementaria al texto visible. Importante también el color. El color os cuento que en internet hay una herramienta que se llama Contrax Color Analyzer, que con esta herramienta nosotros podemos pulsar en la fuente y en el fondo y nos dice si la ratio de colores utilizada es suficiente como para que una persona con visión parcial pueda leer ese contenido. Entonces cuando diseñáis vuestras plantillas pues asegurar un poco que la gama de colores que utilicéis pues cumplen con esos mínimos y luego también es muy importante que por ejemplo si diseñáis un formulario no digáis los campos marcados en rojo tienen errores porque hay personas con daltonismo que el rojo no lo ven y mi lector de pantalla tampoco me lo lee. Entonces ahí tenéis que pensar en usar el color pero con una alternativa, es decir por los campos marcados en rojo y con el símbolo asterisco son obligatorios o tienen errores o un poco jugar con esa doble forma de entender ese contenido, teniendo en cuenta que no todo el mundo ve los colores. Contenido audiovisual cuando diseñéis vuestro sitio web con Wordpress importante que el reproductor de vídeo sea accesible ¿vale? porque muchas veces nos molestamos en ponerle subtítulos a los vídeos y demás pero luego si una persona con discapacidad por ejemplo no puede activar con el teclado en la banda de subtitulado pues al final es un esfuerzo que hemos hecho que no llegará a todo el mundo. Por ejemplo, cuento que el reproductor de YouTube se maneja bastante bien y yo he visto algunos reproductores hechos para Wordpress que también se manejan bastante bien y luego tenéis que tener en cuenta que el contenido audiovisual tenga subtítulos para personas sordas y audio descripción para personas ciegas. La audio descripción es aprovechar los silencios o momentos del vídeo en los que no hay nadie hablando para ir describiendo lo que ocurre y que se pueda entender sin ver la imagen. Una alternativa más chapo, más chapucera sería ofrecer una transcripción textual del vídeo y que quien no pueda verlo de alguna manera se descargue ese texto descriptivo del vídeo pero esto ya os digo que tiene que ser la ultimísima opción ¿vale? importante también las tablas de datos y aquí Wordpress tiene mucho que decir y yo por ejemplo en Moodle he visto que cuando insertas una tabla de datos te pregunta ¿cuántas celdas quiere? Es decir, ¿cuántas filas? ¿cuántas columnas? ¿Qué celdas de la tabla tienen función de encabezado? Y esto en Wordpress pues he visto que dependiendo del plugin lo hace o no ¿vale? Que sepáis que eso es importante porque en una tabla de datos no marcamos de alguna manera las celdas que tienen función de encabezado que en html es con th, el lector de pantalla luego no va a saber relacionar cada uno de los datos con los encabezados por eso es muy importante que cuando hagáis tablas de datos esas tablas de datos sean lo más homogéneas posible es decir que no tengan celdas combinadas y demás sino que sean sencillas en estructura y se marquen como digo las celdas que tienen función de encabezado para que el lector de pantalla luego sea capaz de asociarlas. También es importante que utilicemos las etiquetas adecuadas que nos ofrece html5 aquí por lo que veo Wordpress por defecto lo respeta eso que quiere decir que si por ejemplo hay alguien que edita contenidos y quiere marcar un texto en negrita pues se use el estron de html si quiere un texto enfatizado se use la etiqueta m y no nos vayamos a etiquetas desaconsejadas por el estándar puesto que si se utilizan etiquetas desaconsejadas los productos de apoyo no nos van a enfatizar esos textos y luego lo más importante los encabezados ahí obtenéis que asegurar que la estructura visual del sitio web este marcado con encabezado y además muy importante que no se produzcan saltos de nivel es decir el nombre del sitio web tiene que estar como nivel de encabezado uno y luego si tenemos varias entradas pues no nos podemos ir a un nivel 4 porque entonces nos estamos saltando la estructura y luego también es importante que cuando alguien publica contenidos le digamos oye el titular de la noticia va a ser nivel de encabezado uno si luego crea sus títulos utiliza los encabezados de nivel 2 porque si no como digo no estaremos respetando la estructura encabezado importante también que contemplemos la accesibilidad de otros contenidos por ejemplo los formularios yo he visto que los módulos por defectos que trae wordpress para crear formularios son bastante accesibles pero cuando creéis por ejemplo una caja de texto ponerle una etiqueta asociada porque si no luego el lector de pantalla yo me encontraba por ejemplo sitio web que te dice número de cuenta y le ponen la etiqueta número de cuenta a la primera caja pero luego en realidad para poner el número de cuenta estamos utilizando cinco cajas que ocurre que lo correcto es que la primera caja se llame por ejemplo código y van luego en la segunda caja sea la de la entidad es decir que de alguna manera si estamos creando un formulario con cinco cajas cada una de las cajas tenga esa etiqueta alternativa porque si no el lector de pantalla u otros productos de apoyo no lo van a leer importante también que cuando utilizáis las apis para integrar contenido de las redes sociales lo hagáis adecuadamente para que no se cargue la accesibilidad del sitio web y luego que seas consciente que todo el contenido de redes sociales que aparezca en vuestro sitio puede ser accesible o no entonces es mucho mejor eso que que supervise un poco cómo se introduce ese contenido y sino mejor que pongáis un enlace y que te abra directamente la aplicación específica de la de la red social y luego también que se integráis pdf pues que los pdf sean accesibles bueno ya cierro con las conclusiones e intentó ir muy rápido perdonarme pero el tiempo es el que es y además me gustaría que tuviéramos unas pero un ratito para que me hagáis preguntas si lo consideráis no importante es que sepáis que el conocimiento sobre html no está tan extendido como podamos imaginar por eso las herramientas basadas en cms en sistemas de gestión de contenido son muy importantes porque ni los periodistas ni los profesores son mogollón de personas que están generando contenidos para internet que debajo de todo ese contenido hay html pero ellos no saben html por eso quienes programáis un sitio web tenéis muchas responsabilidad en todo esto en asegurar que el gestor de contenido elegido las funcionalidades los plugins respetan el estándar de html y respetan la la accesibilidad en definitiva yo creo que aunque la accesibilidad depende de todos es muy importante que los perfiles más técnicos ayudeis a quienes no tienen tantos conocimientos técnicos porque un periodista de verdad hace lo que puede y si que se está haciendo mucho esfuerzo en que en las titulaciones de periodismo se les hable de html y demás pero al final los conocimientos llegan hasta donde llegan no y bueno deciros que wordpress como base puede contribuir muchísimo a la accesibilidad mucha gente con discapacidad está creando sus sitios web personales basados en wordpress e incluso instituciones como fundación 11 está desarrollando grandes sitios web basados en wordpress por lo que estamos hablando de una grandísima herramienta pero hay que tomar decisiones con consecuencia y saber que todo lo que hay en la comunidad de wordpress no es accesible entonces de alguna manera tenemos que ir verificando no así que bueno esto era lo que os quería contar yo por último quería dar las gracias y dejaron mi datos de contacto para bueno mi usuario de twitter lgperea mi correo contactar arroba lgperea.com y bueno para cualquier cuestión pues estoy disponible muchísimas gracias tenéis alguna pregunta si levantáis la mano que alguien me lo chive porque si no no me entero pues nada cuéntame vale perfecto buenas felicidades por la charla y bueno mi primera pregunta al urde es sobre el programa nvga que hace tiempo que no no lo escucho si la jerarquiza o enfatiza la voz para las negritas a ver todo eso es configurable nvga es un software que lo que hace es ir leyendo el código web en este caso y entonces en función de cómo lo configure el usuario y cosas que lee y que no lee en concreto la enfatización de textos es algo que viene desactivado por defecto aunque el usuario puede elegir si si quiere esa información o no es igual con los textos alternativos por defecto el lector de pantalla nvga cuando hay una imagen que tiene texto alternativo te lo lee y cuando hay una imagen que no lo tienes se la salta pero también el usuario puede decidir que aunque no tenga texto alternativo le avise de que hay una imagen ahí y en ese caso te le la ruta no hay veces que te le images barra logo bueno pues ya deduce que es un logo no no es lo correcto pero que sepáis que todo eso es parametrizable el urde es muchas gracias nada me dedico al mundo seo y el texto alternativo habitualmente se utiliza un uso tanto peculiar que es repetir la palabra clave de forma insistente y tú cuando notas cuando encuentras una web que intenta postinar una palabra clave en particular en base a repetir los encabezados a repetir el texto alternativo incluso a repetir el títel en los enlaces aunque no tenga valor seo tú notas cuando alguien está intentando posicionar una web pues mira es que hay un tema que no he dicho y es que lo bueno del posicionamiento seo es que hay web que son bastante accesibles gracias a que quienes las han diseñado no han pensado en la accesibilidad pero sí han pensado en el posicionamiento seo entonces nosotros preferimos información de más que de menos y un tema que siempre digo es que google le ciego como yo y entonces google te va a posicionar el sitio web mejor si las imágenes tienen el texto alternativo los encabezados están bien etiquetados los enlaces tienen ese atributo title que te da más información así que personalmente prefiero un sitio web con esas características seo a lo contrario muchas gracias por la charla comentaba en la anterior working en chiclana con otros chicos que también hace accesibilidad vissen sanchi que mientras que ha habido un tiempo en que la web semántica ha ido ganando fuerzas y se respetaban mucho los los encabezados se respetaban mucho estas cosas sí que desde hace un tiempo yo vengo observando y él coincidían que en que se está dejando otra vez un poco de lado eso y hay muchos diseñadores que están volviendo a recurrir a los encabezados con criterios de diseño y de semántica tú ha observado algo así por desgracia sí y además pasa con la web y pasa con las aplicaciones móviles con estas con estas herramientas que hay para crear aplicaciones en paralelos para plataformas como androids y ellos con todo el sistema de crear aplicaciones que en realidad son web en bebidas no y al final son herramientas que el usuario como no programa pues él pone un nivel de encabezado por ejemplo uno y si ve que la letra es muy grande pues en vez de modificarla con la ccs que sería lo correcto pues dice pues pongo el nivel 3 y eso sí que por desgracia estamos observando que que es así muchas gracias y quería preguntarte sobre los área attributes que es algo que está ahí técnicamente y que tengo la sensación de que se usa muy poco y la verdad es que como desarrollador no tengo ningún criterio para saber si es útil si no se aporta entonces me gustaría saber a ver nosotros nos basamos un poco en la premisa de cuando no hay más remedio vamos a utilizar web área es decir por defecto creemos que el html 5 de por sí si se utiliza bien puede ofrecer los mínimos que garantizan la accesibilidad de una web pero hay veces que hay que hacer determinadas cosas con con área y y desde luego eso sí que está muy testado hay web en las que se informa de cada uno de esos atributos el comportamiento que tienen con los diferentes lectores de pantalla y demás o sea que si hay que usarlo se puede usar pero por defecto yo intentaría decir creo que tampoco es 100% necesario gracias por la información y la expresión y una pregunta sobre wordpress y la acciabilidad aquí a la derecha la la accesibilidad de wordpress en los años que lo ha usado está mejorando y como se llama en el está mejorando y está mejorando más rápido pues yo creo que está mejorando además de hecho os digo que que ya no sólo mejora para el usuario sino que incluso yo tengo el rol de gestora de contenido y puedo mantener bien los contenidos del sitio web o sea que ahí yo la verdad es que tengo muy buenas experiencias con las comunidades tipo wordpress porque veo que se pueden conseguir productos muy potentes y como ahí cada uno aporta los conocimientos que tiene pues siempre hay personas que aporta la accesibilidad lógicamente es lo que os decía no podemos decir que todo es accesible hay que utilizar los diferentes componentes plantillas plugin y demás con cierta precaución pero por suerte se encuentran pues bastantes contenidos y herramientas accesibles nada nada un placer