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

Rate this content
Bookmark

Esta charla va a proporcionar recomendaciones para hacer que una aplicación de página única sea accesible. La charla no va a cubrir lo básico de accesibilidad, como agregar texto ALT o usar elementos HTML correctos, pero va a cubrir las principales deficiencias existentes en nuestra SPA.

En ningún orden en particular, esta charla va a cubrir los siguientes temas:

  • - Proporcionar una lista de recursos (blog, libro y personas a seguir)
  • - Presentar el problema con SPA con un ejemplo en vivo
  • - Describir y resolver problemas con el enrutamiento en SPA
  • - Describir y resolver problemas con cambios dinámicos en una aplicación Vue
  • - Una breve introducción a los elementos HTML correctos (y cómo aprovechar Vue para esto)
  • - Describir y solucionar el historial del navegador
25 min
15 May, 2023

Video Summary and Transcription

La charla de hoy se centró en hacer que las aplicaciones de página única sean más accesibles. Se destacó la importancia de la accesibilidad web para todos los usuarios, incluidos aquellos con discapacidades y diferentes circunstancias. La charla discutió los problemas comunes de accesibilidad en las aplicaciones de página única, como la carga de contenido dinámico y la actualización de la página, y proporcionó soluciones para abordarlos. También se demostró la implementación de LiveRegion y la composición de respuestas de usuario en Vue.js para mejorar la accesibilidad. Además, la charla enfatizó la necesidad de mejorar el enrutamiento, la navegación y la selección de componentes para una mejor accesibilidad. Por último, se mencionó el uso del complemento View App Setting para verificar problemas de accesibilidad en el desarrollo.

Available in English

1. Introducción a la accesibilidad de Vue.js

Short description:

¡Hola a todos! Hoy hablaré sobre cómo hacer que nuestra aplicación de página única sea accesible. Soy Simone Cuomo, un arquitecto de software en Distal Labs. Puedes encontrarme en Twitter en zelyk880 o visitar mi sitio web zelyk880.com. ¡Comencemos!

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.

2. Por qué es importante la accesibilidad

Short description:

Internet no es opcional. 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. Es nuestro deber hacer que la web sea más accesible. La accesibilidad no es solo para personas con discapacidades, sino también para aquellos que pueden tener limitaciones temporales o circunstancias diferentes. Por ejemplo, una persona que sostiene a un niño puede necesitar navegar con el teclado, alguien con dislexia puede tener dificultades con textos largos y un hablante no nativo puede depender de un lector de pantalla. Los sitios web accesibles son esenciales en entornos ruidosos o situaciones con un exceso de brillo en la pantalla.

¿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.

3. Problemas con las Aplicaciones de Página Única

Short description:

Las aplicaciones de página única tienen problemas de accesibilidad debido a elementos incorrectos, estructura y propiedades faltantes. Un informe de la web muestra una mejora mínima en la accesibilidad. Hoy nos centraremos en tres aspectos: contenido dinámico, actualización de página y la bonanza de componentes personalizados. Explicaremos cada punto, proporcionaremos programación en vivo y ofreceremos soluciones para mejorar el desarrollo diario. Comencemos examinando un ejemplo de carga de contenido dinámico.

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.

4. Implementando LiveRegion en Vue.js

Short description:

Vamos a solucionar el problema de que los usuarios de lectores de pantalla no puedan entender lo que está sucediendo en la pantalla utilizando LiveRegion. LiveRegion es una parte de la página que se lee en un lector de pantalla cada vez que su contenido cambia. Podemos usar un complemento llamado ViewAnnouncer para implementar fácilmente LiveRegion en nuestra aplicación Vue.js. Veamos los pasos para configurarlo. Primero, debemos agregar el paquete del anunciador e importar los estilos necesarios. Luego, agregamos el complemento a nuestro archivo main.js. A continuación, agregamos el componente ViewAnnouncer a nuestro diseño. Por último, utilizamos el componente ViewAnnouncer en nuestros datos dinámicos para proporcionar actualizaciones al lector de pantalla. Veamos cómo funciona probándolo con un lector de pantalla.

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.

