Cómo crear una aplicación front-end accesible con Chakra UI y Nuxt.js

Publicado: 2022-03-10
Resumen rápido ↬ En este artículo, veremos cómo usar Chakra UI y NuxtJS para crear aplicaciones front-end accesibles. Para continuar, debe estar familiarizado con el uso del marco frontal progresivo Vue.js con Nuxt. De lo contrario, consulte los documentos de Vue.js y NuxtJS para comenzar.

Para muchas personas, la web es una parte esencial de su vida diaria. Lo usan en el trabajo, en casa e incluso en la carretera. La accesibilidad web significa que las personas con discapacidad pueden usar la web por igual. Por lo tanto, es fundamental que los desarrolladores y las organizaciones que se basan en la web generen inclusión y accesibilidad en sus aplicaciones.

Para hacer que la web sea más accesible, hay un par de mejores prácticas y estándares que deberá implementar en sus aplicaciones, como cumplir con lo siguiente:

  • artículo 508;
  • Ley de Tecnología Auxiliar;
  • Ley de Estadounidenses con Discapacidades (ADA);
  • WCAG 2.0 (Directrices A y AA);
  • Pautas de accesibilidad móvil de la BBC;
  • WAI-ARIA ( W eb A ccessibility I niitiative– A ccessible I ch I nternet A pplications) prácticas.

Aprender a implementar estos estándares puede parecer una tarea desalentadora cuando se tienen en cuenta los plazos del proyecto y otras limitaciones con las que tiene que trabajar como desarrollador. En ese sentido, permítame presentarle un sistema de diseño de interfaz de usuario creado para ayudarlo a que sus aplicaciones web sean accesibles.

Interfaz de usuario de Chakra

Chakra UI es un sistema de diseño y un marco de interfaz de usuario creado por Segun Adebayo. Fue creado teniendo en cuenta la simplicidad, la modularidad, la componibilidad y la accesibilidad. Chakra UI le brinda todos los componentes básicos necesarios para crear aplicaciones front-end accesibles.

Nota : Si bien la interfaz de usuario de Chakra depende de CSS-in-JS bajo el capó, no necesita saberlo para usar la biblioteca.

Aunque el marco se creó originalmente para React, Jonathan Bakebwa encabezó la migración a Vue. Entonces, los desarrolladores de Vuejs/NuxtJS ahora pueden utilizar la interfaz de usuario de Chakra para crear aplicaciones web accesibles.

Características de la interfaz de usuario de Chakra

Chakra UI se creó con los siguientes principios en mente:

  • accesorios de estilo
    La interfaz de usuario de Chakra hace posible diseñar componentes o anular sus estilos mediante el uso de accesorios. Esto reduce la necesidad de hojas de estilo o estilos en línea. Chakra UI logra este nivel de flexibilidad mediante el uso de Styled Systems bajo el capó.
  • Composición
    Los componentes de la interfaz de usuario de Chakra se han dividido en partes más pequeñas con accesorios mínimos para mantener la complejidad baja y componerlos juntos. Esto asegurará que los estilos y la funcionalidad sean flexibles y extensibles. Por ejemplo, puede usar los componentes CBox y CPseudoBox para crear nuevos componentes.
  • Accesible
    Los componentes de la interfaz de usuario de Chakra siguen las especificaciones de las pautas de WAI-ARIA y tienen los atributos aria-* correctos. También puede encontrar el informe de accesibilidad de cada componente creado en un archivo llamado accessibility.md . Consulte el informe de accesibilidad del componente CAccordion .
  • tematizable
    Chakra UI le brinda la capacidad de hacer referencia fácilmente a los valores de su tema en toda su aplicación, en cualquier componente.
  • Soporte de modo oscuro
    La mayoría de los componentes de la interfaz de usuario de Chakra son compatibles con el modo oscuro desde el primer momento.

Cómo Chakra UI admite la accesibilidad

