Como criar um aplicativo de front-end acessível com a interface do usuário do Chakra e o Nuxt.js

Para muitas pessoas, a web é uma parte essencial de suas vidas diárias. Eles o usam no trabalho, em casa e até mesmo na estrada. Acessibilidade na web significa que pessoas com deficiência podem usar a web igualmente. Portanto, é crucial que desenvolvedores e organizações que criam na Web construam inclusão e acessibilidade em seus aplicativos.

Para tornar a Web mais acessível, há algumas práticas recomendadas e padrões que você precisará implementar em seus aplicativos, como seguir o seguinte:

• Seção 508;
• Lei de Tecnologia Assistiva;
• Americans with Disabilities Act (ADA);
• WCAG 2.0 (Diretrizes A e AA);
• Diretrizes de acessibilidade móvel da BBC;
• WAI-ARIA ( Iniciativa de Acessibilidade da Web – Aplicações de Internet R ich Acessíveis ) .

Aprender a implementar esses padrões pode parecer uma tarefa assustadora quando você leva em consideração os prazos do projeto e outras restrições com as quais você precisa trabalhar como desenvolvedor. Nesse sentido, deixe-me apresentar a você um sistema de design de interface do usuário que foi criado para ajudá-lo a tornar seus aplicativos da Web acessíveis.

Chakra UI

Chakra UI é um sistema de design e estrutura de interface do usuário criado por Segun Adebayo. Ele foi criado com simplicidade, modularidade, composição e acessibilidade em mente. A interface do usuário do Chakra oferece todos os blocos de construção necessários para criar aplicativos front-end acessíveis.

Nota : Embora a interface do usuário do Chakra dependa do CSS-in-JS sob o capô, você não precisa conhecê-lo para usar a biblioteca.

Embora o framework tenha sido originalmente criado para o React, Jonathan Bakebwa liderou a portabilidade para o Vue. Assim, os desenvolvedores do Vuejs/NuxtJS agora podem utilizar a interface do usuário do Chakra para criar aplicativos da Web acessíveis.

Recursos da interface do usuário do Chakra

Chakra UI foi criado com os seguintes princípios em mente:

• Adereços de estilo
  A interface do usuário do Chakra possibilita estilizar componentes ou substituir seus estilos usando adereços. Isso reduz a necessidade de folhas de estilo ou estilos embutidos. Chakra UI atinge esse nível de flexibilidade usando Styled Systems sob o capô.
• Composição
  Os componentes na interface do usuário do Chakra foram divididos em partes menores com adereços mínimos para manter a complexidade baixa e compô-los juntos. Isso garantirá que os estilos e a funcionalidade sejam flexíveis e extensíveis. Por exemplo, você pode usar os componentes CBox e CPseudoBox para criar novos componentes.
• Acessível
  Os componentes da interface do usuário do Chakra seguem as especificações das diretrizes WAI-ARIA e possuem os atributos aria-* corretos. Você também pode encontrar o relatório de acessibilidade de cada componente criado em um arquivo chamado accessibility.md . Consulte o relatório de acessibilidade do componente CAccordion .
• Temático
  A interface do usuário do Chakra permite que você faça referência facilmente aos valores do seu tema em todo o aplicativo, em qualquer componente.
• Suporte ao modo escuro
  A maioria dos componentes na interface do usuário do Chakra são compatíveis com o modo escuro imediatamente.

Como a interface do usuário do Chakra oferece suporte à acessibilidade

Um dos princípios fundamentais por trás da criação do Chakra UI é a acessibilidade . Com isso em mente, todos os componentes da interface do usuário do Chakra saem da caixa com suporte para acessibilidade, fornecendo:

• Navegação pelo teclado — útil para usuários com deficiências motoras,
• Gerenciamento de foco,
• atributos aria-* que são necessários para leitores de tela,
• Trapping e restauração de foco para diálogos modais.
  

Introdução ao Chakra UI e Nuxt

Observação : para usar a interface do usuário do Chakra com o Vue.js, consulte o guia de introdução.

Para nosso projeto de demonstração, construiremos o Chakra-ui explorer — um aplicativo da Web de página única acessível para pesquisar componentes da interface do usuário do Chakra.

• Veja o projeto ao vivo no Netlify →

