Hagamos Nuestra Aplicación de Página Única Accesible

Hola a todos y bienvenidos. Es un gran placer hablar sobre Vue.js. Y el tema de hoy será cómo hacer que nuestra aplicación de página única sea accesible. Pero antes de comenzar, permítanme presentarme. Mi nombre es Simone Cuomo y soy un arquitecto de software en Distal Labs. Puedes encontrarme en Twitter en zelyk880, o leer cualquiera de mis artículos en mi sitio web en zelyk880.com. También quiero informarles que estaré muy activo en Discord y Twitter. Así que no dudes en contactarme si tienes alguna pregunta o si te gustaría tener una charla sobre cualquier tema relacionado con Vue.js.

La agenda de hoy va a estar muy ocupada. Tenemos 20 minutos, pero tenemos 20 minutos llenos de contenido. Esta charla no va a ser la típica charla básica sobre accessibility donde hablamos de todas las etiquetas y encabezados, etc. Se va a centrar en los problemas de las aplicaciones de página única. También quiero informarles que compartiré las diapositivas y compartiré el repositorio y todo lo que discutamos durante esta charla más tarde. No hay razón para que tomen notas.

¿Por dónde deberíamos empezar? Bueno, en primer lugar, ¿por qué deberíamos preocuparnos por la accessibility? Esa es la primera pregunta que debemos responder. Bueno, Internet no es opcional. ¿Qué quiero decir con esto? Hace unos años, las charlas sobre accessibility se trataban de dar a las personas con discapacidad la oportunidad de acceder a Internet solo para acceder a Internet de forma gratuita. La verdad es que hoy en día tienen que acceder a Internet. Los bancos están cerrando, obligando a los usuarios a utilizar la aplicación, las compras se realizan en línea, incluso la declaración de impuestos se hace en línea. Entonces, si no hacemos que nuestra aplicación sea accesible, ¿cómo van a realizar estas personas las operaciones diarias? ¿Cómo van a reservar vuelos? ¿Cómo van a hacer eso? Así que es nuestro deber hacer que la web sea más accesible. Hay algunas estadísticas importantes allí abajo. 11 millones de personas con discapacidad acceden a Internet en 2022. Eso es el 20% de la población del Reino Unido, bastante considerable. Y el último punto es, la accessibility no es solo para personas con discapacidad. ¿Qué significa eso? Las personas tienen la percepción de que escribimos código de accessibility solo para personas con discapacidad, pero eso puede no ser cierto. Un padre que sostiene a un niño, durmiendo en su mano, me pasó cuando mi hijo era más pequeño, puede que no pueda usar el mouse y tenga que navegar por el sitio con el teclado. Lo mismo si tienes un yeso. Luego, una persona con dislexia que puede tener dificultades para entender textos largos y un hablante no nativo que en realidad va a activar el lector de pantalla para poder leer el subtítulo. Entonces, hay muchas de estas cosas que no son realmente accessibility por el bien de las personas con discapacidad, por el bien de las personas con discapacidad, sino accessibility para permitir que todos en todas las circunstancias puedan acceder a Internet. Los dos últimos ejemplos allí, entornos muy ruidosos, alguien tiene que activar los subtítulos, o un día muy soleado donde hay tanto brillo en la pantalla que no puedes ver los colores. Pueden requerir un sitio web accesible para poder verlo todo.

Entonces, ¿cuál es el problema con las aplicaciones de página única? Sabemos que la web ya estaba rota. Lo que quiero decir con rota es que no estamos haciendo un buen trabajo al escribir código que sea accesible. Tenemos elementos incorrectos, estructura incorrecta, y propiedades faltantes que realmente hacen que la web sea inaccesible desde el principio.

Pero la verdad es que, incluso si es así, como puedes ver, este es un informe de la web, 8 millones, informe de 2022. Esto muestra que estaban haciendo un trabajo realmente malo en esto. Sin contratos, 83%, falta de texto antiguo, 55% de cada página completa que se verificó. Entonces, como puedes ver, hay alguna mejora allí, pero es muy mínima. Desafortunadamente, eso está fuera del alcance de hoy, y realmente nos vamos a centrar en las aplicaciones de página única. Vamos a cubrir tres aspectos principales. El primero es el contenido dinámico. El segundo es la actualización de página. Y el tercero es lo que ellos llaman la bonanza de componentes personalizados. Es solo un nombre que he creado, así que no creo que sepas qué es. En cada uno de estos puntos, vamos a explicar qué es. Vamos a tener programación en vivo, y vamos a tener una solución. Entonces, deberías poder salir después de esta charla con tres soluciones que mejorarán tus actividades diarias, el desarrollo diario.