Uno de los principios básicos detrás de la creación de Chakra UI es la accesibilidad . Con eso en mente, todos los componentes de Chakra UI vienen listos para usar con soporte para accesibilidad al proporcionar:

  • Navegación con teclado: útil para usuarios con discapacidades motoras,
  • gestión de enfoque,
  • atributos aria-* que necesitan los lectores de pantalla,
  • Trampa y restauración de foco para diálogos modales.
¡Más después del salto! Continúe leyendo a continuación ↓

Primeros pasos con Chakra UI y Nuxt

Nota : para usar la interfaz de usuario de Chakra con Vue.js, consulte la guía de inicio.

Para nuestro proyecto de demostración, crearemos Chakra-ui explorer , una aplicación web accesible de una sola página para buscar componentes de la interfaz de usuario de Chakra.

  • Ver proyecto en vivo en Netlify →

Primeros pasos con Chakra-ui Explorer

Suponiendo que ya tiene NPM instalado, cree una nueva aplicación Nuxt ejecutando:

 $ npx create-nuxt-app chakra-ui-explorer

O si lo prefieres en hilo, entonces ejecuta:

 $ yarn create nuxt-app chakra-ui-explorer

Siga el mensaje de instalación para terminar de crear su aplicación Nuxt.

Configuración de la interfaz de usuario de Chakra

Chakra UI usa Emotion para manejar estilos de componentes. Entonces, para comenzar con Chakra UI, deberá instalar Chakra UI junto con Emotion como una dependencia de pares. Para este proyecto, utilizaremos los módulos oficiales de Nuxt tanto para Chakra UI como para Emotion, lo que reducirá la fricción al comenzar con Chakra UI. Vamos a agregarlos a nuestro proyecto ejecutando el siguiente comando:

 npm i @chakra-ui/nuxt @nuxtjs/emotion

Nota : @nuxtjs/emotion permite que los estilos de sus componentes se generen e inyecten en la compilación del servidor.

Después de instalar ambos módulos, deberá registrarlos en el archivo nuxt.config.js en la opción de matriz de módulos:

 // nuxt.config.js modules: ['@chakra-ui/nuxt', '@nuxtjs/emotion'],

Para completar nuestro proceso de configuración de la interfaz de usuario de Chakra, debemos tocar nuestro componente de diseño predeterminado en layouts/ y agregar CThemeProvider , CColorModeProvider y CReset de la interfaz de usuario de Chakra.

Se recomienda que utilice el componente CReset para asegurarse de que todos los componentes proporcionados por Chakra UI funcionen correctamente.

El componente CThemeProvider hará que su tema esté disponible para cada parte de su aplicación, mientras que el componente CColorModeProvider es responsable de manejar el modo de color de nuestra aplicación, que puede estar en uno de dos estados: claro u oscuro. Finalmente, el componente CReset eliminará todos los estilos predeterminados del navegador.

Agreguemos los componentes antes mencionados en layouts/default.vue . En nuestra sección de plantillas, agreguemos esto:

 <!-- layouts/default.vue --> <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

Luego, en nuestra sección de secuencias de comandos, importaremos y registraremos los componentes de la siguiente manera:

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

Su componente de diseño default.vue debería verse así:

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

Nota : Tenga en cuenta que estoy envolviendo los componentes <c-reset /> y <nuxt /> en un componente c-box .

Configuración del tema de su aplicación

Chakra UI le permite establecer un tema para su aplicación. Por 'tema', me refiero a la configuración de la paleta de colores de su aplicación, la escala de tipos, las pilas de fuentes, los puntos de interrupción, los valores del radio del borde, etc. Dado que los colores y el contraste son componentes vitales de la accesibilidad, es importante utilizar colores que se perciban fácilmente.

Fuera de la caja, la interfaz de usuario de Chakra se envía con un objeto de tema predeterminado que satisface la mayoría de las necesidades de su aplicación en términos de colores, fuentes, etc. El tema predeterminado está configurado teniendo en cuenta el contraste, lo que permite alternar fácilmente los modos de color (más sobre esto más adelante).

