Cum să construiți o aplicație front-end accesibilă cu Chakra UI și Nuxt.js

Pentru mulți oameni, web-ul este o parte esențială a vieții lor de zi cu zi. Îl folosesc la serviciu, acasă și chiar și pe drum. Accesibilitatea web înseamnă că persoanele cu dizabilități pot folosi internetul în mod egal. Prin urmare, este esențial pentru dezvoltatorii și organizațiile care se bazează pe web să creeze incluziune și accesibilitate în aplicațiile lor.

Pentru a face web-ul mai accesibil, există câteva bune practici și standarde pe care va trebui să le implementați în aplicațiile dvs., cum ar fi aderarea la următoarele:

• Secțiunea 508;
• Legea tehnologiei de asistență;
• Americans with Disabilities Act (ADA);
• WCAG 2.0 (Orientări A & AA);
• Ghidul BBC pentru accesibilitatea mobilă;
• Practici WAI-ARIA ( I nitiative de accesibilitate W eb – A ccessible R ich I nternet A pplications ) .

A învăța să implementați aceste standarde poate părea o sarcină descurajantă atunci când luați în considerare termenele limită ale proiectelor și alte constrângeri cu care trebuie să lucrați ca dezvoltator. În această lumină, permiteți-mi să vă prezint un sistem de design UI care a fost creat pentru a vă ajuta să vă faceți accesibile aplicațiile web.

Chakra UI

Chakra UI este un sistem de design și un cadru UI creat de Segun Adebayo. A fost creat având în vedere simplitatea, modularitatea, compozibilitatea și accesibilitatea. Chakra UI vă oferă toate elementele de bază necesare pentru a crea aplicații front-end accesibile.

Notă : În timp ce Chakra UI depinde de CSS-in-JS sub capotă, nu trebuie să o știți pentru a utiliza biblioteca.

Deși cadrul a fost creat inițial pentru React, Jonathan Bakebwa a condus portarea către Vue. Deci, dezvoltatorii Vuejs/NuxtJS pot utiliza acum Chakra UI pentru a crea aplicații web accesibile.

Caracteristicile Chakra UI

Chakra UI a fost creată având în vedere următoarele principii:

• Recuzită de stil
  Chakra UI face posibilă stilarea componentelor sau suprascrierea stilurilor acestora prin utilizarea elementelor de recuzită. Acest lucru reduce nevoia de stiluri de foaie de stil sau inline. Chakra UI atinge acest nivel de flexibilitate prin utilizarea sistemelor stilizate sub capotă.
• Compoziţie
  Componentele din Chakra UI au fost împărțite în părți mai mici, cu elemente de recuzită minime pentru a menține complexitatea scăzută și a le compune împreună. Acest lucru va asigura că stilurile și funcționalitatea sunt flexibile și extensibile. De exemplu, puteți utiliza componentele CBox și CPseudoBox pentru a crea componente noi.
• Accesibil
  Componentele Chakra UI urmează specificațiile ghidurilor WAI-ARIA și au atributele aria-* potrivite. De asemenea, puteți găsi raportul de accesibilitate al fiecărei componente create într-un fișier numit accessibility.md . Consultați raportul de accesibilitate pentru componenta CAccordion .
• Tematică
  Chakra UI vă oferă posibilitatea de a face referire cu ușurință la valori din tema dvs. în întreaga aplicație, pe orice componentă.
• Suport pentru modul întunecat
  Majoritatea componentelor din Chakra UI sunt compatibile cu modul întunecat imediat din cutie.

Cum Chakra UI acceptă accesibilitatea

Unul dintre principiile de bază din spatele creării Chakra UI este accesibilitatea . Având în vedere acest lucru, toate componentele din Chakra UI ies din cutie cu suport pentru accesibilitate, oferind:

• Navigare cu tastatură — utilă pentru utilizatorii cu dizabilități motorii,
• Managementul focalizării,
• Atributele aria-* care sunt necesare cititoarelor de ecran,
• Captarea focalizării și restaurarea pentru dialogurile modale.
  

Noțiuni introductive cu Chakra UI și Nuxt

Notă : Pentru a utiliza Chakra UI cu Vue.js, consultați ghidul Noțiuni introductive.

Pentru proiectul nostru demonstrativ, vom construi Chakra-ui explorer — o aplicație web accesibilă cu o singură pagină pentru a căuta componentele Chakra UI.

• Vezi proiectul live pe Netlify →

Noțiuni introductive cu Chakra-ui Explorer

