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

En este artículo, veremos cómo utilizar Chakra UI y NuxtJS para crear aplicaciones front-end accesibles. Para poder seguir adelante, debe estar familiarizado con el uso del marco de interfaz de usuario 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 utilizan en el trabajo, en casa e incluso en la carretera. La accesibilidad web significa que las personas con discapacidades pueden utilizar la web por igual. Por lo tanto, es crucial que los desarrolladores y las organizaciones que construyen en la web incorporen inclusión y accesibilidad a sus aplicaciones.

Para hacer que la web sea más accesible, existen 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 de Asistencia ;
• Ley de Estadounidenses con Discapacidades (ADA) ;
• WCAG 2.0 (Pautas A y AA) ;
• Directrices de accesibilidad móvil de la BBC ;
• Prácticas WAI - ARIA ( Iniciativa de Accesibilidad Web – Aplicaciones de Internet Ricas Accesibles ) .

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

Interfaz de usuario de chakras

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 internamente, no es necesario saberlo para utilizar la biblioteca.

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

Características de la interfaz de usuario de Chakra

La interfaz de usuario de Chakra se creó teniendo en cuenta los siguientes principios:

• Accesorios de estilo
  Chakra UI 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ó.
• Los componentes de composición
  en la interfaz de usuario de Chakra se han dividido en partes más pequeñas con accesorios mínimos para mantener baja la complejidad y componerlos juntos. Esto asegurará que los estilos y la funcionalidad sean flexibles y extensibles. Por ejemplo, puede utilizar los componentes CBoxy CPseudoBoxpara crear nuevos componentes.
• Los componentes accesibles
  de la interfaz de usuario de Chakra siguen las especificaciones de las pautas 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 CAccordioncomponente.
• La interfaz de usuario Themeable
  Chakra le brinda la capacidad de hacer referencia fácilmente a los valores de su tema en toda su aplicación, en cualquier componente.
• Compatibilidad con el modo oscuro
  La mayoría de los componentes de Chakra UI son compatibles con el modo oscuro desde el primer momento.

Cómo la interfaz de usuario de Chakra respalda la accesibilidad

Uno de los principios básicos detrás de la creación de Chakra UI es la accesibilidad . Teniendo esto en cuenta, todos los componentes de Chakra UI vienen listos para usar y son compatibles con la accesibilidad al proporcionar:

• Navegación por teclado: útil para usuarios con discapacidades motoras.
• gestión de enfoque,
• atributos aria-* que necesitan los lectores de pantalla,
• Captura de enfoque y restauración para diálogos modales.

Primeros pasos con la interfaz de usuario de Chakra y Nuxt

Nota : Para utilizar la interfaz de usuario de Chakra con Vue.js, consulte la guía de introducción .

Para nuestro proyecto de demostración, crearemos el explorador Chakra-ui , 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 las instrucciones de instalación para terminar de crear su aplicación Nuxt.

Configurar 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, usaremos los módulos oficiales de Nuxt tanto para Chakra UI como para Emotion, lo que reducirá la fricción al comenzar con Chakra UI. Agreguémoslos a nuestro proyecto ejecutando el siguiente comando:

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

Nota : @nuxtjs/emotionpermite generar e inyectar los estilos de sus componentes en la compilación del servidor.

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

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

Para completar nuestro proceso de configuración de Chakra UI, debemos tocar nuestro componente de diseño predeterminado layouts/y agregar componentes CThemeProvider, CColorModeProvidery CResetdesde Chakra UI.

Se recomienda utilizar el CResetcomponente para garantizar que todos los componentes proporcionados por Chakra UI funcionen correctamente.

El CThemeProvidercomponente hará que su tema esté disponible para cada parte de su aplicación, mientras que el CColorModeProvidercomponente 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 CResetcomponente 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    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 script, importaremos y registraremos los componentes de esta manera:

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

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

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

Nota : Observe que estoy envolviendo ambos componentes c-reset /y nuxt /en un c-boxcomponente.

Configuración del tema de su aplicación

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

La interfaz de usuario de Chakra lista para usar viene 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).