Introdução ao Chakra-ui Explorer

Supondo que você já tenha o NPM instalado, crie um novo aplicativo Nuxt executando:

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

Ou se preferir em fios, então execute:

 $ yarn create nuxt-app chakra-ui-explorer

Siga o prompt de instalação para concluir a criação do aplicativo Nuxt.

Configurando a IU do Chakra

Chakra UI usa Emotion para lidar com estilos de componentes. Então, para começar com a interface do usuário do Chakra, você precisará instalar a interface do usuário do Chakra junto com o Emotion como uma dependência de pares. Para este projeto, usaremos os módulos oficiais do Nuxt para a interface do usuário do Chakra e o Emotion, o que reduzirá o atrito ao começar a usar a interface do usuário do Chakra. Vamos adicioná-los ao nosso projeto executando o seguinte comando:

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

Nota : @nuxtjs/emotion permite que seus estilos de componentes sejam gerados e injetados na compilação do servidor.

Após instalar os dois módulos, você precisará registrá-los no arquivo nuxt.config.js na opção de array de módulos:

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

Para concluir nosso processo de configuração da interface do usuário do Chakra, precisamos tocar em nosso componente de layout padrão em layouts/ e adicionar CThemeProvider , CColorModeProvider e CReset da interface do usuário do Chakra.

É recomendado que você use o componente CReset para garantir que todos os componentes fornecidos pelo Chakra UI funcionem corretamente.

O componente CThemeProvider disponibilizará seu tema para todas as partes do seu aplicativo, enquanto o componente CColorModeProvider é responsável por manipular o modo de cor do nosso aplicativo, que pode estar em um dos dois estados: claro ou escuro. Por fim, o componente CReset removerá todos os estilos padrão do navegador.

Vamos adicionar os componentes mencionados em layouts/default.vue . Em nossa seção de modelos, vamos adicionar isso:

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

Em seguida, em nossa seção de script, importaremos e registraremos os componentes da seguinte forma:

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

Seu componente de layout default.vue deve ficar assim:

 <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 : Observe que estou envolvendo os componentes <c-reset /> e <nuxt /> em um componente c-box .

Configurando o tema do seu aplicativo

Chakra UI permite que você defina um tema para seu aplicativo. Por 'tema', quero dizer a configuração da paleta de cores do seu aplicativo, escala de tipo, pilhas de fontes, pontos de interrupção, valores de raio de borda e assim por diante. Como as cores e o contraste são componentes vitais da acessibilidade, é importante usar cores que sejam facilmente percebidas.

A interface do usuário do Chakra pronta para uso é fornecida com um objeto de tema padrão que atende à maioria das necessidades do seu aplicativo em termos de cores, fontes e assim por diante. O tema padrão é configurado com o contraste em mente, o que permite alternar facilmente os modos de cores (mais sobre isso posteriormente).

A interface do usuário do Chakra, no entanto, permite estender ou substituir completamente o tema padrão. Isso é possível aceitando um objeto de tema com base na Especificação de tema do sistema com estilo.

Os valores no objeto de tema estão automaticamente disponíveis para uso em seu aplicativo. Por exemplo, as cores especificadas em theme.colors podem ser referenciadas pelas props color , borderColor , backgroundColor , fill , stroke e style em seus componentes.

Para personalizar seu aplicativo, você pode substituir o tema padrão fornecido pelo Chakra UI ou definir novos valores nele. Para fazer isso, o módulo Chakra UI Nuxt expõe um objeto de chakra que receberá uma propriedade extendTheme que recebe um objeto. O objeto fornecido para extendTheme será mesclado recursivamente ao objeto de tema padrão da interface do usuário do Chakra. Vamos adicionar nossa paleta de cores da marca ao Chakra para que possamos usá-la em nosso aplicativo.

Nota : A interface do usuário do Chakra recomenda adicionar paleta de cores ao objeto de cores do seu tema usando as teclas de 50 a 900. Você pode usar ferramentas da Web como coolors e palx para gerar essas paletas.

Para nossa página inicial de demonstração, usarei uma cor de limão da marca. Para tornar o Chakra UI ciente dessa cor, criarei um objeto customeTheme em uma pasta chamada chakra (você pode chamá-lo como quiser) na raiz do diretório do meu projeto. Neste objeto, definirei a paleta de cores da nossa marca.