Entonces, empecemos. Vamos. Antes de continuar y cubrir esto, quiero mostrarte la aplicación. Vamos a usar esta aplicación simple donde una sola aplicación, tres enlaces con las tres cosas que vamos a cubrir. Hay un encabezado, hay una barra de navegación. Y también, vamos a usar el lector de pantalla con los subtítulos para que puedas ver también lo que el lector de pantalla dirá. Así que veamos nuestro primer ejemplo. Carga de contenido dinámico. Nos gusta llenar nuestro sitio web con códigos de características. Un spinner de carga, un esqueleto de carga, o un carrito volando alrededor, o un correo electrónico volando cuando haces clic en el botón de enviar. Todo esto es genial. Se ven fantásticos pero no son realmente accesibles. Un usuario visual que usa el lector de pantalla no sabrá de la situación que está ocurriendo. Entonces, lo que verás en nuestro ejemplo es que el contenido se está cargando.

Hay una llamada a la API o algo con una barra de progreso. Un usuario de lector de pantalla no tendrá idea de nada de lo que está sucediendo en la pantalla en este momento. Y eso es lo que vamos a solucionar.

¿Cómo lo vamos a solucionar? En realidad, vamos a usar algo llamado LiveRegion. LiveRegion no fue inventado por un marco de trabajo. En realidad, es algo que está disponible en HTML. LiveRegion es una parte de la página que se leerá en un lector de pantalla cada vez que su contenido cambie. Afortunadamente para nosotros, no tenemos que implementar todas las diferentes LiveRegion, pero hay un complemento llamado ViewAnnouncer que se encargará del trabajo pesado por nosotros. Entonces, después de configurarlo, verás que será muy fácil usar LiveRegion siempre que lo necesitemos. Así que repasemos en el Hub y comencemos a configurarlo juntos.

Esta es nuestra aplicación. Es muy simple. Como dije, tenemos los tres componentes aquí. Tenemos la página de bienvenida y tenemos el diseño predeterminado. Para agregar LiveRegion, el primer paso es agregar el paquete. El paquete se llama announcer, y como estamos usando View3, vamos a hacer el anunciador en next para la versión View3. Después de agregar el complemento, voy a ir a la pantalla para poder obtener cosas y ser rápido para la charla. Después de agregar el paquete, vamos a ir a un archivo main.js, y lo vamos a colocar en la parte superior, y luego, vamos a importar los estilos, para que el anunciador se asegure de que el componente no se muestre realmente, por lo que también son necesarios algunos estilos para que se haga. Y por último, en este archivo, vamos a ir hacia abajo, y nos aseguraremos de agregar el complemento. Entonces, esta es nuestra aplicación. Paso uno, hecho.

Lo siguiente que tenemos que hacer antes de poder usarlo es agregar este componente, por lo que podrías agregar este componente en cada archivo en el que quieras usarlo, pero sugiero agregarlo en un diseño. Como puedes ver, tengo mi diseño principal con la barra de navegación en el main, así que voy a agregar el ViewAnnouncer en la parte superior de esta página. Por último, vamos a usar el ViewAnnouncer y lo haremos en nuestros datos dinámicos. Entonces, si abres el archivo de datos dinámicos, verás que en la parte superior tenemos una carga que hace referencia a cero, tenemos un cargador falso, por lo que esto aumenta a 25 cada segundo y al final, vamos a establecer nombres que realmente van a establecer los nombres. Antes de hacer cambios aquí, vamos a ir a la aplicación y ver qué dice el lector de pantalla. Así que volvemos aquí, voy a encender mi lector de pantalla. Deberías poder, deberías poder ver la leyenda aquí. Entonces, si vamos a datos dinámicos y hacemos clic en cargar datos. Como puedes ver, el lector de pantalla no dice absolutamente nada.

Los data se cargan y aún no se ha dicho nada. Por lo tanto, el usuario no tendrá idea de lo que realmente está sucediendo detrás de escena. Así que vamos a volver ahora, vamos a encender el voiceover y vamos a volver a nuestro código y vamos a importar una respuesta de este archivo. Así que importamos una respuesta como cualquier otro paquete. Expone un composable que es el User Answer y el User Answer tiene dos métodos diferentes. Uno se llama educado y esperará el mensaje anterior antes de mostrar el siguiente mensaje. Y el siguiente será asertivo que en realidad lo gritará. Entonces puedes ver que educado hace cola, mientras que asertivo grita. Así es como suelo explicarlo.

