Come creare un'applicazione front-end accessibile con l'interfaccia utente di Chakra e Nuxt.js

Per molte persone, il web è una parte essenziale della loro vita quotidiana. Lo usano al lavoro, a casa e anche in viaggio. L'accessibilità al Web significa che le persone con disabilità possono utilizzare il Web allo stesso modo. Quindi è fondamentale per gli sviluppatori e le organizzazioni che costruiscono sul Web creare inclusività e accessibilità nelle loro applicazioni.

Per rendere il Web più accessibile, ci sono un paio di best practice e standard che dovrai implementare nelle tue applicazioni, come aderire a quanto segue:

• Sezione 508;
• legge sulle tecnologie assistive;
• Americans with Disabilities Act (ADA);
• WCAG 2.0 (Linee guida A e AA);
• Linee guida per l'accessibilità mobile della BBC;
• Pratiche WAI-ARIA ( W eb A ccessibility I nitiative– A ccessible Rich I nternet A pplications).

Imparare a implementare questi standard può sembrare un compito arduo quando si tiene conto delle scadenze del progetto e di altri vincoli con cui si deve lavorare come sviluppatore. Alla luce di ciò, lascia che ti presenti un sistema di progettazione dell'interfaccia utente che è stato creato per aiutarti a rendere accessibili le tue applicazioni web.

Interfaccia utente del chakra

Chakra UI è un sistema di progettazione e un framework dell'interfaccia utente creato da Segun Adebayo. È stato creato pensando a semplicità, modularità, componibilità e accessibilità. Chakra UI ti offre tutti gli elementi costitutivi necessari per creare applicazioni front-end accessibili.

Nota : sebbene l'interfaccia utente di Chakra dipenda da CSS-in-JS sotto il cofano, non è necessario conoscerla per utilizzare la libreria.

Sebbene il framework sia stato originariamente creato per React, Jonathan Bakebwa ha guidato il porting su Vue. Quindi gli sviluppatori Vuejs/NuxtJS possono ora utilizzare l'interfaccia utente di Chakra per creare applicazioni web accessibili.

Caratteristiche dell'interfaccia utente di Chakra

Chakra UI è stata creata tenendo presenti i seguenti principi:

• Oggetti di scena per lo stile
  L'interfaccia utente di Chakra consente di applicare uno stile ai componenti o di sovrascriverne gli stili utilizzando gli oggetti di scena. Ciò riduce la necessità di fogli di stile o stili in linea. Chakra UI raggiunge questo livello di flessibilità usando Styled Systems sotto il cofano.
• Composizione
  I componenti nell'interfaccia utente di Chakra sono stati suddivisi in parti più piccole con oggetti di scena minimi per mantenere bassa la complessità e comporli insieme. Ciò garantirà che gli stili e le funzionalità siano flessibili ed estensibili. Ad esempio, puoi utilizzare i componenti CBox e CPseudoBox per creare nuovi componenti.
• Accessibile
  I componenti dell'interfaccia utente di Chakra seguono le specifiche delle linee guida WAI-ARIA e hanno gli attributi aria-* corretti. Puoi anche trovare il rapporto sull'accessibilità di ogni componente creato in un file chiamato accessibility.md . Vedere il rapporto sull'accessibilità per il componente CAccordion .
• Temabile
  Chakra UI ti offre la possibilità di fare riferimento facilmente ai valori del tuo tema nell'intera applicazione, su qualsiasi componente.
• Supporto per la modalità oscura
  La maggior parte dei componenti nell'interfaccia utente di Chakra sono compatibili con la modalità oscura immediatamente.

In che modo l'interfaccia utente di Chakra supporta l'accessibilità

Uno dei principi fondamentali alla base della creazione dell'interfaccia utente di Chakra è l' accessibilità . Con questo in mente, tutti i componenti nell'interfaccia utente di Chakra escono dalla scatola con il supporto per l'accessibilità fornendo:

• Navigazione da tastiera: utile per utenti con disabilità motorie,
• Gestione del focus,
• attributi aria-* necessari per gli screen reader,
• Focus trapping e ripristino per i dialoghi modali.
  

Iniziare con Chakra UI e Nuxt

Nota : per utilizzare l'interfaccia utente di Chakra con Vue.js, vedere la Guida introduttiva.

Per il nostro progetto demo, creeremo Chakra-ui explorer , un'applicazione Web accessibile a pagina singola per cercare i componenti dell'interfaccia utente di Chakra.

• Guarda il progetto live su Netlify →

Guida introduttiva a Chakra-ui Explorer

Supponendo che tu abbia già installato NPM, crea una nuova applicazione Nuxt eseguendo:

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

