Gestión de productos: herramientas para mejorar la accesibilidad del producto

1. Introducción: Cuando se trata de desarrollar para la web, lo que me encanta absolutamente es que es para todos. No necesitas tener cierto teléfono móvil, no necesitas tener cierta computadora o una conectividad gorda, básicamente, alguien está invitado a hacer cosas en la web. Me enamoré de la web cuando trabajaba en la radio, y me di cuenta de que cualquiera puede convertirse en editor sin tener que gastar dinero en ella. Quería asegurarme desde el primer día de que la web esté ahí para todos, independientemente de la capacidad, independientemente de dónde estés en el planeta, independientemente de tu configuración y de qué computadora tengas, quiero asegurarme de que pueda usar mi habilidades como ingeniero para asegurarse de que los productos estén disponibles para todo el mundo por ahí. Porque cuando hacemos eso, obtenemos mucho más usuarios y esa es una idea muy sencilla. Hola, soy Christian Heilmann. Soy Gerente Principal de Programas en Microsoft y mi trabajo es asegurarme de que nuestros productos sean accesibles para todo el mundo, y de eso vamos a hablar hoy. La accesibilidad no es esta cosa aterradora, problemática que es un requisito legal, sino muchas veces solo sentido común y asegurándose de que el producto pueda soportar cambios que la gente necesita hacerle. Descubrirás que las personas tienen necesidades diferentes y tus necesidades cambian a lo largo del tiempo también. Si me quito las gafas, uso el producto de manera diferente a cuando tengo mis gafas puestas . La discapacidad no es un estado puntual. Se trata de una báscula deslizante que cambia con el tiempo y nuestro producto debe ser lo suficientemente flexible como para soportar realmente esto. En esta clase, vamos a hablar de accesibilidad más allá cumplimiento y eso significa que estamos construyendo cosas que son accesibles pensando como usuarios y no solo pensando en lo que necesitamos hacer para ser accesibles. Vamos a echar un vistazo a algunos de los sistemas automatizados que atropellan tus productos y decirte dónde están las partes problemáticas y vamos a hablar de cómo eso puede ser un falso positivo. Después vamos a cambiar de marchas e ir al navegador y usar el producto como lo haría un usuario, y cambiar algo de la apariencia y sensación, para que realmente sepas qué fundas de borde necesitas cubrir. Y vamos a utilizar las herramientas de desarrollador incorporadas en el navegador para averiguar dónde están las partes más problemáticas de su producto y cómo solucionarlas. Esta clase está cerca de mi corazón porque el día a día tengo que trabajar con accesibilidad para los productos en Microsoft, y a veces es una batalla empinada. A veces es difícil de hacer. A menudo es porque la gente no entiende que la accesibilidad significa hacer cosas por los humanos y descubrir los problemas que los humanos tienen con su producto y no solo ser conformes. Al final de la clase, te irás con la idea de que hay mucha gente por ahí que ve el producto de manera diferente a tu. Hay cosas que puedes hacer para asegurarte de que esas personas no estén bloqueadas y se conviertan en posibles clientes y usuarios adicionales de tu producto. También descubrirás que ya vienen muchas cosas con el navegador que estás usando que te permiten probar estas necesidades y asegurarte de que tu producto que construiste esté disponible para la gente de ahí afuera. Esta clase espero sea para cualquiera que haya estado pensando en la accesibilidad y haya estado construyendo productos accesibles con un equipo de desarrollo y con un equipo de pruebas, pero no haya tomado medidas por sí mismos. Lo que digo aquí es que como desarrollador, al tomar las habilidades que aprendes en esta clase, realidad harás mucho más fácil trabajar con el equipo legal, trabajar con el equipo de desarrollo y trabajar con el equipo de pruebas porque habrás hecho lo correcto antes de que realmente recuperes la prueba y tienes que rehacerlo y arreglar las cosas de nuevo. Para ponernos en marcha, construí un proyecto que es un sitio web que tiene algunos problemas de accesibilidad, algunos de ellos no obvios. También creé una versión fija de ese sitio web la cual también puedes descargar y puedes echar un vistazo a lo que he hecho para solucionar estos problemas. Por favor acuda a los tableros de discusión después y discuta esta cosa. desacuerdo conmigo. Es posible que encuentres una mejor manera de solucionarlo, o tal vez encuentres que hay problemas con las soluciones que tienes en tus propios productos y otras personas pueden ayudarte. 2. Accesibilidad y por qué es importante: En esta primera lección, vamos a hablar de qué es la accesibilidad y por qué importa. Hay muchos mitos sobre la accesibilidad. Hay muchos temores sobre la accesibilidad. A veces se ve como algo que podría ser automatizado, cosa que no lo es. Queremos asegurarnos de que estamos empezando con el pie derecho entendiendo la accesibilidad y no sólo tratando de lograrla. Cuando se trata de accesibilidad web, gente comete simples errores que tienen consecuencias desastrosas. Uno de los mayores problemas que encontramos ahí es que seguimos teniendo medios como imágenes sin textos alternativos. Parece que no es un problema. La gente puede ver la imagen. Pero si eres ciego, no puedes ver la imagen y no sabes de qué se trata la imagen. Pero si tiene un texto alternativo, eso se traduciría para ti. Es bastante sencillo hacer lo correcto. Simplemente es muy fácil olvidarlo. Nuestra propia experiencia no es lo que tienen nuestros usuarios finales y lo que nadie más que nosotros tenemos. Al igual que puedo leer el sitio web alemán, probablemente no puedas. Puedo leer un sitio web francés, probablemente otras personas no puedan leer eso, así que necesitan que se traduzcan para ti. Estas necesidades son diferentes a las tuyas. Se puede ver, eso es genial. Ponga ahí un texto alternativo para la gente que no puede ver. Tienes un video por ahí que en realidad tiene un gran sonido y en realidad tiene buenas imágenes pero si alguien tiene dificultades auditivas, probablemente no sepan qué está pasando. Asegúrate de que tus videos tengan subtítulos. Te encontrarás que eso es algo de lo que también puedes beneficiarte. Si estás, por ejemplo, en un pub y ahí arriba hay un televisor y la música está volando fuerte, realmente aprecias esos subtítulos porque entiendes el programa sin tener que decirle al barman que gire fuera de la música y sube el televisor, lo cual no harán por ti. la misma manera cuando enciendes subtítulos en películas extranjeras, probablemente puedas aprender mejor el idioma de esa manera. Poner ese poco esfuerzo extra en asegurarse de que los usuarios finales con capacidades diferentes a las tuyas puedan consumir sus productos, en realidad multiplica a sus usuarios finales. Se asegura de que todos puedan usar el producto y a menudo es solo una cosa simple de poner ahí, como un texto alternativo para una imagen, como un título para un video, o asegurarte de que tu producto tenga un tamaño de fuente eso no es realmente minúsculo, pero en realidad agradable de leer incluso en un teléfono móvil al sol. Cuando se trata de tácticas, creo que lo primero en pensar es ponerte en los zapatos de tus usuarios finales. No solo uses tu producto en la gran computadora que tienes con una gran resolución y la rápida conectividad a Internet, hazte un mal teléfono móvil con una mala conectividad, te quedes en el bosque y mira tus productos ahí. Entonces te darás cuenta de que no es tanta alegría esperar esa animación de 50 megabytes antes de que realmente puedas hacer algo. Es importante que entiendas las necesidades de tus usuarios desactivando las imágenes de vez en cuando. Por ejemplo, apaga el sonido de un video o una animación y date cuenta, ¿ sigue teniendo sentido? Puedes configurar tus entornos de desarrollo para asegurarte de que cuando olvidas, por ejemplo, un texto alternativo o una imagen, te dé una línea ardiente y te diga que eso es un problema. Es molesto tener problemas mientras te desarrollas, pero al mismo tiempo, es mucho menos problemático que cuando se trata de tus usuarios finales o de tus probadores y pasas por otra ronda más de construir la cosa. Para ponerte en el estado de ánimo adecuado para esta clase, quiero que eches un vistazo a las características de accesibilidad que vienen con los sistemas operativos y navegadores ya por ahí, que la gente usa para cambiar tu producto y en realidad necesita cambiar tu producto también para que puedan consumirlo. Esto comienza con cambiar el tamaño de su fuente en sus sitios web hasta un 400 por ciento. Parece desalentador, pero esto es lo que la gente necesita. Asegúrate de que tu producto siga funcionando de esa manera. También puedes echar un vistazo a algunas de las nuevas características de los sistemas operativos como el modo oscuro y el modo de luz. Hay un modo de alto contraste en Windows que es utilizado por hasta el seis por ciento de los usuarios o Windows, hay unos pocos millones de personas por ahí. Verás que tu página web se ve completamente diferente. Probablemente no sabías de eso pero es algo a considerar. El otro día, por ejemplo, tenía un teclado que me rompió. Yo uso la forma de hablar con la computadora para empezar realmente a dictar mis textos. Eso es algo que mucha gente necesita ahí fuera también. En el pasado, esto significaba que tenía que comprar algún software extra que se quedó anticuado, hoy en día solo viene con sistemas operativos y puedes probarlo tú mismo. Echa un vistazo a tu sistema operativo y tu navegador y ve qué puedes encender y apagar que marca la diferencia para las personas con discapacidad y te hace entender sus necesidades mucho mejor también. 3. Herramientas de accesibilidad automatizada: Echemos un vistazo a una de esas herramientas que dan un informe automatizado y veamos hasta dónde nos lleva. Este es un producto llamado Accesibilidad Insights, que también estoy usando todos los días en el trabajo. Se trata de una extensión de navegador que puedes instalar y te da todas las ideas sobre lo que está pasando en accesibilidad y qué problemas tiene tu sitio web. Acudes a una página web que tiene problemas de accesibilidad y quieres probar, tienes este pequeño ícono aquí que te permite correr un FastPass sobre él. Una vez que haces eso, en realidad obtienes un reporte que te muestra todos los temas que encontró y en realidad te dice dónde en la página también están. Te explica que en realidad hay instancias fallidas, siete de ellas. Hay un tema de contraste de color. Hay un problema de alt de imagen donde las imágenes no tienen texto alternativo. Hay un problema de etiqueta donde un formulario rellenado no tiene etiqueta. También te muestra en la pantalla dónde están estos problemas y lo que realmente significan. Si amplias la información aprenderías más información sobre el contraste de color donde puedes aprender dónde esto es un problema, qué estándares web lo están definiendo en realidad, eso también es un requisito legal, y luego en realidad qué parte de la página tiene ese problema y cómo solucionarlo. Esto es genial porque esto no sólo te está dando un reporte, sino que también te dice los siguientes pasos. Pero en este momento, es importante saber que estas pruebas automatizadas solo obtienen una parte de la página. Ellos ven la página o experimentan la página de una manera y tus usuarios finales experimentan la página de muchas maneras. Eso es algo a considerar. En realidad, las computadoras no pueden decirnos cuándo algo es accesible. Necesitas interactuar con la página como hacen tus usuarios finales. Así es como realmente te enteras de los problemas de accesibilidad. Webhint es también un proyecto de código abierto que en realidad prueba por problemas de accesibilidad, problemas de rendimiento, etcétera y así sucesivamente. Tiene una extensión de navegador, pero donde la uso es en realidad más interesante, que está dentro de mi editor. Para probar algo con Accesibilidad Insights, tienes que ir y desplegar el sitio web y luego probarlo allí. Este te dice mientras estás construyendo algo, que algo va mal. Por ejemplo, el elemento de entrada que no tiene una etiqueta aquí tiene una línea astuta debajo de ella en este momento. Cuando vuelvo eso en mi editor, realidad me dice que cada elemento de entrada necesita una etiqueta. Ni siquiera cometeo los errores que tengo que probar más adelante al tener esta extensión dentro de mi editor de código de Visual Studio. Instala esos dos y estás bien en el camino hacer realmente algunas pruebas de accesibilidad adecuadas. 4. Prueba de accesibilidad del color y el texto: En esta lección, vamos a hablar de accesibilidad de texto y color en nuestro sitio web y vamos a aprender que lo que vemos en pantalla no es lo que otras personas ven y a veces es bastante desalentador ver cómo la gente usa nuestros productos, pero es importante que los construyamos, que también funcionen para estos entornos. Echemos un vistazo en nuestro sitio web y nuestro sitio web de pruebas ahora mismo y pateemos las llantas y veamos dónde realmente encontramos problemas con la accesibilidad del color. Lo primero que cuando pruebo cualquier sitio web por problemas de accesibilidad es subir el tamaño de la fuente. Esto se hace bastante fácilmente con Command plus o Control plus. La mayoría de las veces probablemente habrás encontrado que así en el pasado, subes hasta el 125 por ciento y estás contento de que todo funcione, pero eso no es suficiente. La mayoría de los usuarios finales por ahí que realmente necesitan un zoom van hasta 400 por ciento. Ese es en realidad un requisito legal a partir de julio de este año de 2021 que hay que ser accesible con factor de zoom del 400 por ciento. Eso significa que solo puedes desplazarte en una dirección y no necesitas desplazarte en dos direcciones para tomar lo que está pasando con el sitio web. Si le echas un vistazo a este sitio web en este momento, realidad ferias bastante bien en ese factor de zoom. Pero algunas de las cosas que se ven bastante cool en el factor de zoom normal se vuelven realmente molestas en esto. Al igual que tenemos esta animación en la navegación aquí que se ve bastante guay si estoy en mi modo de zoom normal, pero es realmente súper molesto una vez que realmente me meto en este modo 400 por ciento. También cuando hago clic en todas estas cosas y suavizo esto se desplaza hacia abajo, cual es una cosa realmente genial de hacer en CSS en este momento. Pero en un modo del 400 por ciento, eso en realidad es más molesto que cualquier otra cosa. Otra cosa que me gusta hacer es realmente cambiar el tamaño de la pantalla y asegurarme de que todo fluya bien. Para eso, abro las herramientas de desarrollador y lo primero que hago es simular un dispositivo de teléfono móvil. Esto es algo que es genial de todos modos, porque la mayoría de los usuarios finales por ahí tendrán un dispositivo móvil. Después podrás ver cómo se ferias tu página web. Ya puedes ver aquí que el encabezado ahora está en dos líneas y se superpone a otros elementos. Eso ya es feo, pero no un tema de accesibilidad. Pero si empiezo a desplazar la página, de repente mi encabezado fijo que se ve genial en resolución normal ahora realmente superpone el cuadro de búsqueda y eso significa que en realidad no está funcionando. Probar su sitio web en diferentes resoluciones también encuentra esto. También puedes armar eso si no simula un teléfono móvil, sino solo un diseño receptivo y subir el tamaño de la fuente, realidad encontrarás que también hay todos los temas diferentes en ese entorno. Eso es lo primero que hay que hacer para ver si tu producto realmente está disponible para personas con necesidades diferentes. En este caso, las personas que realmente necesitan un zoom del 400 por ciento. Son más personas de las que crees y en realidad deberían estar usando tu sitio web, no deberías bloquearlas. Lo siguiente a considerar es realmente contrastar y ver si tienes suficiente contraste de color en todos los elementos que tienes en tu página. Para hacer eso, hay dos maneras. Una de las formas es ir en realidad a la pestaña Temas y los temas de aquí arriba aparecen bajo este pequeño ícono. Dice que son siete números en la página. Si haces click en esa, descubrirás bajo otra que básicamente hay dos cosas que no tienen suficiente contraste, dos elementos. Se hace clic en ellos y se puede ver que es una LI.High, que se destaca ahora en la pantalla aquí también. Te muestra que el contraste de color no es lo suficientemente bueno para esto. Tenemos que hacer algo para hacer el contraste de color ahí. El otro es una p, que está todo el camino hacia abajo a pantalla. Para ir a ese, puedes ir a este menú aquí y decir desplazamiento a la vista. De esa manera ves que en realidad es el pie de página aquí abajo. Si quieres solucionar estos problemas, si quieres solucionarlos en el propio navegador, eso en realidad también está incorporado. Es algo que mucha gente no sabe. Si vuelves a la p aquí, encuentras que hay un fondo, un color de primer plano. Si haces clic en el color de primer plano, verás en el recolector de color hay un reporte que la relación de contraste es 365. Esto no es lo suficientemente bueno y en realidad tiene esta pequeña flecha junto a ella diciendo que no es lo suficientemente buena. Puedes seleccionar ése ahora mismo. En el recolector de color, obtienes dos líneas para decirte lo alto que debes ir para asegurarte de tener suficiente contraste. También puedes ser perezoso como yo y solo tienes que hacer clic en uno de estos colores aquí que en realidad te son recomendados. Si cambias a esa, ves que el pie de página ahora tiene una mejor coloración y ese es en realidad un color válido con suficiente contraste. El navegador no sólo te dice en el reporte que algo está pasando, sino que en realidad puedes usar la herramienta directamente para arreglarla y luego volver a tu CSS, poner otro color y asegurarte de que la accesibilidad se da para el ajuste de contraste de la misma. El panel de temas nos muestra problemas obvios que hay, pero sólo ve el sitio web en un estado. En realidad no reconoce que la gente puede hacer cosas diferentes a la página web para tener diferentes estados. Ahí es donde entra otra herramienta que se llama el inspector. El inspector es esta pequeña cosa de flecha de aquí arriba. Si ahora me muevo por la página, me da toda la información sobre las diferentes herramientas. Me da las dimensiones , me dice qué es. Vamos a volver a eso en otra lección. También me muestra el diseño de la misma. Si tiene problemas de diseño realmente geniales que puedes encontrar e inspeccionar allí también. Pero lo que es más importante, en realidad me dice también los problemas de color de algo. Me muestra que el contraste de éste es lo suficientemente bueno. Pero el contraste, por ejemplo, en el elemento que miramos antes que también el panel de temas reportado no es lo suficientemente bueno. En lugar de conseguir una marca de verificación, obtengo este signo de exclamación. El problema es, sin embargo, que el inspector sólo vuelve a ver un estado del mismo. Cuando tomas por ejemplo, la navegación aquí, dice que este azul oscuro y blanco está totalmente bien, hay suficiente contraste. Pero si recuerdas usar el sitio web, existe este estado de vuelco que en realidad lo convierte en un color diferente. Ese color diferente, no sé si es accesible ahora o si tiene suficiente contraste, porque en cuanto enciendo al inspector, ya no lo activa. Se puede solucionar mediante el uso de la simulación de estado en las herramientas de desarrollador. En cualquier elemento se puede activar esa simulación de estado. Se puede decir, por ejemplo, ¿cómo se ve si me cierro sobre él? Ahora tiene el estado flotante sin que tenga que pasar el rato sobre él con mi ratón. De esa forma puedo usar al inspector para averiguar si tiene suficiente contraste. Si haces clic en él ahora mismo y vas al recolector de color, aprendes que la relación de contraste no es lo suficientemente buena y debes escoger un color diferente. Esto es interesante a la hora de interactuar con diferentes elementos en la página web. Pero, ¿qué pasa si los usuarios realmente tienen una forma diferente de mirar el sitio web? uno de ellos se le llama el panel de renderizado. En realidad puedes encender eso yendo al menú punto-punto, ir a más herramientas y renderizar. De esa manera en realidad puedes encenderlo ahí abajo. Hace todas las cosas hardcore cool para las pruebas de rendimiento. Pero lo que es más importante, si te desplazas todo el camino hacia abajo, puedes simular diferentes modos del sitio web de esa manera. Ahora, tengo un modo oscuro aquí en mi computadora porque me gusta el modo oscuro como la mayoría de la gente hoy en día, pero otras personas tienen un modo de luz. Normalmente iría al sistema operativo, convertiría mi sistema operativo en modo de luz y vería cómo vería la gente el sitio web. Pero esta simulación en el dolor de renderizado te permite hacer eso de una manera más sencilla. Ahora puedes ir al esquema de color preferido y convertirlo en luz. Por supuesto, algunas de las cosas que pensamos que estaban bien podrían no estar bien más. Se puede ver que aquí abajo donde el contraste para el amarillo y el rojo estaba totalmente bien en modo oscuro, pero en modo luz ya no lo es o eso es lo que estoy asumiendo en este momento. Pero de nuevo, aquí es donde el panel de temas puede ayudarme. Ahora voy y simulo el modo de luz y luego recargo la página. Ves que tenemos muchas más cosas que en realidad están teniendo un problema de contraste de color de las que teníamos antes. Antes teníamos dos elementos, y ahora nos dieron seis elementos porque cambiamos a otro modo de la página web. Nuestro esquema de colores, nuestro tema de luz necesita ser probado para problemas de accesibilidad y color también. Este no es el final porque los usuarios tienen todos los problemas con sus ojos en los que queremos asegurarnos de que también trabajemos. En las Herramientas de Desarrollador, tienes una cosa llamada emular deficiencias de visión, que permite ver el sitio web como personas con diferentes deficiencias de visión verían el sitio web en este momento. Lo primero que quieres probar es la visión borrosa. Esto es como si mis gafas estuvieran sucias o el sol brillando en mi teléfono móvil. Puedo ver de inmediato que aquí hay algunos problemas, como el encabezado se ve emparejado en este momento, esa sombra de gota, que se ve bastante cool cuando puedo verlo correctamente. En realidad no está ayudando a la causa sino obstaculizándola. También los tamaños de fuente podrían ser en realidad no tan grandes como quiero que sean para ser adecuadamente utilizables. Eso es algo que la visión borrosa ya te da. Entonces también puedes encender diferentes emulaciones como, diferente ceguera de color como protanopia, deuteranopia y así sucesivamente y así sucesivamente. De repente te das cuenta de que el verde, el amarillo y el rojo no tienen sentido porque no todos los ven como verdes, y rojos, y amarillos. También puedes apagar todos los colores para ver si en realidad hay suficiente contraste en todas las cosas cuando la gente no puede ver colores en absoluto. Esas son solo algunas formas de cómo empezar. Ahora es tu turno. Te mostré algunas cosas como solucionar algunos problemas. Echa un vistazo, por ejemplo, a ese rojo, verde y amarillo, lo que podrías hacer al respecto. Haz un poco de redimensionamiento, descubre algunos problemas más. Hay más temas en ese sitio web en los que quizás no hayas pensado aún cuando se trata de colores y texto. Tú ahora qué hacer, haces clic en la pestaña de temas y en realidad te da la información de los temas. En realidad puedes usar el inspector y puedes usar la simulación para probar cosas. Puedes hacer eso en cualquier producto por ahí, realidad productos que no están en la web, esto se ejecuta en tu máquina local. Es una manera fácil para que empieces a asegurarte de que todos los colores que has elegido no solo sean bonitos, sino también accesibles. 5. Prueba de accesibilidad a la interacción: En esta lección, vamos a hablar de interacción con un sitio web y asegurarnos de que somos accesibles. Hay muchas maneras en que las personas interactúan con tu sitio web. El ratón es el más común más probable, pero también hay usuarios de teclado, hay gente que sólo puede parpadear los ojos para pasar de una sección a otra. Tienes que asegurarte de que tu sitio web tenga sentido para todos estos. Vamos a hablar de cómo probar eso, y cómo averiguar sobre temas que están en un sitio web determinado, y cómo solucionarlos. Echemos un vistazo a nuestro sitio web y veamos cómo funciona para alguien que solo usa un teclado, que incluye usuarios de lectores de pantalla y solo personas que no pueden usar un mouse. Podemos probarlo nosotros mismos simplemente no usando nuestro ratón, sino en realidad usando el teclado. La forma más fácil es usar la tecla de tabulación para pasar de un elemento a otro, porque eso es lo que la gente también hace. Hay cosas más evolucionadas como enter key para enviar formularios y espacio para pasar por diferentes secciones. Pero no necesitamos entrar en eso, pero eso es algo que puedes mirar tú mismo más adelante. Si paso por la página ahora mismo, lo primero que hago es resaltar el campo de búsqueda, y tiene este borde a su alrededor. Mucha gente piensa que esta es nuestra clave. Esto es muy necesario, no apaguen eso. Mucha gente se lo agradecerá. Ve al botón ir, y ahí intentaré volver si eso manda del formulario. manda fuera del formulario, no va a ningún lado ahora' por qué me acabo de desplazar hacia abajo. Pero en realidad funciona con un teclado, así que ahí deberíamos estar contentos. Cuando vuelvo a presionar tab, lo primero que hago es ir en realidad por los enlaces de la página, y eso es raro porque en esencia, eso significa que este menú aquí arriba no está en el flujo, y debería estar en el flujo porque visualmente tiene sentido usar ese para bajar a las secciones de la página. Con un teclado, ya estoy en la página. Cuando voy ahora más arriba, no sé dónde estoy porque el menú sólo tiene un estado flotante. No tiene un foco estados. Con un teclado, si accedo a él, obtengo el estado de foco, con un hover, solo voy a conseguir un estado de ratón. Un usuario de teclado no sabría dónde están en este momento excepto por saber que están en un enlace y un lector de pantalla te leería que tu on link, pero no estás muy seguro de que estás en el menú en este momento, pero en algún lugar de lo contrario. Lo siguiente que hay que darse cuenta aquí es que si paso por el menú, estoy de nuevo en otro cuadro de búsqueda, estoy en la otra casilla en este momento, pero hay teclas por encima. ¿Qué está pasando ahí? Estas teclas no son accesibles por teclado. Con un ratón, puedo hacer click en el 200, el 50, y el 100. Con un teclado, no puedo acceder a él. Tabbing otra vez me hace no donar botón, pero en realidad me lleva a la navegación principal. Ya ves que hay algunos temas en ese sitio web que tienen que ver con la navegación por teclado, y ahora tratamos de averiguar por qué. Bueno, la herramienta a utilizar de nuevo es el inspector, lo intentamos antes para enterarnos de los problemas de color. Ahora podemos usarlo para enterarnos realmente de los temas de interacción. Si voy, por ejemplo, en el elemento de entrada aquí, me dice que es un papel de cuadro de búsqueda y que es enfocable. Por eso pude tocarlo con el teclado. Aunque no tiene nombre. El motivo es que fue algo que fue marcado por los temas anteriores, que sí tenemos una etiqueta en el código fuente, pero no está conectado al elemento. El input no está dentro del cuadro de búsqueda o la etiqueta no tiene un atributo for y la entrada no tiene un ID. Esta es una etiqueta que en realidad se usa erróneamente y no tiene ningún sentido. Para arreglar eso, puedes hacerlo tú mismo o mirar la parte fija del sitio web, es bastante fácil. Algo interesante sin embargo es, cuando se piensa de nuevo en las pruebas automatizadas que teníamos antes, que la forma aquí que acabamos de aprender como ser completamente inaccesible para los usuarios del teclado en realidad no está marcada porque aquí nosotros usó una etiqueta, y si hace clic en la etiqueta, puede resaltar el campo de formulario, pero no forma parte de un formulario. No sabía que estos botones son inaccesibles porque no son botones, son sólo algo. ¿Cuáles son? De nuevo, estamos usando el inspector y lo volamos, y nos enteramos de que el rol es genérico y eso no enfocable porque si miras el código fuente, en realidad nos enteramos de que estos son DISS. Estos DISS son algo que a la gente le encanta hacer porque son súper estilizables y no tienen ningún estilo fuera de la caja como este esquema por ejemplo, pero no significan nada. ¿ Cómo los hice realmente clicables para seleccionar estas cosas diferentes? Se puede probar eso también yendo a los oyentes del evento y siguiendo eso, y se puede ver que he escrito algo de JavaScript para convertirlos en botones diferentes. Pero con un usuario de teclado o sin JavaScript, este formulario no sería accesible en absoluto. En lugar de eso, debería haber usado botones o botón de radio. Nuevamente, mira la versión fija del sitio web para ver cómo trabajar con eso. A menudo encontrarás que escribes algún JavaScript extra solo porque usaste el HTML equivocado. La mayoría de las veces, no es necesario hacer eso porque JavaScript siempre es más frágil que HTML porque HTML te da muchas cosas gratis desde el navegador directamente, y puedes averiguarlo en herramientas de desarrollador también aquí. En general, se puede recorrer todos los elementos de la página y averiguar si su teclado se enfoca, qué nombre y qué papel tienen. Pero si quieres saber eso de todo el documento, puedes usar el árbol de accesibilidad aquí también. El documento que tienes viene en dos formas. Viene en árbol DOM, eso realmente se genera aquí, que viene de Watson vía HTML, y también lo que JavaScript hace al HTML. Lo que hay en la pantalla y cuál es el orden de la pantalla, es también lo que el CSS nos dice que hagamos. Por ejemplo, nos dimos cuenta de que el contenido aquí está en realidad antes de éste por alguna razón, pero todavía lo mira, y no sabemos cómo hacerlo. En el árbol de accesibilidad, eso es algo que obtendría una tecnología de asistencia como un lector de pantalla. Esta es otra vista de la página que realmente se ensambla antes de que el resto del documento esté ahí. Cualquier cosa que hagas en tu HTML y tu JavaScript más adelante podría no terminar ahí dentro. Si pasas por los diferentes elementos de la página, y miras el árbol de accesibilidad al lado, puedes averiguar si algo es genérico, o tiene un nombre, o tiene un rol, y si también accesible. Esa es una forma muy arraigada de pasar realmente por todo el documento. medida que la tecnología de apoyo va por orden fuente, en la fuente del documento, el documento HTML, lo que viene primero se lee primero, y segundo, y así sucesivamente y así sucesivamente. En pantalla, esto podría verse completamente diferente, y no lo sabemos a menos que investiguemos también la fuente, lo cual es bastante desalentador porque nadie quiere leer HTML. Construimos esta pequeña herramienta llamada el corto Source Order Viewer. Si ese está activado, en realidad puedes hacer clic en cualquiera de los elementos aquí dentro y puedes obtener el orden fuente mostrado por ti. Si entras a sección, ahora aprendemos que la sección con el contenido es la primera, la navegación es la segunda, y la navegación principal es la tercera, lo que también encontramos confuso antes. Esto es algo que puedes usar para enterarte de estos pequeños temas. Otra cosa que quiero mostrarles es que hablamos de Accesibilidad Insights antes, y tiene una característica realmente genial que también te ayuda con las pruebas de accesibilidad del teclado. Además del FastPass que usamos anteriormente, también tienes herramientas ad hoc. Estas herramientas ad hoc son superposiciones sobre la página que permiten mostrar lo que está pasando en la página en términos de interacción con el teclado y en términos de otras cosas como el color también. El primero que hay que probar son los hitos. Los puntos de referencia es algo realmente bueno para dar a los usuarios del teclado porque eso significa que pueden saltar directamente a esa sección. Si digo que quiero ir al siguiente elemento de navegación, si el elemento de navegación tiene rol de navegación, puede encontrarlo. Si es sólo un DIF, no puede encontrarlo. Esto es realmente bueno tener para que los usuarios del teclado y los usuarios del lector de pantalla naveguen más rápido a través de su sitio web. Otro interesante es el tabulador para aquí. Conforme lo pasamos antes, simplemente podríamos encontrarlo nosotros mismos, pero las paradas de tabulación en realidad ahora están visualizadas, así que puedo averiguar que estoy en el cuadro de búsqueda primero, luego agregar botón, y así sucesivamente y así sucesivamente. No se superpone sobre la página. Esta página no es tan compleja, pero cuando te gusta en apps o páginas muy complejas, esto puede parecer realmente brutal. Es una gran manera de hacer una captura de pantalla para mostrar a la gente cuánto trabajo es para los usuarios de lectores de pantalla o usuarios de teclado pasar por tu aplicación. Poner eso en un documento, ponerlo en una presentación, y mostrarnos, esto es lo que hemos hecho, podemos conseguir algún tiempo de tiempo de ingeniería para arreglarlo? Por supuesto, cuando usas el Source Order Viewer y lo intentas tú mismo con tab, en realidad no necesitas hacer eso. Ahora es tu turno, echa un vistazo a las herramientas de desarrollador, echa un vistazo a la fuente o al espectador. Prueba estos sitios web que tienes. Prueba tu producto con un teclado. Aprende sobre la navegación por teclado. Tabbing es sólo una de esas cosas. Encender las barras espaciales o golpear “Enter” para enviar formularios es otro. Conoce cómo interactúan tus usuarios finales que realmente necesitan usar un teclado con tu sitio web, luego echar un vistazo a tus productos y ver dónde se atascan. Utiliza estas herramientas a tu ventaja y tendrás un bonito producto accesible. 6. Prueba de accesibilidad de las imágenes y los medios: En esta lección, vamos a hablar de medios, su mayoría imágenes y animación en sus sitios web. Estas cosas son grandes cosas, pero pueden ser una barrera masiva, así que vamos a averiguar cómo usarlas de manera responsable. Cuando se trata de medios y accesibilidad, en realidad es más importante lo que se puede quitar que lo que se puede agregar. Cuando tengas una imagen, mejor asegúrate de que haya un texto alternativo. En realidad hay que asumir que la imagen no se puede ver. O bien no se puede cargar o la gente no lo puede ver, por lo que el texto alternativo tiene mucho sentido. Lo mismo con video. Incrustar un video es bastante fácil en estos días, pero en realidad es bueno si también tiene una transcripción. La mayoría de los servicios de video como YouTube u otros también te permitirían hacer eso automáticamente. Eso es algo a considerar para realmente encender cada vez. Por supuesto, será realmente genial si tuvieras una transcripción para el video y acabas de aparecer en su lugar, pero es algo que es un paso extra a dar en este momento. Cuando se trata de animaciones, también es otra cosa donde viene con moderación. Es como si fuera genial tener esos, pero pueden ser realmente confusos para mucha gente. Vamos a echar un vistazo ahora mismo a lo que tiene nuestro sitio de demostración, por qué lo he hecho, y cómo en realidad puedo hacerlo más accesible. En la página demo que tenemos para esta clase, en realidad tenemos algunas animaciones. Todas frívolas, pero la razón es que quería usarlas. Todos saben que pueden pasar horas con animaciones CSS ajustando cosas. Es muy divertido. En mi caso aquí, conseguimos la animación en la navegación que solo muestra lo más destacado, que se ve bastante cool. Si realmente te desplazas hacia abajo a algo, en realidad se desplaza suavemente hacia abajo en lugar de simplemente saltar hacia él. El apartado en el que haces clic también parpadea un poco. Un botón “Más” aquí también se hace más grande cuando voy en él. Todo parece frívolo, pero a veces la animación puede realmente marcar la diferencia donde un botón Buy o algo que aparezca a donde vas a ir, tiene sentido para ti. El problema es ahora mismo sin embargo, que muchos usuarios pueden confundirse por eso. La otra cosa dentro que tengo son muchas imágenes como imágenes de gatos o perros, lo cual es genial, pero no todas tienen textos alternativos como nos enteramos antes. Nuevamente, la forma más rápida de enterarse de esto es utilizar el inspector. Si vuelvo eso ahora mismo, en realidad no tengo nombre ni papel. Es solo imagen de rol, tiene teclado enfocado, pero no hay nombre para ello. Esta imagen tiene un texto alternativo, por lo que en realidad dice foto de Socke, que es el perro de nuestra familia mirando la cámara. Eso tiene sentido. Si no puedo ver, tengo una explicación de que esa imagen está ahí. En realidad es bastante sencillo averiguar si una imagen tiene un texto alternativo o no usar ese, y es un problema sencillo a evitar. Ya hablamos de eso en la introducción. Ojalá, habrás pensado en eso en futuro cercano también cuando estés haciendo cosas nuevas tú mismo. Cuando se trata de las animaciones, hay un paso muy importante que tenemos que considerar hoy en día es que la mayoría de los sistemas operativos vendrán con un modo llamado movimiento reducido que permite apagar animaciones en el sistema operativo. Esto es doble. Uno es para el desempeño. Mucha gente se dio cuenta de que la duración de la batería de su teléfono móvil muere rápidamente si los sitios web animan muchas cosas. Por supuesto, es un tema de accesibilidad. Las personas con cabeza golpeada se dan nauseas por las animaciones. La gente puede tener problemas para leer cuando las animaciones las distraen, y la gente generalmente puede distraerse y ya no sabe dónde están tan pronto como algo empieza a parpadear. Todas las cosas que ponemos ahí deberían tener un cheque junto a ellos para asegurarse de que solo aparezcan cuando realmente se les quiere. Eso se puede hacer en CSS mediante el uso de una consulta de medios llamada movimiento reducido. Nuevamente, podrías probar esto yendo al sistema operativo y apagar todas las animaciones y volver a tu sitio web y recargarlo. Pero queríamos facilitártelo, así que también hicimos esa una de las emulaciones en el panel Renderizado. Vas a prefiere movimiento reducido, y dices preferir movimiento reducido, reducir. Ahora, haces click en la navegación, verás que salta. Ya no hace el fluir. No hace el desaceleración del desplazamiento hacia abajo a la otra sección. Simplemente salta a ello, lo que nos parece feo pero para alguien que está confundido por la animación, es algo muy, muy bonito tener. En la navegación todavía se muestra la animación, así que eso es un problema. En la versión fija de la página, ya no lo hace, y puedes echar un vistazo como lo he hecho. De acuerdo, hay algunas cosas en las herramientas de desarrollador que te ayudan a comprobar la accesibilidad de tus medios. Se puede utilizar el inspector para ver si una imagen tiene un texto alternativo. También puedes usar la simulación de animación reduce para asegurarte de que tus animaciones solo se muestren a aquellas que pueden y quieren usar animaciones. Ahora una cosa que podrías haber visto que en realidad aún no he hablado es que en los elementos, en el HTML, tienes una línea garabateada aquí debajo de esa imagen en este momento. Eso significa que ahí hay un tema de accesibilidad. Si haces clic en él, realidad saltas al panel de accesibilidad, al listado de los problemas, y ese te dice exactamente qué pasa con ese. No obstante, este es el HTML que ya se genera, eso ya está hecho. ¿ Y si quieres hacer eso mientras escribes HTML? Esto nos trae de vuelta a algo de lo que hablamos antes, que es la extensión webhint para Visual Studio Code. Si entras en tu editor, verás las mismas líneas garabateadas bajo problemáticas piezas HTML. Tan pronto como los arregles entonces en realidad estos garabatos desaparecerán. Nuevamente si pasas por los temas dolor y quieres verlo directamente ahí, puedes pasar el cursor sobre él y te explica cuál es el tema en este caso que, esa imagen no tiene texto alternativo. Si escribes un texto alternativo, desaparecerá. Esto es molesto. Esto no es bonito y en realidad significa que quieres arreglarlo. Eso es algo que puedes instalar en tu Visual Studio Code y también en el visor de fuentes de las herramientas de desarrollador, y ahora te muestra exactamente dónde están tus problemas. En esta lección, hablamos de imágenes sin textos alternativos que debes escribirlo. Hablamos un poco de videos, pero no mostramos una demo ahí. Pero en realidad prueba eso. Sube un video a una plataforma, asegúrate de obtener una transcripción, y mira si puedes conseguir que la transcripción se muestre de alguna manera con el video, si no lo hace automáticamente. Hablamos de movimiento reducido, y hablamos de diferentes estados, qué puede mirar la gente en tu página web. Asegúrate de echar un vistazo al movimiento reducido porque es algo muy poderoso de hacer. Piénsalo, si alguien no quiere ver animaciones o no puede ver animaciones, y les mandas un GIF animado de dos megabytes, eso no tiene sentido. Asegúrate de usar esa consulta de medios de movimiento reducidos CSS a buena, y en realidad asegúrate de que la gente no tenga que cargar cosas que no quieren tener y que no puedan lidiar. 7. Reflexiones finales: Bueno, ese es el final de esa clase y espero que hayas aprendido algo sobre accesibilidad e interacción. Esa accesibilidad no se puede automatizar, pero muchos de los problemas solo aparecen cuando comienzas a interactuar con la página tú mismo, y comienzas a simular la forma en que las personas cambian tu sitio web para cubrir sus necesidades. Ahí está el sitio web que tenemos ahí dentro que tiene algunos errores ahí dentro, así que echa un vistazo a ese, intenta arreglarlos tú mismo, y echa un vistazo a la web fija también, y si encuentras algo que no he pensado de, y estoy bastante seguro de que hay algo ahí dentro que no he pensado, acuda a los tableros de discusión, habla con nosotros al respecto y aprende más sobre accesibilidad.