Y luego lo vamos a usar de una manera muy sencilla. Puedes usarlo cuando quieras en la página para notificar al usuario. Así que voy a decir aquí, cada vez que cambies la carga para informar al usuario, de la misma manera que lo hacemos visualmente, hagámoslo también y agreguémoslo a dos segundos, para que podamos ver más. Si hacemos algo por el usuario, visualmente hagámoslo también para las personas que usan lectores de pantalla. Y lo siguiente que voy a hacer es agregar un poco más abajo, donde establecemos los nombres. También vamos a informar al usuario que se ha cargado, para que el usuario sepa, el usuario puede revisar y comprender que algo ha cambiado. Así que si guardo aquí ahora, y volvemos a nuestra aplicación, y actualizo la página. El lector de pantalla está activado, lo siento, el voiceover está activado, y presiono este botón, veamos qué sucede. Como puedes ver, el progreso de carga ahora se ha leído, por lo que el usuario sabe que algo está sucediendo, sabe que realmente está sucediendo, nada es estable. Y cuando los nombres se cargan realmente, también notificará a los usuarios. Entonces, lo que hemos hecho hoy, hemos implementado algo que, como puedes ver, es muy sencillo de implementar, y es muy sencillo luego, después de agregarlo a la aplicación, es muy sencillo seguir usando para el usuario. Una forma muy sencilla de brindar soporte a todos los usuarios que usan el voiceover, y para informarles sobre eventos visuales. Lo que debes recordar es, si estás haciendo algo visualmente, agrega este anuncio, eso es todo, no es demasiado complicado. Volvamos a nuestras diapositivas para el número dos.

El próximo tema será el problema con el enrutamiento. Las aplicaciones de una sola página no se actualizan por completo. Eso es algo que es genial en algunos aspectos, es la razón principal por la que se crearon las aplicaciones de una sola página, es poder cambiar alguna parte de la página. Pero el problema principal es que esto no es realmente accesible. Si eres un lector de pantalla, si estás usando el teclado para navegar, lo que sucederá es que en realidad te quedas en un, si navegas por uno, no sabes que la página ha cambiado. Y en segundo lugar, en realidad no sabes dónde estás, porque tu enfoque se queda en los botones antiguos o donde hayas estado anteriormente.

La solución para esto es una mezcla. Entonces vamos a usar diferentes técnicas que nos ayudarán a hacer la navegación accesible. Primero, vamos a mejorar nuestro anunciador. Entonces vamos a usar el mismo complemento que agregamos antes para informar al usuario cada vez que cambiemos de página. En segundo lugar, vamos a agregar algo llamado enlace de omisión. El enlace de omisión es como un enlace oculto en la parte superior. Entonces, si presionas el botón de tabulación en algún sitio web como GitHub u otro sitio web grande, notarás que aparece un enlace de omisión. Es un enlace que permite al usuario saltar todo el contenido y ir directamente a la parte importante de la página. Y por último, nos aseguraremos de que cada vez que cambiemos de página, el enfoque regrese a la parte superior en ese enlace de omisión. Así realmente ayudamos al usuario a navegar.

Entonces, nuevamente, es hora de explicar y es hora de codificar. Entonces volvemos a nuestra aplicación, y nuevamente, voy a mover las cosas aquí. Lo primero es agregar el complemento. El complemento se llama, siempre se ofrece desde view-a11y, que es la imagen de accesibilidad. Entonces, si vas a ese repositorio de GitHub, verás que se ofrece todo este paquete, pero este es el skip to, y como antes, necesitamos usar la versión siguiente. El siguiente, como antes, necesitamos ir a nuestro archivo main.js y realmente importar el complemento. Entonces en la parte superior, podemos importar el complemento aquí. Y al igual que antes, también vamos a importar el estilo. Así que puedes iniciarlo tú mismo, pero este es un estilo muy genérico que se usa en casi todas partes donde he visto realmente el view, el skip to se usa. Por último, sobre todo esto, vamos a agregar el enlace de omisión aquí. Y muy similar a antes, como puedes ver esta consistencia aquí, vamos a guardar esta página. Vamos a ir al diseño predeterminado, y vamos a agregar nuestro enlace de omisión en la parte superior. Entonces el enlace de omisión como referencia, y tú eliges dónde va.

Como puedes ver, en mi caso, estoy diciendo que debe ir a un contenido principal ideal. Y voy a agregar el enlace de omisión aquí. Y voy a agregar el enlace de omisión aquí. Y puedes ver que tengo mi contenido principal que es el contenido principal real. Puedes cambiar esto y también será por página. Y el enlace de omisión de vista también permite más de una entrada. Y esto es lo que realmente se leerá al usuario.