Crie um arquivo chamado theme.js na pasta que você criou e adicione o seguinte snippet:

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

Agora vamos mesclar nosso tema personalizado com a interface do usuário do Chakra. Fazemos isso em nuxt.config.js . Primeiro, precisamos do nosso objeto de tema personalizado:

 import customTheme from './chakra/theme'

Em seguida, temos que especificar a chave de chakra fornecida pelo módulo Chakra UI Nuxt e passar customTheme para a propriedade extendTheme :

 chakra: { extendTheme: customTheme },

Seu arquivo nuxt.config.js deve ficar assim:

 // 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) {} } }

Quando você executa seu aplicativo com npm run dev , sua página inicial deve ficar assim:

Agora que instalamos com sucesso o Chakra UI e adicionamos o tema personalizado do nosso aplicativo, vamos começar a construir o Chakra-ui explorer.

Criando nossa navegação principal

Queremos que nossa navegação tenha nosso nome de marca, neste caso, será Chakra-ui explorer , 2 links de navegação: Documentation e Repo , e um botão que é responsável por alternar nosso modo de cor. Vamos criar um novo componente no diretório de components chamado NavBar , no qual criaremos a navegação principal do nosso aplicativo usando a interface do usuário do Chakra.

Vamos fazer isso. Adicione o seguinte trecho ao 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>

Em seguida, precisamos importar este componente em nosso componente de layout padrão — default.vue e adicioná-lo ao nosso modelo para que, em geral, nosso layout padrão fique assim:

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

Ao executar seu aplicativo agora, você verá isso:

Você pode ver que a navegação já está acessível mesmo sem especificá-la. Isso só pode ser visto quando você pressiona a tecla Tab no teclado; A interface do usuário do Chakra lida com o gerenciamento de foco enquanto você pode se concentrar em cada link no menu de navegação.

O as prop

Do trecho do nosso NavBar.vue acima, você notará o as prop. Este é um recurso disponível para os componentes da interface do usuário do Chakra que permite passar uma tag HTML ou outro componente para ser renderizado como a tag base do componente junto com todos os seus estilos e adereços. Então, quando fizemos:

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

estamos pedindo ao Chakra UI para renderizar um elemento <li> e colocar um componente de botão dentro dele. Você também pode nos ver usando esse padrão aqui:

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

No caso acima, estamos pedindo ao Chakra UI para renderizar o componente <nuxt-link /> do Nuxt.

O as prop lhe dá o poder de usar o elemento certo (ou errado) para o contexto de sua marcação. O que isso significa é que você pode aproveitá-lo para criar seu modelo de aplicativo usando marcações semânticas que tornarão seu aplicativo mais significativo para os leitores de tela. Então, em vez de usar um elemento div genérico para o conteúdo principal do seu aplicativo, com o as prop você pode renderizar um elemento main informando aos leitores de tela que esse é o conteúdo principal do seu aplicativo.

Nota : Confira a documentação de todos os adereços expostos pelos componentes da interface do usuário do Chakra. Além disso, dê uma olhada em como a cor da marca em chakra/theme.js foi especificada. Você pode ver no snippet acima que estamos usando-o como qualquer uma das cores que o Chakra UI fornece. Outra coisa a ser observada é o ícone da moon que usamos para o CIconButton em nossa NavBar. O ícone da moon é um dos ícones padrão que o Chakra UI fornece pronto para uso.

Modo de cor

Um dos recursos do Chakra UI é o suporte ao modo de cor. E você pode dizer pelo uso do ícone da moon na navegação do explorador do Chakra-ui, planejamos integrar o modo escuro. Então, em vez de deixar para o final, vamos acabar com isso e ligá-lo agora. Para fazer isso, CColorModeProvider usando as funções fornecer/injetar do Vue, fornece as $chakraColorMode e $toggleColorMode . $chakraColorMode retorna o modo de cor atual do seu aplicativo enquanto $toggleColorMode alterna o modo de cor de light para dark e vice-versa. Para usar essas duas funções, precisaremos injetá-las no componente NavBar.vue . Vamos fazer isso abaixo na seção <script /> :

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

Vamos criar uma propriedade computada para retornar o modo de cor:

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