Presupunând că aveți deja instalat NPM, creați o nouă aplicație Nuxt rulând:

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

Sau dacă preferați în fire, atunci rulați:

 $ yarn create nuxt-app chakra-ui-explorer

Urmați promptul de instalare pentru a finaliza crearea aplicației dvs. Nuxt.

Configurarea interfeței de utilizare Chakra

Chakra UI folosește Emotion pentru a gestiona stilurile componente. Așadar, pentru a începe cu Chakra UI, va trebui să instalați Chakra UI alături de Emotion ca dependență de la egal la egal. Pentru acest proiect, vom folosi modulele oficiale Nuxt atât pentru Chakra UI, cât și pentru Emotion, ceea ce va reduce frecarea în începerea cu Chakra UI. Să le adăugăm la proiectul nostru executând următoarea comandă:

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

Notă : @nuxtjs/emotion permite generarea și injectarea stilurilor tale componente în construirea serverului.

După instalarea ambelor module, va trebui să le înregistrați în fișierul nuxt.config.js sub opțiunea modules array:

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

Pentru a finaliza procesul nostru de configurare a Chakra UI, trebuie să atingem componenta noastră implicită de aspect în layouts/ și să adăugăm CThemeProvider , CColorModeProvider și CReset din Chakra UI.

Este recomandat să utilizați componenta CReset pentru a vă asigura că toate componentele furnizate de Chakra UI funcționează corect.

Componenta CThemeProvider va face tema dvs. disponibilă pentru fiecare parte a aplicației dvs., în timp ce componenta CColorModeProvider este responsabilă pentru gestionarea modului de culoare al aplicației noastre, care poate fi într-una din două stări: deschis sau întunecat. În cele din urmă, componenta CReset va elimina toate stilurile implicite ale browserului.

Să adăugăm componentele menționate mai sus în layouts/default.vue . În secțiunea noastră de șabloane, să adăugăm asta:

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

Apoi, în secțiunea noastră de scripturi, vom importa și înregistra componentele astfel:

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

Componenta dvs. de aspect default.vue ar trebui să arate astfel:

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

Notă : Observați că încap atât componentele <c-reset /> cât și <nuxt /> într-o componentă c-box .

Setarea temei aplicației dvs

Chakra UI vă permite să setați o temă pentru aplicația dvs. Prin „temă”, mă refer la setarea paletei de culori a aplicației tale, scara tipului, stivele de fonturi, punctele de întrerupere, valorile razei de margine și așa mai departe. Deoarece culorile și contrastul sunt componente vitale ale accesibilității, este important să folosiți culori care sunt ușor de perceput.

Ieșit din cutie, Chakra UI este livrat cu un obiect temă implicit care oferă cele mai multe dintre nevoile aplicației dvs. în ceea ce privește culorile, fonturile și așa mai departe. Tema implicită este configurată având în vedere contrastul, ceea ce permite comutarea cu ușurință a modurilor de culoare (mai multe despre asta mai târziu).

Chakra UI, totuși, vă permite să extindeți sau să înlocuiți complet tema implicită. Acest lucru este posibil prin acceptarea unui obiect temă bazat pe specificația temei de sistem cu stil.

Valorile din obiectul temă sunt automat disponibile pentru utilizare în aplicația dvs. De exemplu, culorile specificate în theme.colors pot fi referite prin elementele de recuzită color , borderColor , backgroundColor , fill , stroke și style din componentele dvs.

Pentru a vă personaliza aplicația, puteți înlocui tema implicită furnizată de Chakra UI sau puteți seta noi valori în ea. Pentru a face acest lucru, modulul Chakra UI Nuxt expune un obiect chakra care va prelua o proprietate extendTheme care preia un obiect. Obiectul dat la extendTheme va fi îmbinat recursiv cu obiectul temă implicită Chakra UI. Să adăugăm paleta noastră de culori a mărcii la Chakra, astfel încât să o putem folosi în aplicația noastră.

Notă : Chakra UI recomandă adăugarea paletei de culori în obiectul de culori al temei dvs. folosind tastele de la 50 la 900. Puteți utiliza instrumente web precum coolors și palx pentru a genera aceste palete.

Pentru pagina noastră de pornire demonstrativă, voi folosi o culoare de marcă de var. Pentru a face Chakra UI conștientă de această culoare, voi crea un obiect customeTheme într-un folder numit chakra (puteți numi cum doriți) în rădăcina directorului proiectului meu. În acest obiect, voi defini paleta noastră de culori a mărcii.