5. Implementando User Answer Composable

Short description:

Para abordar el problema de que los usuarios de lectores de pantalla no estén al tanto de lo que está sucediendo en la pantalla, podemos utilizar el User Answer Composable del paquete importado. Proporciona métodos para mensajes educados y asertivos. Podemos usarlo para notificar al usuario cuando cambia la carga y cuando se cargan los nombres. Esta implementación sencilla brinda soporte a los usuarios de lectores de pantalla y los mantiene informados sobre los eventos visuales.

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.

6. Usando el Anunciador para Notificaciones al Usuario

Short description:

Puedes usar el anunciador para notificar al usuario cada vez que haya un cambio en el progreso de carga. Es una forma sencilla de brindar soporte a los usuarios de lectores de pantalla y mantenerlos informados sobre los eventos visuales.

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.

7. Abordando Problemas de Enrutamiento y Mejorando la Navegación

Short description:

Las aplicaciones de una sola página no se actualizan por completo, lo que plantea problemas de accesibilidad para los usuarios de lectores de pantalla y navegadores de teclado. Para abordar esto, podemos mejorar nuestro complemento de anuncio para informar a los usuarios sobre los cambios de página, agregar un enlace de omisión para permitir a los usuarios saltar a partes importantes de la página y asegurarnos de que el enfoque regrese al enlace de omisión cuando cambie la página. Ahora implementemos estas técnicas en nuestra aplicación.

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.

8. Mejorando el Anunciador y el Enrutador

Short description:

En mi caso, estoy diciendo que debe ir a un contenido principal ideal. Voy a agregar el enlace de omisión aquí. El enlace de omisión de vista permite más de una entrada. Si actualizo la página y comienzo el lector de pantalla, hay un salto al contenido principal. Entonces el enlace de omisión está funcionando, pero necesitamos hacer un poco más. Necesitamos mejorar nuestro anunciador. Podemos pasar el enrutador a nuestro anunciador y elegir qué se anuncia al usuario. Podemos definir un mensaje en el archivo router.js. Por lo general, creo un fragmento de código que cambia el título antes de cada cambio de enrutador. Este código está disponible en GitHub. Volvamos a nuestra aplicación y abramos el lector de pantalla.

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.

9. Implementando Carga de Páginas Accesible

Short description:

Hemos implementado la carga de páginas accesible utilizando un complemento para manejar el enfoque y cambiar dinámicamente el título de la página. Ponte en contacto conmigo si necesitas ayuda.

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.

10. Component Bonanza y Flujo de Trabajo de Accesibilidad

Short description:

Component Bonanza se refiere al uso de una arquitectura basada en componentes en frameworks como Vue, React y Angular. Sin embargo, los elementos bonitos no siempre se alinean con la accesibilidad. Al crear nuevos componentes, es recomendable utilizar bibliotecas o paquetes de componentes accesibles existentes. Asegúrate de que el paquete que elijas sea accesible, ya que algunos paquetes populares pueden no serlo. Verifica lo básico consultando los sitios web de W3 y Mozilla para obtener fragmentos de HTML e información sobre componentes. Por último, incorpora la accesibilidad en tu flujo de trabajo de desarrollo para mejorar con el tiempo. En esta parte, agregaremos el complemento View App Setting, que verifica tu aplicación en busca de problemas de accesibilidad utilizando la biblioteca Axe Core.

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.

11. Añadiendo el complemento Axe para Desarrollo

Short description:

Añadimos el complemento en el entorno de desarrollo. Verifica todo y proporciona soluciones sencillas para problemas de contraste. El complemento es extremadamente útil y ahorra tiempo de depuración. Ponte en contacto conmigo si tienes alguna pregunta.

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í.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.