Agora que injetamos ambas as funções no NavBar.vue vamos modificar o botão de alternância do modo de cor. Começaremos com o ícone para que ele mostre um ícone diferente dependendo do modo de cor. Nosso componente CIconButton agora se parece com este estado:

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

Atualmente, estamos usando um atributo aria-label para dizer aos leitores de tela para alternar para o modo escuro. Vamos modificar isso para suportar o modo claro e escuro:

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

Por fim, adicionaremos um manipulador de eventos de clique no botão para alternar o modo de cor do nosso aplicativo usando a função $toggleColorMode . Igual a:

 <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 testar se nossa configuração de modo de cor está funcionando, adicionarei uma interpolação do modo de cor e um texto próximo ao CIconButton alternando nosso modo de cor. Igual a:

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

Veja como está nosso aplicativo atualmente:

Então, fizemos o trabalho pesado na configuração do modo de cor na interface do usuário do Chakra. Então agora podemos estilizar nosso aplicativo com base no modo de cor. Vamos para default.vue e usar o suporte de slot de modo de cor fornecido pelo CColorModeProvider para estilizar nosso aplicativo. Vamos modificar nosso template primeiro em 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 desestruturando o colorMode da propriedade slot props fornecida pelo CColorModeProvider e passando-o como uma chave dinâmica para um objeto mainStyle que criaremos em breve. A ideia é usar um conjunto diferente de estilos com base no valor colorMode . Também estou usando a largura e a altura com os adereços abreviados — w e h , respectivamente, para definir a largura e a altura do nosso componente CBox . Vamos definir este objeto mainStyles em nossa seção 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>

O explorador Chakra-ui agora tem suporte ao modo escuro!

Agora que temos nossa barra de navegação e configuramos com sucesso o suporte ao modo escuro para nosso aplicativo, vamos nos concentrar no index.vue em nosso diretório pages/ onde a carne do nosso aplicativo pode ser encontrada. Começaremos adicionando um componente CBox assim:

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

Em seguida, adicionaremos o componente CInput dentro dele. Nosso componente de página index.vue ficará assim:

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

Veja como está nossa aplicação agora:

Você pode ver no screencast acima como o elemento CInput sabe automaticamente quando está no modo escuro e ajusta de acordo, mesmo que não tenhamos definido isso explicitamente. Além disso, o usuário pode pressionar a tecla tab para focar nesse componente CInput .

Adicionando a lista de componentes

Portanto, a ideia do explorador do Chakra-ui (como dito anteriormente) é mostrar ao usuário todos os componentes disponíveis no Chakra UI para que possamos ter uma lista desses componentes, bem como os links que levarão o usuário à documentação do componente. Para fazer isso, criarei uma pasta chamada data na raiz do diretório do nosso projeto e depois criarei um arquivo chamado index.js . Em index.js , vou exportar um array de objetos que conterá os nomes dos componentes. Veja como o arquivo deve ficar:

 // ./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 nossa implementação seja completa, vou importar o array acima para pages/index.vue e iterar sobre ele para exibir todos os componentes. Além disso, daremos ao usuário a capacidade de filtrar os componentes usando a caixa de pesquisa. Aqui está a implementação 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>

E agora nossa aplicação está assim:

Agora você pode ver como o modo escuro é automático para a lista de componentes e como o gerenciamento de foco é adicionado aos links (por padrão) para ajudar na acessibilidade.

Colocando a interface do usuário do Chakra em teste

Por fim, vamos ver a pontuação do nosso aplicativo executando o teste de acessibilidade do Lighthouse nele. Lembre-se de que este teste é baseado na avaliação de impacto do usuário da Axe. Abaixo está um screencast do teste. Você também pode executar o teste seguindo estas etapas.

No screencast acima, você pode ver que nosso aplicativo Chakra UI tem uma pontuação de 85 no teste de acessibilidade do farol.

Conclusão

Neste artigo, abordamos a necessidade de criar interfaces acessíveis e também vimos como usar a interface do usuário do Chakra para criar aplicativos acessíveis desde o início, criando um explorador (Chakra-ui explorer) para os componentes da interface do usuário do Chakra.

• Veja o aplicativo ao vivo no Netlify →
• Link para o repositório →