La interfaz de usuario de Chakra, sin embargo, le permite ampliar o reemplazar por completo el tema predeterminado. Esto es posible aceptando un objeto de tema basado en la especificación de tema del sistema con estilo.

Los valores en el objeto del tema están automáticamente disponibles para su uso en su aplicación. Por ejemplo, los colores especificados en theme.colors pueden ser referenciados por las propiedades color , borderColor , backgroundColor , fill , stroke y style en sus componentes.

Para personalizar su aplicación, puede anular el tema predeterminado proporcionado por Chakra UI o establecer nuevos valores en él. Para hacer eso, el módulo Chakra UI Nuxt expone un objeto de chakra que tomará una propiedad extendTheme que toma un objeto. El objeto asignado a extendTheme se combinará recursivamente con el objeto de tema predeterminado de la interfaz de usuario de Chakra. Agreguemos la paleta de colores de nuestra marca a Chakra para poder usarla en nuestra aplicación.

Nota : Chakra UI recomienda agregar una paleta de colores en el objeto de colores de su tema usando claves de 50 a 900. Puede usar herramientas web como coolors y palx para generar estas paletas.

Para nuestra página de inicio de demostración, usaré un color de marca de lima. Para que la interfaz de usuario de Chakra sea consciente de este color, crearé un objeto customeTheme en una carpeta llamada chakra (puedes llamarlo como quieras) en la raíz del directorio de mi proyecto. En este objeto, definiré nuestra paleta de colores de marca.

Cree un archivo llamado theme.js en la carpeta que creó y luego agregue el siguiente fragmento:

 // ./chakra/theme.js const customTheme = { colors: { brand: { 50: '#f6fcee', 100: '#e2f4c8', 200: '#cbec9e', 300: '#b2e26e', 400: '#94d736', 500: '#75c800', 600: '#68b300', 700: '#599900', 800: '#477900', 900: '#294700' } } } module.exports = customTheme

Ahora fusionemos nuestro tema personalizado con la interfaz de usuario de Chakra. Hacemos eso en nuxt.config.js . Primero, necesitamos nuestro objeto de tema personalizado:

 import customTheme from './chakra/theme'

A continuación, tenemos que especificar la clave de chakra proporcionada por el módulo Chakra UI Nuxt y pasar customTheme a la propiedad extendTheme :

 chakra: { extendTheme: customTheme },

Su archivo nuxt.config.js debería verse así:

 // nuxt.config.js import customTheme from './chakra/theme' export default { mode: 'spa', /* * Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, /* * Customize the progress-bar color */ loading: { color: '#fff' }, /* * Global CSS */ css: [], /* * Plugins to load before mounting the App */ plugins: [], /* * Nuxt.js dev-modules */ buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module' ], /* * Nuxt.js modules */ modules: [ '@chakra-ui/nuxt', '@nuxtjs/emotion' ], chakra: { extendTheme: customTheme }, /* * Build configuration */ build: { /* * You can extend webpack config here */ extend (config, ctx) {} } }

Cuando ejecuta su aplicación con npm run dev , su página de inicio debería verse así:

Una aplicación de demostración que muestra Chakra UI y NuxtJS
(Vista previa grande)

Ahora que hemos instalado con éxito la interfaz de usuario de Chakra y agregado el tema personalizado de nuestra aplicación, comencemos a construir el explorador Chakra-ui.

Creando nuestra navegación principal

Queremos que nuestra navegación tenga nuestra marca, en este caso, será Chakra-ui explorer , 2 enlaces de navegación: Documentación y Repo , y un botón que se encarga de alternar nuestro modo de color. Vamos a crear un nuevo componente en el directorio de components llamado NavBar en el que crearemos la navegación principal de nuestra aplicación usando Chakra UI.