O se preferisci in filato, allora esegui:

 $ yarn create nuxt-app chakra-ui-explorer

Segui la richiesta di installazione per completare la creazione dell'applicazione Nuxt.

Configurazione dell'interfaccia utente di Chakra

L'interfaccia utente di Chakra utilizza Emotion per gestire gli stili dei componenti. Quindi, per iniziare con l'interfaccia utente di Chakra, dovrai installare l'interfaccia utente di Chakra insieme a Emotion come dipendenza tra pari. Per questo progetto, utilizzeremo i moduli Nuxt ufficiali sia per l'interfaccia utente di Chakra che per Emotion, il che ridurrà l'attrito nell'iniziare con l'interfaccia utente di Chakra. Aggiungiamoli al nostro progetto eseguendo il seguente comando:

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

Nota : @nuxtjs/emotion consente di generare e iniettare gli stili dei componenti nella build del server.

Dopo aver installato entrambi i moduli, dovrai registrarli nel file nuxt.config.js sotto l'opzione dell'array dei moduli:

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

Per completare il nostro processo di configurazione dell'interfaccia utente di Chakra, dobbiamo toccare il nostro componente di layout predefinito in layouts/ e aggiungere i componenti CThemeProvider , CColorModeProvider e CReset dall'interfaccia utente di Chakra.

Si consiglia di utilizzare il componente CReset per garantire che tutti i componenti forniti dall'interfaccia utente di Chakra funzionino correttamente.

Il componente CThemeProvider renderà il tuo tema disponibile per ogni parte della tua applicazione, mentre il componente CColorModeProvider è responsabile della gestione della modalità colore della nostra applicazione che può essere in uno dei due stati: chiaro o scuro. Infine, il componente CReset rimuoverà tutti gli stili predefiniti del browser.

Aggiungiamo i suddetti componenti in layouts/default.vue . Nella nostra sezione dei modelli, aggiungiamo questo:

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

Quindi nella nostra sezione script, importeremo e registreremo i componenti in questo modo:

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

Il tuo componente di layout default.vue dovrebbe assomigliare a questo:

 <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 : si noti che sto avvolgendo entrambi i componenti <c-reset /> e <nuxt /> in un componente c-box .

Impostazione del tema dell'applicazione

Chakra UI ti consente di impostare un tema per la tua applicazione. Per "tema" intendo l'impostazione della tavolozza dei colori dell'applicazione, della scala del tipo, delle pile di caratteri, dei punti di interruzione, dei valori del raggio del bordo e così via. Poiché i colori e il contrasto sono componenti vitali dell'accessibilità, è importante utilizzare colori facilmente percepibili.

L'interfaccia utente di Chakra viene fornita con un oggetto tema predefinito che soddisfa la maggior parte delle esigenze dell'applicazione in termini di colori, caratteri e così via. Il tema predefinito è impostato tenendo presente il contrasto che consente di alternare facilmente le modalità colore (ne parleremo più avanti).

Chakra UI, tuttavia, ti consente di estendere o sostituire completamente il tema predefinito. Ciò è possibile accettando un oggetto tema basato sulla specifica del tema del sistema con stile.

I valori nell'oggetto tema sono automaticamente disponibili per l'uso nell'applicazione. Ad esempio, i colori specificati in theme.colors possono essere referenziati dagli oggetti di scena color , borderColor , backgroundColor , fill , stroke e style nei componenti.

Per personalizzare la tua applicazione, puoi sovrascrivere il tema predefinito fornito dall'interfaccia utente di Chakra o impostarvi nuovi valori. Per fare ciò, il modulo Chakra UI Nuxt espone un oggetto chakra che acquisirà una proprietà extendTheme che prende un oggetto. L'oggetto fornito a extendTheme verrà unito in modo ricorsivo all'oggetto tema predefinito dell'interfaccia utente di Chakra. Aggiungiamo la nostra tavolozza di colori del marchio a Chakra in modo da poterla utilizzare nella nostra applicazione.

Nota : l'interfaccia utente di Chakra consiglia di aggiungere la tavolozza dei colori nell'oggetto colori del tuo tema utilizzando i tasti da 50 a 900. Puoi utilizzare strumenti web come coolors e palx per generare queste tavolozze.

Per la nostra homepage demo, userò un colore di marca lime. Per rendere l'interfaccia utente di Chakra consapevole di questo colore, creerò un oggetto customeTheme in una cartella chiamata chakra (puoi chiamarla come vuoi) nella radice della directory del mio progetto. In questo oggetto definirò la tavolozza dei colori del nostro marchio.