Si actualizo la página ahora, si vuelvo a nuestra aplicación, y si realmente inicio el lector de pantalla, puedes ver que hay un salto al contenido principal. Si presiono Enter, voy directamente al contenido principal. Entonces el enlace de omisión está funcionando, pero necesitamos hacer un poco más. Así que volvamos a nuestra aplicación.

Entonces lo que necesitamos hacer, como mencioné, este número uno era el enlace de omisión, pero necesitamos mejorar nuestro anunciador. Entonces, si volvemos a nuestro archivo main.js, podemos pasar el enrutador a nuestro anunciador. Entonces podemos hacer esto. Lo que esto realmente va a hacer es que el complemento de anunciador de vista sabe cómo leer el enrutador y cada vez que las cosas cambien, lo leerá al usuario. Por lo tanto, puede escuchar eso. Entonces, lo que también puedes hacer, puedes elegir qué se anuncia realmente al usuario. Entonces, en este momento, solo dirá que la página ha cambiado, pero puedes elegir qué se dice realmente. Entonces, si vamos al archivo router.js, puedes definir un mensaje. Entonces, en este caso, vamos a la página de bienvenida, navegación de página, y voy a decir una respuesta. Entonces puedes pasar una respuesta, puedes pasar un mensaje. Entonces, si voy a la página de navegación de página, realmente dirá mi página de navegación. Lo que también es útil para este complemento, lo que suelo hacer es crear un pequeño, disculpas, estaba tomando el código. Creo un pequeño fragmento de código que realmente va a tomar todo eso, que va a ir al enrutador, y antes de cada uno va a tomar el título y cambiar el título. Entonces lo que el anunciador realmente hará, el anunciador leerá automáticamente pasando el enrutador, el anunciador leerá automáticamente los títulos. Entonces, lo que estoy haciendo al hacer esto cambiará automáticamente el título y el anunciador sabe qué debe leer realmente. Entonces, nuevamente, este código, lo confrontaste en GitHub. Sé que vamos bastante rápido, pero mientras lo empujo, puedes ver y usar el código tú mismo. Entonces, si guardo aquí y guardo aquí y vuelvo a nuestra aplicación, abro el lector de pantalla, okay. Ahora estamos en nuestra aplicación principal.

Así que saltemos al contenido principal, navegación de página. Digamos que vamos a la navegación de página, presiono sobre ella. Puedes ver que el enfoque va directamente al enfoque, va directamente a la parte superior y luego se lee la página. Así que si presiono saltar de nuevo y vuelvo, si voy a una página diferente, por ejemplo, voy a cargar dinámica data, puedes ver lo mismo, saltar al contenido principal porque ahí es donde está el enfoque. Se carga la data dinámica. Así que lo que hemos hecho ahora, hemos implementado las tres cosas. Como puedes ver, en realidad no estamos forzando que el enfoque vuelva porque todo eso está siendo manejado por el complemento para nosotros. Eso es genial. Así que solución número dos, ahora tenemos carga de páginas accesible, y todo está hecho realmente. Como dije, probablemente fuimos muy rápido en el código para cambiar el título. Así que puedes ver aquí arriba, el título cambia cada vez que vas a una página diferente y eso fue gracias a ese pequeño fragmento de código. Es muy simple, incluso hay complementos que pueden hacerlo por ti. Así que si necesitas ayuda, solo ponte en contacto conmigo.

La última parte que vamos a cubrir se llama Component Bonanza. En realidad, yo lo llamo Component Bonanza, así que no tiene un significado existente. ¿Qué queremos decir con Component Bonanza? La arquitectura basada en componentes ofrecida por los frameworks como Vue, React y Angular nos alejó del simple HTML. Era tan sencillo crear un componente muy pequeño que nos alejamos un poco del enfoque nativo. Por supuesto, teníamos Intel Explorer para ofrecer soporte y el componente no se veía tan bonito. Desafortunadamente, los elementos bonitos no se alinean realmente con elementos accesibles.