Sin embargo, la interfaz de usuario de Chakra le permite ampliar o reemplazar completamente 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 disponibles automáticamente para su uso en su aplicación. Por ejemplo, los colores especificados en theme.colorspueden ser referenciados por los accesorios color, borderColor, backgroundColor, fill, strokey styleen sus componentes.

Para personalizar su aplicación, puede anular el tema predeterminado proporcionado por la interfaz de usuario de Chakra o establecer nuevos valores en él. Para hacer eso, el módulo Chakra UI Nuxt expone un chakraobjeto que tomará una extendThemepropiedad que toma un objeto. El objeto asignado extendThemese fusionará 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 al objeto de colores de su tema usando claves del 50 al 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 lima de marca. Para que Chakra UI reconozca este color, crearé un customeThemeobjeto en una carpeta llamada chakra(puedes llamarla como quieras) en la raíz del directorio de mi proyecto. En este objeto definiré la paleta de colores de nuestra marca.

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

// ./chakra/theme.jsconst 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. Eso lo hacemos en nuxt.config.js. Primero, necesitamos nuestro objeto de tema personalizado:

import customTheme from './chakra/theme'

A continuación, debemos especificar la chakraclave proporcionada por el módulo Chakra UI Nuxt y pasarla customThemea la extendThemepropiedad:

chakra: {  extendTheme: customTheme},

Su nuxt.config.jsarchivo debería verse así:

// nuxt.config.jsimport 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í:

Ahora que hemos instalado con éxito Chakra UI 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. Creemos un nuevo componente en el componentsdirectorio llamado NavBaren el que crearemos la navegación principal de nuestra aplicación usando Chakra UI.

Hagámoslo. Agregue el siguiente fragmento 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/templatescriptimport { 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.vuey agregarlo a nuestra plantilla para que, en general, nuestro diseño predeterminado se vea así:

template  div    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/templatescriptimport { 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:

which will make your application more meaningful to screen readers. So instead of using a generic div element for the main content of your application, with the as prop you can render a main element telling screen readers that this is the main content of your application.

Note: Check out the documentation for all props exposed by Chakra UI components. Also, take a closer look at how the brand color in chakra/theme.js was specified. You can see from the snippet above that we’re using it as any of the colors that Chakra UI provides. Another thing to be aware of is the moon icon that we used for the CIconButton on our NavBar. The moon icon is one of the default icons that Chakra UI provides out of the box.

Color Mode

One of the features of Chakra UI is color mode support. And you can tell from the use of the moon icon in Chakra-ui explorer’s navigation, we plan on integrating dark mode. So instead of leaving it for last, let’s get it over with and wire it up right now. To do this, CColorModeProvider using Vue’s provide/inject, provides, $chakraColorMode and $toggleColorMode functions. $chakraColorMode returns the current color mode of your application while $toggleColorMode toggles the color mode from light to dark and vice versa. To use these two functions, we’ll need to inject them into the NavBar.vue component. Let’s do this below in the script / section:

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

Let’s create a computed property to return the color mode:

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

Now that we have injected both functions in NavBar.vue let’s modify the toggle color mode button. We’ll start with the icon so that it shows a different icon depending on the color mode. Our CIconButton component now looks like this at this state:

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

Currently, we are using an aria-label attribute to tell screen-readers to Switch to dark mode. Let’s modify this to support both light and dark mode:

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

Lastly, we will add a click event handler on the button to toggle the color mode of our application using the $toggleColorMode function. Like so:

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"/

To test if our color mode set up is working, I’ll add an interpolation of the color mode and a text next to the CIconButton toggling our color mode. Like so:

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

Here is what our app currently looks like:

colorMode from the slot props property provided by CColorModeProvider and then passing it as a dynamic key to a mainStyle object which we will create in a bit. The idea is to use a different set of styles based on the colorMode value. I am also using the width and height with the shorthand props — w and h respectively to set the width and height of our CBox component. Let’s define this mainStyles object in our script section:

scriptimport { 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 now has dark mode support!

component inside it. Our index.vue page component will then look like this:

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/templatescriptimport { CBox, CInput } from '@chakra-ui/vue'export default {  components: {    CBox,    CInput  }}/script

Here is how our application looks like now:

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

(ra, yk, il)Explora más en

• Accesibilidad
• interfaz de usuario
• vista
• Nuxt.js
• javascript