Crea un file chiamato theme.js nella cartella che hai creato e quindi aggiungi il seguente 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

Ora uniamo il nostro tema personalizzato all'interfaccia utente di Chakra. Lo facciamo in nuxt.config.js . Innanzitutto, abbiamo bisogno del nostro oggetto tema personalizzato:

 import customTheme from './chakra/theme'

Successivamente, dobbiamo specificare la chiave chakra fornita dal modulo Chakra UI Nuxt e passare customTheme alla proprietà extendTheme :

 chakra: { extendTheme: customTheme },

Il tuo file nuxt.config.js dovrebbe assomigliare a questo:

 // 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 esegui la tua applicazione con npm run dev , la tua home page dovrebbe apparire così:

Ora che abbiamo installato con successo l'interfaccia utente di Chakra e aggiunto il tema personalizzato della nostra applicazione, iniziamo a costruire Chakra-ui explorer.

Creazione della nostra navigazione principale

Vogliamo che la nostra navigazione abbia il nostro marchio, in questo caso sarà Chakra-ui explorer , 2 collegamenti di navigazione: Documentazione e Repo e un pulsante responsabile dell'attivazione della nostra modalità colore. Creiamo un nuovo componente nella directory dei components chiamata NavBar in cui creeremo la navigazione principale della nostra applicazione utilizzando l'interfaccia utente di Chakra.

Facciamolo. Aggiungi il seguente snippet 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>

Successivamente, dobbiamo importare questo componente nel nostro componente di layout predefinito - default.vue e aggiungerlo al nostro modello, quindi nel complesso il nostro layout predefinito dovrebbe assomigliare a questo:

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

Quando esegui ora la tua applicazione, vedrai questo:

Puoi vedere che la navigazione è già accessibile senza nemmeno specificarla. Questo può essere visto solo quando premi il tasto Tab sulla tastiera; L'interfaccia utente di Chakra gestisce la gestione della messa a fuoco mentre puoi concentrarti su ciascun collegamento nel menu di navigazione.

Il as Prop

Dal nostro frammento di NavBar.vue sopra, noterai l' as prop. Questa è una funzionalità disponibile per i componenti dell'interfaccia utente di Chakra che ti consente di passare un tag HTML o un altro componente da renderizzare come tag di base del componente insieme a tutti i suoi stili e prop. Quindi quando abbiamo fatto:

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

stiamo chiedendo all'interfaccia utente di Chakra di eseguire il rendering di un elemento <li> e di posizionare un componente pulsante al suo interno. Puoi anche vederci usare quel modello qui:

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

Nel caso precedente, chiediamo all'interfaccia utente di Chakra di eseguire il rendering del componente <nuxt-link /> di Nuxt.

L' as prop ti dà il potere di usare l'elemento giusto (o sbagliato) per il contesto del tuo markup. Ciò significa che puoi sfruttarlo per creare il tuo modello di applicazione utilizzando i markup semantici che renderanno la tua applicazione più significativa per gli screen reader. Quindi, invece di utilizzare un elemento div generico per il contenuto principale della tua applicazione, con as prop puoi eseguire il rendering di un elemento main che dice agli screen reader che questo è il contenuto principale della tua applicazione.

Nota : controlla la documentazione per tutti gli oggetti di scena esposti dai componenti dell'interfaccia utente di Chakra. Inoltre, dai un'occhiata più da vicino a come è stato specificato il colore del marchio in chakra/theme.js . Puoi vedere dallo snippet sopra che lo stiamo usando come uno qualsiasi dei colori forniti dall'interfaccia utente di Chakra. Un'altra cosa da tenere presente è l'icona della moon che abbiamo usato per il CIconButton sulla nostra NavBar. L'icona della moon è una delle icone predefinite che l'interfaccia utente di Chakra fornisce immediatamente.

Modalità colore

Una delle caratteristiche dell'interfaccia utente di Chakra è il supporto della modalità colore. E puoi dire dall'uso dell'icona della moon nella navigazione di Chakra-ui explorer, abbiamo in programma di integrare la modalità oscura. Quindi, invece di lasciarlo per ultimo, facciamola finita e colleghiamola subito. Per fare ciò, CColorModeProvider usa le funzioni di fornire/iniettare di Vue, fornisce, $chakraColorMode e $toggleColorMode . $chakraColorMode restituisce la modalità colore corrente della tua applicazione mentre $toggleColorMode cambia la modalità colore da light a dark e viceversa. Per utilizzare queste due funzioni, dovremo inserirle nel componente NavBar.vue . Facciamolo di seguito nella sezione <script /> :

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

Creiamo una proprietà calcolata per restituire la modalità colore:

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