Hagámoslo. Agregue el siguiente fragmento de código a NavBar.vue :

 <template> <c-box as="nav" h="60px" px="4" d="flex" align-items="center" shadow="sm" > <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color: 'brand.900' }" > Chakra-ui Explorer </c-link> <c-box as="ul" color="gray.500" d="flex" align-items="center" list-style-type="none" ml="auto" > <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://vue.chakra-ui.com" > Documentation </c-link> </c-box> <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://github.com/chakra-ui/chakra-ui-vue" > Repo </c-link> </c-box> <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box> </c-box> </c-box> </template> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', components: { CBox, CLink, CIconButton } } </script>

A continuación, debemos importar este componente en nuestro componente de diseño predeterminado: default.vue y agregarlo a nuestra plantilla para que, en general, nuestro diseño predeterminado se vea así:

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar } } </script>

Cuando ejecute su aplicación ahora, podrá ver esto:

Puede ver que la navegación ya es accesible sin siquiera especificarlo. Esto solo se puede ver cuando presiona la tecla Tab en su teclado; La interfaz de usuario de Chakra maneja la gestión del enfoque mientras puede concentrarse en cada enlace en el menú de navegación.

El as apoyo

Desde el fragmento de código de nuestro NavBar.vue anterior, notará el as prop. Esta es una función disponible para los componentes de la interfaz de usuario de Chakra que le permite pasar una etiqueta HTML u otro componente para que se represente como la etiqueta base del componente junto con todos sus estilos y accesorios. Así que cuando hicimos:

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box>

le estamos pidiendo a Chakra UI que represente un elemento <li> y coloque un componente de botón dentro de él. También puede vernos usar ese patrón aquí:

 <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color : 'brand.900' }"> ChakraMart </c-link>

En el caso anterior, le pedimos a Chakra UI que represente el componente <nuxt-link /> de Nuxt.

El as prop le da el poder de usar el elemento correcto (o incorrecto) para el contexto de su marcado. Lo que esto significa es que puede aprovecharlo para crear su plantilla de aplicación utilizando marcas semánticas que harán que su aplicación sea más significativa para los lectores de pantalla. Entonces, en lugar de usar un elemento div genérico para el contenido principal de su aplicación, con as prop puede representar un elemento main que le dice a los lectores de pantalla que este es el contenido principal de su aplicación.

Nota : consulte la documentación de todos los accesorios expuestos por los componentes de la interfaz de usuario de Chakra. Además, eche un vistazo más de cerca a cómo se especificó el color de la marca en chakra/theme.js . Puede ver en el fragmento anterior que lo estamos usando como cualquiera de los colores que proporciona Chakra UI. Otra cosa a tener en cuenta es el ícono de la moon que usamos para el CIconButton en nuestra barra de navegación. El ícono de la moon es uno de los íconos predeterminados que la interfaz de usuario de Chakra proporciona de fábrica.

Modo de color

Una de las características de Chakra UI es la compatibilidad con el modo de color. Y se puede ver por el uso del icono de la moon en la navegación del explorador Chakra-ui, planeamos integrar el modo oscuro. Entonces, en lugar de dejarlo para el final, terminémoslo y conectémoslo ahora mismo. Para hacer esto, CColorModeProvider utiliza las funciones provide/inject, provide, $chakraColorMode y $toggleColorMode . $chakraColorMode devuelve el modo de color actual de su aplicación, mientras que $toggleColorMode cambia el modo de color de light a dark y viceversa. Para usar estas dos funciones, necesitaremos inyectarlas en el componente NavBar.vue . Hagamos esto a continuación en la sección <script /> :

 <script> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', inject: ['$chakraColorMode', '$toggleColorMode'], components: { CBox, CLink, CIconButton }, } </script>

Vamos a crear una propiedad calculada para devolver el modo de color:

 ... computed: { colorMode () { return this.$chakraColorMode() } }

