 Venga, buenas tardes, é unha hora un poquito difícil, sé que estáis cansados, pero bueno, vamos a hablar de accesibilidad e, en concreto, cuándo os test automáticos poden non ser suficientes. Para mí, cuándo penso na accesibilidad, eu penso que é como un árbol, como unha planta, porque? Porque a accesibilidad é unha parte de la osabilidad e a osabilidad é unha parte de la ergonomía, pero também a accesibilidad depende, entre outras cosas, do conteúdo, do diseño e do desenvolvimento. E as plantas para que crescan bien, hai que cuidarlas e hai que darles mucho mimo e mucho cariño. E como se cuida a accesibilidad, por lo primeiro é respectando os estándares de programación. E o segundo, siguendo unhas guías de contenido accesible, en súversión 2.1 e todo esto, quén lo controla é o W3T, é a organización que controla os estándares de programación web. É o WordPress accesible? Pois sí, en WordPress están comprometidos en respetar lo máximo posible, as normas de accesibilidad. E isto não só significa que a gente pueda leer una página web, sino que também sean capaces de mantener sus propios sitios, pero claro, ojito, porque que usemos unha herramienta que a priori é accesible, não nos garantiza que o resultado é accesible, porque podemos, sin querer, meterla a pata. Volvendo a las normas de accesibilidad, a WCAG 2.1 está dividida en 4 grandes principios. Estos principios dán pie a 13 pautas. Estas pautas dán pie a 78 criterios de conformidade que son los que se deben de evaluar. E, en cada criterio, há ejemplos e técnicas de como se hacen as cosas bien o como se hacen mal. E estos son máis de 550 técnicas. Normalmente, quando llego a este punto, a gente me pregunta que esto como se revisa. E já me hacéis así una cara de... E a minha resposta, a primeira sempre, é que se hace a mano, e então já a cara ha un cambio un poquito máis. En este punto, mucha gente se cabrea, lanza a mesa, a tomar o vento. Pero bueno, vamos acalmarnos. Ponemos a mesa bien, e abrimos o ordenador. Porque hay muchas herramientas e aquí tenis un recopilatorio de diferentes herramientas e conjuntos de materiales que os poden ayudar a respetar las normas de accesibilidad. De todas formas, nos hacen falta. Por que? Porque seguro que todos tenemos esta. ¿Quién cono este icono? Vale. Para quien no lo conozca, está integrado un Chrome. En las herramientas de desarrollo, un poquito escondidito, hay una pestañita de auditorías. Podéis evaluar la accesibilidad, las buenas prácticas, el rendimiento, etc. de la web. Así de todo, hay otras dos máis que a mi me gustan mucho. Y wait. De hecho, se non lo tengo mal entendido, a versión de Lighthouse deriva de Axel. E como se entra esto? Entrais en una página web, clico en el botón derecho, abajo, Inspeccionar. Se os abre, le dais a auditoría, haces las cosillas que tiene que hacer a detectar las. E os dao una puntuación. 98 e nos indica 4 fallitos. 4 fallitos e encima es que non lo resalta. E os decía que esto se tenía que hacer a mano. E con Chrome lo podemos hacer. E nos quedamos así, anbelívelu. Pero las herramientas automatijadas suelen tener agunos problemillas. Fijaos, se miramos o código en la imagen, se le ha añadido un atributo alta. De texto alternativo. Para el evaluador automático es correcto. Hay una imagen, tiene un atributo alta. Pero, nosotros ya podemos empezar a discutir se ese atributo alta tendria que tener un contenido o no. Porque es una imagen, en la imagen, hay texto, pero es imagen. Según las normas, ahí tendria que haber una descripción del texto. Pero también lo podemos interpretar de outra manera y considerar que la imagen es máis bien ornamental o que duplica a información que ya ofrecemos en la página. Entonces, también podría ser aceptable e dejarlo como está. Así que para ver cuándo no nos podemos fiar implementado, he desarrollado una piquenita página e le he hecho unas pantas perrellias. E xemplo 1. Lista con tres elementos visitados en apenicio. Barra xemplo 1. Preferencia fuera de vista. É un texto de portátil. Gráficolo tito de Vicente. He venido a hablar de accessibility web. Espero que la charla te resulte interesante. Me gustaría saber tu opinión. Por favor, mándame un e-mail con tus comentarios. Enlace enviarme un e-mail. Visitado enlace volver a página de emicio. Elector vosnu清é o contenido que aparece. Enviarme un e-mail de enlace. E Con el arte claro podemos ir navegando por los enlaces. Aplicaciones en ejecución. Y también con el rato podemos ir seleccenando seleccionando os diferentes enlaces e destacar quando o ratón está encima. Se evaluamos esta web, no sale, no sale bien, senão não lo hubiera puesto. Ahora é quando empezamos con las carrerías. Visitado enlace, ejemplo 2. Ejemplo 2. Región título encabezado a nivel 1, evaluación de la accesibilidad. Encabezado a nivel 1 quando os testa automáticos son insuficientes. Lista con 3 elementos se estás aquí. Barra visitado enlace e inicio. Barra ejemplo 2 ocultando la sexia afuera de lista. Visitado enlace e volvendo a página de inicio. Menú submenú. Ejemplo 2 documento. Que va a salir? Éxito também sale bien. Senão não lo hubiera puesto. Aqui que he hecho. En el HTML añado unha classe e através de CSS le digo display non. Como éso es correcto, el validador considera que es correcto. Me cargado unha parte del contenido da web. Ejemplo sé que es tonto, pero probado a hacer esto con la etiqueta body. Os cargáis completamente da web e es accesible. Resenlazo. Ejemplo 3. Región título encabezado a nivel 1, evaluación de la accesibilidad. Encabezado a nivel 1 cuando os testa automáticos son insuficientes. Lista con 3 elementos se estás aquí. Barra visitado enlace e inicio. Barra ejemplo 3 ocultando la sexia análector de pantalla afuera de lista. Visitado enlace e volvendo a página de inicio. Que ha pasado? Se asalto todo esto. A ver, se é accesible. Também. En esta ocasión que é o que é hecho? Non toca o CSS. Simplemente, con HTML cojo e le digo que o oculte al lector de pantalla. A un usuario que depende del lector de pantalla le acabo de generar un problema de accesibilidad. O evaluador automático do Chrome dice que é perfecto, pero axe nos dice que hai unha violación de la norma porque hemos ocultado unha parte del contenido que contiene un elemento sobre o que podemos poner o foco de teclado. Ya hai unha pequena discrepancia entre los dos evaluadores. A ver, o 4º... Lista con 3 elementos, enviarme unha e mail enlace. A ver que nos dice Chrome. Pois também é accesible, pero no sé o ratón, ni onde está o foco. Ni o rover. No sabemos nada. Que é o que é o que é o que é pasado? Que é putea un pouco mais al usuario, quito os estilos, quando nos passamos por o Cema con o ratón, quando selecionamos abo o rato xe xe xe o rato, Xima con o ratón, quando selecionamos algo con el teclado, e encima le digo que non hay cursor, que se cargue o ratón, pero é accesible. Comento. Encavezado nivel 1, evaluación de la accesibilidad. Ejemplo 5, enlace. Ejemplo 5. Región título encavezado nivel 1, evaluación de la accesibilidad. Encavezado nivel 1, cuando os testa automáticos son insuficientes. Lista con 3 elementos estás aquí, va a visitado enlace inicio, va a ejemplo 5, jugando con la opacidad fuera de lista. Encavezado nivel 2, hola. Soy Vicente. Gráfico lobo tipo de Vicente. He venido a hablar de accesibilidad web. Espero que la charla te resulte interesante. Me gustaría saber tu opinión. Por favor mándame un e-mail con tus comentarios. Enlace, enviarme un e-mail. Visitado enlace, volver a la página de inicio. Aplicaciones en ejecución. Non se ve lá. Lista con 3 elementos inicio visitado enlace. Enviarme un e-mail enlace. Volver a la página de inicio visitado enlace. Men... E isto que queréis, será accesible o non será accesible? Pois claro que era accesible. E agora, se queréis contestar, es como aceileña tu vida. Isto que va a ser accesible. De hecho... Ah, no, aquí no? Sim, bueno. Que es lo que he hecho? Simplemente he cogido e por CSS... Bajo la opacidad. Bajo la opacidad de todo, el contraste sale mal. Pero el evaluador automático no se da cuenta de que he modificado o color que se muestra. Entonces para él, es correto. E en cambio, Axe nos volga a decir... No, isto no llega ao contraste. Este evaluador sí que se da cuenta. Chrome ha fallado e Wave ha fallado. E ahora este último ejemplo. Región título encabezado nivel 1, evaluación de la accesibilidad. Encabezado nivel 1, cuándo los test automáticos son insuficientes. Lista con 3 elementos estás aquí. Barra visitado enlace e inicio. Barra ejemplo 6, asignando al texto e color del fondo fuera de lista. Encabezado nivel 2, hola, soy Vicente. Graficólogo tipo de Vicente. He venido a hablar de accesibilidad. Espero que a charla te resulte interesante. Me gustaría saber tu opinión. Por favor mándame un e-mail con tus comentarios. Enlace enviarme un e-mail. Como podéis ver... Un lector de pantalla es un poquita veces repetitivo e tedioso. Está sí que no va a ser accesible. Aplicaciones en ejecución. He puesto o texto en blanco. No sabe a equivocar, verdad? Menú submenú. Ejemplo 6 documentos. A ver que pasa. Pues, es accesible. E ahora, como he puesto todo el texto en blanco e que no de problema. Esta vez, he especificado el color de una forma atípica. Los colores os especificamos por... O co-digo hexadecimal o por unas palabras. White, black, green, red, como queráis. Pero, hay un conjunto de palabras que se refieren a la interfaz de usuario. E, en concreto, window se refiere ao color de fondo de la ventana. Neste caso, era blanco. Igual que o fondo de la web, o texto, no se ve. Pero, para os evaluadores, para Lighthouse e AXE, era accesible. En cambio, Wave, en esta ocasión, sí que se ha dado cuenta que había 5 horrores de contraste. Entonces, sirve la evaluación automática? Pues sí, es muy útil, muy, muy útil. Pero, es solamente un paso máx en la evaluación de la accesibilidad a un sitio web. Podéis decidir cuándo echáis manos destos evaluadores. Pero, eu, mi orden, viene a ser este. Primero, eche manos de los evaluadores. Los errores máx tochos me los va a encontrar. Después, cojo e hago una revisión de todos os elementos. O co-digo me lo voy leyendo a ver se tiene sentido o non tiene sentido. El tercer paso, navegación por teclado. Se puedo llegar a todos os sitios e seguendo o orden que eu veo na web, correto. E, ya, por último paso, el lector de pantalla. E, isto era o que os queria contar. Aí me tenéis disto. E, tengo que anunciar la primera vez que aparezco en un evento como embajador de Paxel. Isto ha sido algo que ha pasado esta semana pasada e que, bueno, estoy muy contento, muy orgulloso e espero que en próximos eventos ya podamos hablar sobre Paxel e sus produtos.