Ora che abbiamo inserito entrambe le funzioni in NavBar.vue , modifichiamo il pulsante per attivare/disattivare la modalità colore. Inizieremo con l'icona in modo che mostri un'icona diversa a seconda della modalità colore. Il nostro componente CIconButton ora ha questo aspetto in questo stato:

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

Attualmente, stiamo usando un attributo aria-label per dire agli screen reader di passare alla modalità oscura. Modifichiamolo per supportare sia la modalità chiara che quella scura:

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

Infine, aggiungeremo un gestore di eventi clic sul pulsante per attivare la modalità colore della nostra applicazione utilizzando la funzione $toggleColorMode . Così:

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

Per verificare se la nostra impostazione della modalità colore funziona, aggiungerò un'interpolazione della modalità colore e un testo accanto a CIconButton che alterna la nostra modalità colore. Così:

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

Ecco come appare attualmente la nostra app:

Quindi abbiamo fatto il lavoro pesante nell'impostazione della modalità colore nell'interfaccia utente di Chakra. Quindi ora possiamo modellare la nostra applicazione in base alla modalità colore. Andiamo su default.vue e usiamo lo slot prop della modalità colore fornito da CColorModeProvider per definire lo stile della nostra applicazione. Modifichiamo prima il nostro modello in 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>

Stiamo destrutturando colorMode dalla proprietà degli oggetti di scena dello slot fornita da CColorModeProvider e quindi passandola come chiave dinamica a un oggetto mainStyle che creeremo tra un po'. L'idea è di utilizzare un diverso insieme di stili in base al valore colorMode . Sto anche usando la larghezza e l'altezza con gli oggetti di scena abbreviati - w e h rispettivamente per impostare la larghezza e l'altezza del nostro componente CBox . Definiamo questo oggetto mainStyles nella nostra sezione 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 ora supporta la modalità oscura!

Ora abbiamo la nostra barra di navigazione e abbiamo impostato con successo il supporto per la modalità oscura per la nostra applicazione, concentriamoci su index.vue nelle nostre pages/ directory dove è possibile trovare la carne della nostra applicazione. Inizieremo con l'aggiunta di un componente CBox in questo modo:

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

Quindi aggiungeremo il componente CInput al suo interno. Il nostro componente della pagina index.vue sarà quindi simile a questo:

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

Ecco come appare ora la nostra applicazione:

Puoi vedere dallo screencast sopra come l'elemento CInput sa automaticamente quando è in modalità oscura e si regola di conseguenza anche se non l'abbiamo impostato esplicitamente. Inoltre, l'utente può premere il tasto Tab per concentrarsi su quel componente CInput .

Aggiunta dell'elenco dei componenti

Quindi l'idea di Chakra-ui explorer (come affermato in precedenza) è di mostrare all'utente tutti i componenti disponibili nell'interfaccia utente di Chakra in modo da poter avere un elenco di quei componenti così come i collegamenti che porteranno l'utente alla documentazione del componente. Per fare ciò, creerò una cartella chiamata data nella radice della directory del nostro progetto, quindi creerò un file chiamato index.js . In index.js , esporterò un array di oggetti che conterrà i nomi dei componenti. Ecco come dovrebbe apparire il file:

 // ./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' } ]

Affinché la nostra implementazione sia completa, importerò l'array sopra in pages/index.vue e scorrerò su di esso per visualizzare tutti i componenti. Inoltre, daremo all'utente la possibilità di filtrare i componenti utilizzando la casella di ricerca. Ecco l'implementazione 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 ora la nostra applicazione si presenta così:

Ora puoi vedere come la modalità oscura è automatica per l'elenco dei componenti e come viene aggiunta la gestione del focus per i collegamenti (per impostazione predefinita) per facilitare l'accessibilità.

Mettere alla prova l'interfaccia utente di Chakra

Infine, vediamo come si classifica la nostra app eseguendo il test di accessibilità Lighthouse su di essa. Intendiamoci, questo test si basa sulla valutazione dell'impatto degli utenti di Axe. Di seguito uno screencast del test. Puoi anche eseguire tu stesso il test seguendo questi passaggi.

Dallo screencast sopra puoi vedere che la nostra app Chakra UI ha un punteggio di 85 nel test di accessibilità del faro.

Conclusione

In questo articolo, abbiamo toccato la necessità di creare interfacce accessibili e abbiamo anche visto come utilizzare l'interfaccia utente di Chakra per creare applicazioni accessibili da zero costruendo un esploratore (Chakra-ui explorer) per i componenti dell'interfaccia utente di Chakra.

• Guarda l'applicazione live su Netlify →
• Collegamento al repository →