Ahora que hemos inyectado ambas funciones en NavBar.vue , modifiquemos el botón de cambio de modo de color. Comenzaremos con el ícono para que muestre un ícono diferente según el modo de color. Nuestro componente CIconButton ahora se ve así en este estado:

 <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

Actualmente, estamos usando un atributo aria-label para indicar a los lectores de pantalla que cambien al modo oscuro. Modifiquemos esto para admitir tanto el modo claro como el oscuro:

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

Por último, agregaremos un controlador de eventos de clic en el botón para alternar el modo de color de nuestra aplicación usando la función $toggleColorMode . Al igual que:

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" />

Para probar si la configuración de nuestro modo de color funciona, agregaré una interpolación del modo de color y un texto al lado del CIconButton alternará nuestro modo de color. Al igual que:

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" /> Current mode: {{ colorMode }} </c-box>

Así es como se ve nuestra aplicación actualmente:

Así que hemos hecho el trabajo pesado al configurar el modo de color en la interfaz de usuario de Chakra. Así que ahora podemos diseñar nuestra aplicación según el modo de color. Vayamos a default.vue y usemos la ranura de modo de color provista por CColorModeProvider para diseñar nuestra aplicación. Primero modifiquemos nuestra plantilla en default.vue .

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider #default="{ colorMode }"> <c-box v-bind="mainStyles[colorMode]" w="100vw" h="100vh" as="section" > <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

Estamos desestructurando colorMode de la propiedad de accesorios de ranura proporcionada por CColorModeProvider y luego pasándolo como una clave dinámica a un objeto mainStyle que crearemos en un momento. La idea es usar un conjunto diferente de estilos basado en el valor de colorMode . También estoy usando el ancho y el alto con los accesorios abreviados: w y h respectivamente para establecer el ancho y el alto de nuestro componente CBox . Definamos este objeto mainStyles en nuestra sección de script:

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar }, data () { return { mainStyles: { dark: { bg: 'gray.900', color: 'whiteAlpha.900' }, light: { bg: 'whiteAlpha.900', color: 'gray.900' } } } } } </script>

¡Chakra-ui explorer ahora es compatible con el modo oscuro!

Ahora que tenemos nuestra barra de navegación y hemos configurado con éxito la compatibilidad con el modo oscuro para nuestra aplicación, concentrémonos en index.vue en nuestro directorio pages/ donde se puede encontrar la esencia de nuestra aplicación. Comenzaremos agregando un componente CBox así:

 <c-box as="main" d="flex" direction="column" align-items="center" p="10" > </c-box>

Luego agregaremos el componente CInput dentro de él. Nuestro componente de página index.vue se verá así:

 <template> <c-box as="main" d="flex" align-items="center" direction="column" w="auto" p="16" > <c-input placeholder="Search components..." size="lg" mb="5" is-full-width /> </c-box> </template> <script> import { CBox, CInput } from '@chakra-ui/vue' export default { components: { CBox, CInput } } </script>

Así es como se ve nuestra aplicación ahora:

Puede ver en el screencast anterior cómo el elemento CInput sabe automáticamente cuándo está en modo oscuro y se ajusta en consecuencia, aunque no lo hayamos configurado explícitamente. Además, el usuario puede pulsar la tecla de tabulación para centrarse en ese componente CInput .

Agregar la lista de componentes