Creați un fișier numit theme.js în folderul pe care l-ați creat și apoi adăugați următorul fragment:

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

Acum să îmbinăm tema noastră personalizată cu Chakra UI. Facem asta în nuxt.config.js . În primul rând, avem nevoie de obiectul nostru temă personalizată:

 import customTheme from './chakra/theme'

În continuare, trebuie să specificăm cheia chakra furnizată de modulul Chakra UI Nuxt și să trecem în customTheme la proprietatea extendTheme :

 chakra: { extendTheme: customTheme },

Fișierul dvs. nuxt.config.js ar trebui să arate astfel:

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

Când rulați aplicația cu npm run dev , pagina dvs. de pornire ar trebui să arate astfel:

Acum că am instalat cu succes Chakra UI și am adăugat tema personalizată a aplicației noastre, să începem construirea Chakra-ui explorer.

Crearea navigației noastre principale

Dorim ca navigarea noastră să aibă numele mărcii noastre, în acest caz, acesta va fi Chakra-ui explorer , 2 link-uri de navigare: Documentation and Repo , și un buton care este responsabil pentru comutarea în modul nostru de culoare. Să creăm o nouă componentă în directorul de components numit NavBar în care vom crea navigarea principală a aplicației noastre folosind Chakra UI.

Să o facem. Adăugați următorul fragment la 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>

În continuare, trebuie să importam această componentă în componenta noastră de aspect implicită - default.vue și să o adăugăm la șablonul nostru, astfel încât, în general, aspectul nostru implicit ar trebui să arate astfel:

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

Când rulați aplicația acum, veți vedea asta:

Puteți vedea că navigarea este deja accesibilă fără măcar să o specificați. Acest lucru poate fi văzut doar când apăsați tasta Tab de pe tastatură; Chakra UI se ocupă de gestionarea concentrării, în timp ce vă puteți concentra pe fiecare link din meniul de navigare.

as prop

Din fragmentul nostru NavBar.vue de mai sus, veți observa as prop. Aceasta este o caracteristică disponibilă pentru componentele Chakra UI, care vă permite să treceți o etichetă HTML sau o altă componentă care să fie redată ca etichetă de bază a componentei împreună cu toate stilurile și elementele de recuzită ale acesteia. Deci, când am făcut:

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

cerem Chakra UI să redea un element <li> și să plaseze o componentă de buton în interiorul acestuia. De asemenea, ne puteți vedea utilizând acest model aici:

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

În cazul de mai sus, cerem interfeței Chakra UI să redea componenta <nuxt-link /> a Nuxt.

Elementul as prop vă oferă puterea de a utiliza elementul corect (sau greșit) pentru contextul marcajului dvs. Acest lucru înseamnă că îl puteți folosi pentru a vă construi șablonul de aplicație folosind markupuri semantice, care vor face aplicația dvs. mai semnificativă pentru cititorii de ecran. Deci, în loc să utilizați un element div generic pentru conținutul principal al aplicației dvs., cu ajutorul as prop puteți reda un element main care să spună cititorilor de ecran că acesta este conținutul principal al aplicației dvs.

Notă : Consultați documentația pentru toate elementele de recuzită expuse de componentele Chakra UI. De asemenea, aruncați o privire mai atentă asupra modului în care a fost specificată culoarea mărcii în chakra/theme.js . Puteți vedea din fragmentul de mai sus că îl folosim ca oricare dintre culorile oferite de Chakra UI. Un alt lucru de care trebuie să fii conștient este pictograma moon pe care am folosit-o pentru CIconButton de pe NavBar. Pictograma moon este una dintre pictogramele implicite pe care Chakra UI le oferă din cutie.

Modul color

Una dintre caracteristicile Chakra UI este suportul pentru modul de culoare. Și vă puteți da seama din utilizarea pictogramei moon în navigarea exploratorului Chakra-ui, intenționăm să integrăm modul întunecat. Așa că, în loc să o lăsăm pentru sfârșit, să terminăm cu asta și să-l conectăm chiar acum. Pentru a face acest lucru, CColorModeProvider utilizând funcțiile provide/inject de la Vue, oferă, $chakraColorMode și $toggleColorMode . $chakraColorMode returnează modul de culoare curent al aplicației dvs., în timp ce $toggleColorMode comută modul de culoare de la light la dark și invers. Pentru a folosi aceste două funcții, va trebui să le injectăm în componenta NavBar.vue . Să facem asta mai jos în secțiunea <script /> :

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

Să creăm o proprietate calculată pentru a returna modul de culoare:

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