Por ejemplo, la barra de desplazamiento, el selector de fechas, el menú desplegable, el campo de entrada son solo algunos de los componentes que generalmente se implementan para que las cosas se vean mejor pero reducen sus funcionalidades para los usuarios. Así que voy a añadirte algo, pero antes de hacerlo, voy a cubrir tres partes diferentes de esto. En primer lugar, al crear un nuevo componente que emule HTML, siempre intenta utilizar bibliotecas o paquetes de componentes existentes. Sé que normalmente la gente siempre tiene la tentación de no querer utilizar paquetes sin motivo. Pero algunos de estos paquetes, ya sabes, hay mucho trabajo detrás de ellos para hacerlos realmente accesibles. Te sorprenderá la cantidad de funcionalidades que hay detrás de un paquete, la cantidad de funcionalidades que hay detrás del selector de fechas, la cantidad de funcionalidades y cosas que se requieren detrás del menú desplegable. Sin embargo, es importante asegurarte de que el paquete que estás utilizando sea accesible. He visto casos en los que hay paquetes con miles y miles de descargas que en realidad no son accesibles. Así que por favor, haz tu propio trabajo.

Lo siguiente es verificar lo básico. Lo que suelo hacer personalmente, es ir a los sitios web de W3 o de Mozilla, porque siempre tienen fragmentos de código que puedes descargar, fragmentos de HTML e información sobre páginas para decirte qué se espera que haga realmente el componente. Así que si realmente quieres hacerlo tú mismo, comienza desde una buena base. Y por último, ¿por qué no añadir la accesibilidad a tu flujo de trabajo? Así que es realmente bueno si añades la accesibilidad como parte de tu experiencia de desarrollo. Con el tiempo, aprenderás cómo hacer que las cosas sean accesibles y realmente las mejorarás. Tu aplicación se volverá más accesible porque se convertirá en una especie de memoria muscular para ti. Y eso es lo que vas a hacer en esta parte del código. Vamos a pasar por eso. En este caso, vamos a añadir algo llamado View App Setting, creo que es View Apps. Es un complemento que te ayudará, te notificará mientras utilizas tu entorno de desarrollo de aplicaciones. Te notificará, comprobará tu aplicación en busca de cualquier cosa que no pase el complemento Axe Core, la biblioteca Axe Core. Como antes, siempre vamos a añadir nuestro paquete primero. Así que el paquete que vamos a añadir es dos. En primer lugar, se llamará Axe Core. Y el segundo se llamará View Axe Next.

Lo añadimos solo en el entorno de desarrollo porque no vamos a incluir este complemento en producción. Así que añadimos el complemento. Y luego, como puedes esperar, vamos a añadir el complemento en nuestro archivo main.js. Importamos el archivo .js en la parte superior. Lo importamos. Como puedes ver, estoy importando dos cosas. Estoy importando el view axe y también estoy importando el view axe pop up porque vamos a necesitar ambos.

Y luego, a continuación, vamos a ir un poco más abajo. Ahora, esto va a ser un poco más complicado de lo que normalmente hacemos. Así que el view axe es en realidad una instancia de vista por sí mismo. Cambiamos nuestra creación normal de la aplicación para decir que si está en el entorno de desarrollo, por favor, crea una aplicación y un view axe pop up. Y si no, simplemente crea una aplicación normal. Así que esta es la única parte del código que probablemente hagas una vez. Y después de hacerlo, funcionará para todo el entorno de desarrollo y no para el entorno de producción. Solo si no quieres añadir algo en tu propia aplicación, puedes utilizar un complemento, la única razón por la que yo, lo siento, un complemento de Chrome. Así que hay una extensión de Chrome que hace todo esto. Prefiero añadirlo en la aplicación porque al hacerlo, todos lo van a utilizar realmente. Voy a guardar esto aquí. Y por último, tenemos que ir a nuestra configuración, git config y vamos a añadir el código de axe. Así que vamos a volver a nuestro código. Ahora vamos a actualizar la página y lo que puedes ver en la parte inferior es que tenemos un bonito pop-up, verifica todo cada vez que pasas por él. Y lo que notas es que este complemento, estos enlaces tienen un contraste de 409 cuando se espera que sea 405. Te dice todo sobre el color, te dice de dónde viene y es muy, muy fácil solucionarlo. Encontré esto extremadamente útil. Además, si haces clic aquí, los resalta por lo que es fácil encontrarlos en una página. Esto te ahorrará mucho tiempo en realidad, ya sabes, tiempo para debug. Muy útil. Como dije, solo se mostrará en el entorno de desarrollo y si quieres, también hay un complemento de Chrome.

Sé que hubo mucho contenido para repasar en los 20 minutos y espero que hayas captado todo lo que mencioné. Si necesitas algún seguimiento o tienes alguna pregunta, por favor, ponte en contacto como mencioné. Estaré en Discord en este momento, pero como mencioné, también estaré en Twitter más tarde. Esta es toda la página de referencia y quiero agradecerte por unirte a mi charla y espero verte por aquí.