Entonces, la idea del explorador Chakra-ui (como se indicó anteriormente) es mostrar al usuario todos los componentes disponibles en la interfaz de usuario de Chakra para que podamos tener una lista de esos componentes, así como los enlaces que llevarán al usuario a la documentación. del componente Para hacer esto, crearé una carpeta llamada data en la raíz del directorio de nuestro proyecto y luego crearé un archivo llamado index.js . En index.js , exportaré una matriz de objetos que contendrán los nombres de los componentes. Así es como debería verse el archivo:

 // ./data/index.js export const components = [ { name: 'Accordion' }, { name: 'Alert' }, { name: 'AlertDialog' }, { name: 'AspectRatioBox' }, { name: 'AspectRatioBox' }, { name: 'Avatar' }, { name: 'Badge' }, { name: 'Box' }, { name: 'Breadcrumb' }, { name: 'Button' }, { name: 'Checkbox' }, { name: 'CircularProgress' }, { name: 'CloseButton' }, { name: 'Code' }, { name: 'Collapse' }, { name: 'ControlBox' }, { name: 'Divider' }, { name: 'Drawer' }, { name: 'Editable' }, { name: 'Flex' }, { name: 'Grid' }, { name: 'Heading' }, { name: 'Icon' }, { name: 'IconButton' }, { name: 'IconButton' }, { name: 'Input' }, { name: 'Link' }, { name: 'List' }, { name: 'Menu' }, { name: 'Modal' }, { name: 'NumberInput' }, { name: 'Popover' }, { name: 'Progress' }, { name: 'PseudoBox' }, { name: 'Radio' }, { name: 'SimpleGrid' }, { name: 'Select' }, { name: 'Slider' }, { name: 'Spinner' }, { name: 'Stat' }, { name: 'Stack' }, { name: 'Switch' }, { name: 'Tabs' }, { name: 'Tag' }, { name: 'Text' }, { name: 'Textarea' }, { name: 'Toast' }, { name: 'Tooltip' } ]

Para que nuestra implementación esté completa, importaré la matriz anterior en pages/index.vue y la repetiré para mostrar todos los componentes. Además, le daremos al usuario la posibilidad de filtrar los componentes mediante el cuadro de búsqueda. Aquí está la implementación completa:

 // pages/index.vue <template> <c-box as="main" d="flex" align-items="space-between" flex-direction="column" w="auto" p="16" > <c-input v-model="search" placeholder="Search components..." size="lg" mb="10" is-full-width /> <c-grid template-columns="repeat(4, 1fr)" gap="3" p="5"> <c-box v-for="(chakraComponent, index) of filteredComponents" :key="index" h="10"> {{ chakraComponent.name }} <c-badge> <c-link is-external :href="lowercase(`https://vue.chakra-ui.com/${chakraComponent.name}`)" > <c-icon name="info" size="18px" /> </c-link> </c-badge> </c-box> </c-grid> </c-box> </template> <script> import { CBox, CInput, CGrid, CLink, CBadge, CIcon } from '@chakra-ui/vue' import { components as chakraComponents } from '../data' export default { components: { CBox, CInput, CGrid, CBadge, CIcon, CLink }, data () { return { search: '' } }, computed: { filteredComponents () { return chakraComponents.filter((component) => { return this.lowercase(component.name).includes(this.lowercase(this.search)) }) } }, methods: { lowercase (value) { return value.toLowerCase() } } } </script>

Y ahora nuestra aplicación se ve así:

Ahora puede ver cómo el modo oscuro es automático para la lista de componentes y cómo se agrega la gestión de enfoque para los enlaces (de forma predeterminada) para facilitar la accesibilidad.

Poniendo a prueba la interfaz de usuario de Chakra

Finalmente, veamos cómo califica nuestra aplicación ejecutando la prueba de accesibilidad Lighthouse en ella. Eso sí, esta prueba se basa en la evaluación de impacto del usuario de Axe. A continuación se muestra un screencast de la prueba. También puede ejecutar la prueba usted mismo siguiendo estos pasos.

En el screencast anterior, puede ver que nuestra aplicación Chakra UI tiene una puntuación de 85 en la prueba de accesibilidad del faro.

Conclusión

En este artículo, hemos abordado la necesidad de crear interfaces accesibles y también hemos visto cómo usar Chakra UI para crear aplicaciones accesibles desde cero mediante la creación de un explorador (Chakra-ui explorer) para los componentes de Chakra UI.

  • Ver la aplicación en vivo en Netlify →
  • Enlace al repositorio →