Acum că am injectat ambele funcții în NavBar.vue , să modificăm butonul de comutare a modului de culoare. Vom începe cu pictograma astfel încât să arate o pictogramă diferită în funcție de modul de culoare. Componenta noastră CIconButton arată acum astfel în această stare:

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

În prezent, folosim un atribut aria-label pentru a le spune cititorilor de ecran să comute la modul întunecat. Să modificăm acest lucru pentru a accepta atât modul de lumină, cât și modul întunecat:

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

În cele din urmă, vom adăuga un handler de evenimente clic pe butonul pentru a comuta modul de culoare al aplicației noastre folosind funcția $toggleColorMode . Ca astfel:

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

Pentru a testa dacă configurarea modului de culoare funcționează, voi adăuga o interpolare a modului de culoare și un text lângă CIconButton care comută în modul nostru de culoare. Ca astfel:

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

Iată cum arată aplicația noastră în prezent:

Așa că am făcut eforturi grele în configurarea modului de culoare în Chakra UI. Deci acum ne putem stila aplicația pe baza modului de culoare. Să mergem la default.vue și să folosim suportul pentru slotul modului de culoare furnizat de CColorModeProvider pentru a stila aplicația noastră. Să modificăm mai întâi șablonul în 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>

Destructuram colorMode din proprietatea slot props furnizată de CColorModeProvider și apoi îl transmitem ca o cheie dinamică unui obiect mainStyle pe care îl vom crea în scurt timp. Ideea este să folosiți un set diferit de stiluri bazat pe valoarea colorMode . De asemenea, folosesc lățimea și înălțimea cu elementele de recuzită scurte - w și respectiv h pentru a seta lățimea și înălțimea componentei noastre CBox . Să definim acest obiect mainStyles în secțiunea noastră 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 are acum suport pentru modul întunecat!

Acum avem bara noastră de navigare și am configurat cu succes suport pentru modul întunecat pentru aplicația noastră, să ne concentrăm pe index.vue în pages/ directorul nostru unde poate fi găsită carnea aplicației noastre. Vom începe cu adăugarea unei componente CBox astfel:

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

Apoi vom adăuga componenta CInput în interiorul acesteia. Componenta noastră de pagină index.vue va arăta astfel:

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

Iată cum arată aplicația noastră acum:

Puteți vedea din screencast-ul de mai sus cum elementul CInput știe automat când este în modul întunecat și se ajustează în consecință, chiar dacă nu am setat asta în mod explicit. De asemenea, utilizatorul poate apăsa tasta Tab pentru a se concentra pe acea componentă CInput .

Adăugarea listei de componente

Deci, ideea exploratorului Chakra-ui (după cum am menționat mai devreme) este de a arăta utilizatorului toate componentele disponibile în Chakra UI, astfel încât să putem avea o listă a acelor componente, precum și legăturile care vor duce utilizatorul la documentație. a componentei. Pentru a face acest lucru, voi crea un folder numit data la rădăcina directorului proiectului nostru, apoi voi crea un fișier numit index.js . În index.js , voi exporta o serie de obiecte care vor conține numele componentelor. Iată cum ar trebui să arate fișierul:

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

Pentru ca implementarea noastră să fie completă, voi importa matricea de mai sus în pages/index.vue și voi repeta peste el pentru a afișa toate componentele. De asemenea, vom oferi utilizatorului posibilitatea de a filtra componentele folosind caseta de căutare. Iată implementarea completă:

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

Și acum aplicația noastră arată astfel:

Acum puteți vedea cum modul întunecat este automat pentru lista de componente, precum și cum este adăugat gestionarea focalizării pentru link-uri (în mod implicit) pentru a ajuta accesibilitatea.

Punerea la încercare a interfeței de utilizare Chakra

În cele din urmă, să vedem cum obține nota aplicației noastre rulând testul de accesibilitate Lighthouse pe ea. Rețineți, acest test se bazează pe evaluarea impactului utilizatorului Axe. Mai jos este un screencast al testului. De asemenea, puteți rula singur testul urmând acești pași.

Din ecranul de mai sus puteți vedea că aplicația noastră Chakra UI are un scor de 85 la testul de accesibilitate la far.

Concluzie

În acest articol, am atins nevoia de a construi interfețe accesibile și am văzut, de asemenea, cum să folosim Chakra UI pentru a construi aplicații accesibile de la zero prin construirea unui explorator (Chakra-ui explorer) pentru componentele Chakra UI.

• Vezi aplicația live pe Netlify →
• Link către repo →